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?