無法在電子中加載反應開發工具

Question

我正在嘗試在電子中加載 React 和 Redux 開發工具，到目前為止 Redux 已成功加載，但 React 未成功。 我沒有在Developer Tools看到 React 選項卡。 這是我的代碼：

主文件

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();
  }
});

包.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 ，上述警告不應阻止開發工具的加載。 我也嘗試重新打開開發工具，但沒有運氣。 如何解決？

Answer 1

在 webPreferences 下添加

contextIsolation: false

對於 loadExtension 函數，添加{ allowFileAccess: true }作為第二個參數。

這應該使它起作用，因為他們在某些版本（我認為是 9.0.0）中將 contextIsolation 的默認值更改為 true，並添加了 allowFileAccess 作為安全性的擴展加載選項。

如果需要，您可以創建一個 isDev 布爾值以用於設置 allowFileAccess。