无法在电子中加载反应开发工具

Question

I'm trying to load React and Redux dev tools in electron, so far Redux was loaded successfully, but React was not. I didn't see the React tab in Developer Tools . Here is my code:

main.js

const electron = require("electron");
const path = require("path");
const url = require("url");
const os = require("os");

const { app, BrowserWindow } = electron;

let win;

const installExtensions = async () => {
  const ses = win.webContents.session;
    // react dev tools
    ses.loadExtension(
      path.join(
        os.homedir(),
        ".config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0"
      )
    );
    // redux dev tools
    ses.loadExtension(
      path.join(
        os.homedir(),
        ".config/google-chrome/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0"
      )
    );
};

const createWindow = async () => {

  win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    },
  });
  win.maximize();

  await installExtensions();

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, "index.html"),
      protocol: "file:",
      slashes: true,
    })
  );

  win.webContents.once("dom-ready", () => {
    win.webContents.openDevTools();
  });

  win.on("closed", () => {
    win = null;
  });
};

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

package.json

{
  "name": "electron-react-typescript",
  "version": "0.0.7",
  "description": "",
  "main": "/main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "dependencies": {
    "electron": "^10.1.5",
    "electron-builder": "^22.9.1"
  }
}

I started the program using yarn start , here is the output:

yarn run v1.22.10
warning package.json: No license field
$ electron main.js
(node:8189) ExtensionLoadWarning: Warnings loading extension at /home/searene/.config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system. 
(node:8189) ExtensionLoadWarning: Warnings loading extension at /home/searene/.config/google-chrome/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0: Unrecognized manifest key 'commands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system. 

I saw Redux in the developer tools, but I didn't find React . According to this github issue , the above warnings shouldn't block the loading of dev tools. I also tried re-opening dev-tools, no luck. How to solve it?

Answer 1

under webPreferences add

contextIsolation: false

for the loadExtension function add { allowFileAccess: true } as a 2nd argument.

That should make it work, as they changed the default of contextIsolation to be true in some version (I think 9.0.0), and added allowFileAccess as an extention loading option for security.

You can make an isDev boolean to use for setting the allowFileAccess if needs be.