Блог

Я пытаюсь загрузить инструменты React и Redux dev в electron, пока Redux был загружен успешно, но React не был. Я не видел вкладку 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();
  }
});
  

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 . Согласно этой проблеме с github, приведенные выше предупреждения не должны блокировать загрузку инструментов разработчика. Я также попытался повторно открыть dev-tools, но безуспешно. Как это решить?

в разделе webPreferences добавить

 contextIsolation: false
  

для функции loadExtension добавьте { allowFileAccess: true } в качестве 2-го аргумента.

Это должно заставить его работать, поскольку они изменили значение по умолчанию для contextIsolation на true в какой-то версии (я думаю, 9.0.0) и добавили allowFileAccess в качестве опции загрузки расширения для безопасности.

Вы можете создать логическое значение isDev для настройки allowFileAccess, если это необходимо.