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

【问题标题】：Unable to load react dev tools in electron无法在电子中加载反应开发工具
【发布时间】：2021-02-10 09:07:45
【问题描述】：

我正在尝试在电子中加载 React 和 Redux 开发工具，到目前为止 Redux 已成功加载，但 React 没有。我在Developer Tools 中没有看到 React 选项卡。这是我的代码：

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"
  }
}

我使用yarn start 启动程序，输出如下：

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.

我在开发者工具中看到了Redux，但是没有找到React。根据this github issue，上述警告不应阻止开发工具的加载。我还尝试重新打开开发工具，但没有运气。如何解决？

【问题讨论】：

标签： javascript node.js reactjs electron google-chrome-devtools

【解决方案1】：

在 webPreferences 下添加

contextIsolation: false

对于 loadExtension 函数，添加 { allowFileAccess: true } 作为第二个参数。

这应该可以正常工作，因为他们在某些版本（我认为是 9.0.0）中将 contextIsolation 的默认值更改为 true，并添加了 allowFileAccess 作为安全扩展加载选项。

如果需要，您可以创建一个 isDev 布尔值以用于设置 allowFileAccess。

【讨论】：