ExtensionLoadWarning for React Devtools

[tysonnero]

I'm using https://github.com/electron/electron-quick-start.

I installed electron-devtools-installer and wired it up as per the README: https://github.com/MarshallOfSound/electron-devtools-installer#usage.

When I run the Electron app, I get the following message in the console, and React Devtools never loads in the app/browser.

(node:67218) ExtensionLoadWarning: Warnings loading extension at /Users/tysonnero/Library/Application Support/electron-quick-start/extensions/fmkadmapgofadopljbjfkapdkoienihi: 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. 
Added Extension:  React Developer Tools

"electron": "^9.1.1",
"electron-devtools-installer": "^3.1.1"

[abrunner94]

Seeing the same issue with the same electron and electron-devtools-installer version.

[ethankale]

Same issue, also same electron and electron-devtools-installer version, trying to load VUEJS-DEVTOOLS.

[tysonnero]

Hmmm... suggested fix here is to close and reopen devtools? https://github.com/electron/electron/issues/23662

[ethankale]

Issue remains after closing & opening the project and rebuilding the entire project with Webpack.

[misterpancn]

Loading VUEJS_DEVTOOLS has the same issue. [email protected] and [email protected]

[cjones26]

FYI it appears that the extensions still work (at least for me), though this error is an annoyance.

[Coding-Kiwi]

Having the same Issue loading VUEJS_DEVTOOLS [email protected], [email protected]

I am using await in the app ready event, no error is thrown. closing and reopening doesn't fix the issue.

Vue also says "Download the Vue Devtools extension for a better development experience:" so it seems it is not loaded

[midskyey]

:tada: While the warning itself does not cause issues with the extension - https://github.com/electron/electron/issues/23662#issuecomment-631758044, the separate issue with React / Vue Dev Tools tab not appearing can be worked around with simply awaiting the page to load and then opening dev tools, without the need to close and reopen - https://github.com/electron/electron/issues/23662#issuecomment-656756927. Helped me.

[mcasto]

I get the same error with VUEJS_DEVTOOLS.

As others have noted, devtools still works in my app, but the warning is annoying.

[kksharma1618]

I was facing the same issue. electron has deprecated BrowserWindow.addDevToolsExtension methods. Instead now you are supposed to use session.loadExtension method.

To fix I first tried to manually install my local extension folder (chrome extension), via BrowserWindow.addDevToolsExtension method. And it threw the same error I was facing when using electron-devtools-installer package. Then I tried session.loadExtension and it worked this time.

Note: session.loadExtension only works with non temporary session (either defaultSession or when session partition starts with "persist:")

[Coding-Kiwi]

@kksharma1618 weird, because as you can see here, electron-devools-installer already uses session.loadExtension https://github.com/MarshallOfSound/electron-devtools-installer/blob/master/src/index.js#L80

[kksharma1618]

@Coding-Kiwi Could be because I was using non default session.

[WolfieZero]

Seeing this issue on Electron ^10.1.3 with electron-devtools-installer ^3.1.1 as well

(node:53670) ExtensionLoadWarning: Warnings loading extension at /Users/___/Library/Application Support/___/extensions/fmkadmapgofadopljbjfkapdkoienihi: 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:53670) ExtensionLoadWarning: Warnings loading extension at /Users/___/Library/Application Support/___/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd: 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. 
Added Extension: Redux DevTools
[53670:1001/160735.175209:ERROR:CONSOLE(216)] "Extension server error: Object not found: <top>", source: devtools://devtools/bundled/extensions/extensions.js (216)
[53670:1001/160735.175427:ERROR:CONSOLE(216)] "Extension server error: Object not found: <top>", source: devtools://devtools/bundled/extensions/extensions.js (216)

[itsfarseen]

Having the same Issue loading VUEJS_DEVTOOLS [email protected], [email protected]

I am using await in the app ready event, no error is thrown. closing and reopening doesn't fix the issue.

Vue also says "Download the Vue Devtools extension for a better development experience:" so it seems it is not loaded

@Coding-Kiwi if you are still facing this issue, see if this works for you https://github.com/electron/electron/issues/23662#issuecomment-706059013

[Coding-Kiwi]

@happycoder97 sadly this also does not fix my problem. I think there is something wrong with vue devtools, other extensions work. (I tried both the regular and the beta one)

[nodegin]

Having the same issue, any idea how to fix this?

[Coding-Kiwi]

Seems like this could be related to https://github.com/electron/electron/issues/24011 The problem seems to be when you load file:// urls

[shmilyoo]

(node:18122) ExtensionLoadWarning: Warnings loading extension at /Users/yy/Library/Application Support/Electron/extensions/fmkadmapgofadopljbjfkapdkoienihi: 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.

"electron": "^11.0.1",
"electron-builder": "^22.3.6",
"electron-devtools-installer": "^3.1.1",

use electron-react-boilerplate

[Coding-Kiwi]

For me it was the fact that I was using the file:// protocol, this can be worked around by using allowFileAccess

installExtension(VUEJS3_DEVTOOLS, {
    loadExtensionOptions: {
        allowFileAccess: true,
    },
})

The warning still stays, but the devtools work!

I fiddled around with loading the extension manually. I copied the extension folder from my chrome userdata folder and loaded it like this:

import { session } from 'electron';

let ext_path = path.resolve(".", "extensions", "vue-devtools");
await session.defaultSession.loadExtension(ext_path, {
    allowFileAccess: true
});

I modified the manifest.json inside the extension folder (deleted the browser_action, update_url keys, the "contextMenus" entry in permissions) and deleted the _metadata directory.

This resolves the ExtensionLoadWarning and the devtools still work, but as it is said everywhere the warning has nothing to do with the extension not working, the main issue is most propably allowFileAccess

[antonreshetov]

I solved the problem for me for VUEJS3_DEVTOOLS (ljjemllljcmogpfapbkkighbkhhppjdbg, 6.0.0 beta 7) by removing contextMenus in permissions as advised @Coding-Kiwi

[akett]

PSA for anyone who doesn't like the idea of editing extension files/maintaining your own copy of an extension, you can easily suppress the ExtensionLoadWarning messages by overriding stderr. Just be careful nothing else is happening in your app that might need stderr to show you something actually helpful.

Example using await:

const oldError = process.stderr.write;
process.stderr.write = () => null;

await installExtension(VUEJS3_DEVTOOLS)
    .catch(e => console.log(e.toString()));

process.stderr.write = oldError;

Example using then/catch

const oldError = process.stderr.write;
const showStderr = () => process.stderr.write = oldError;
process.stderr.write = () => null;

installExtension(VUEJS3_DEVTOOLS)
    .then(showStderr)
    .catch(e => showStderr() && console.log(e.toString()));