时间戳

首页 > 解决方案 > 无法在电子中加载反应开发工具

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

问题描述

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

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

包.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，上述警告不应阻止开发工具的加载。我还尝试重新打开开发工具，但没有运气。如何解决？

标签： javascriptnode.jsreactjselectrongoogle-chrome-devtools

解决方案

在 webPreferences 下添加

contextIsolation: false

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

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

如果需要，您可以使用 isDev 布尔值来设置 allowFileAccess。

推荐阅读