Electron 9.0.0, unable to install dev tools

[Meowzz95]

Describe the bug After upgrading to electron 9.0.0, the following error is thrown.

(node:63292) ExtensionLoadWarning: Warnings loading extension at /Users/mimimi/Library/Application Support/PROJECTNAME/extensions/nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' 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.
(node:63292) ExtensionLoadWarning: Warnings loading extension at /Users/mimimi/Library/Application Support/PROJECTNAME/extensions/nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' 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.

To Reproduce Init a project and upgrade electron to 9.0.0

Expected behavior The dev tool should be working

Environment (please complete the following information):

• OS and version: macOS 10.15.5
• node version: v12.13.1
• npm version:
• yarn version (if used): 1.22.0
• vue-cli-plugin-electron-builder version : commit f0c7709
• electron version: 9.0.0
• other vue plugins used: vuetify
• custom config for vcp-electron-builder: none
• (if possible) link to your repo: none

[nklayman]

I get the error as well, but Vue devtools seems to work just fine as far as I can tell, are you sure they aren't working for you?

[Al-Rozhkov]

Doesn't work for me. Additional error message: 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead.

Permission 'contextMenus' 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.

[Meowzz95]

@nklayman Yes the Vue dev tool is not shown, I will attach a screenshot.

[azeranex]

Vue Dev tool is actually working but you have to close and re-open dev tool.

I use following code to make it work from start:

async function createWindow () {
// ...
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
// ...

[Meowzz95]

Vue Dev tool is actually working but you have to close and re-open dev tool.

I use following code to make it work from start:

async function createWindow () {
// ...
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
// ...

Isn't this the default code generated by the plugin?

I have the same code here, and the dev tool is opened when I run dev server, but I don't see how your code gives "re-open" behaviour.

[azeranex]

Vue Dev tool is actually working but you have to close and re-open dev tool. I use following code to make it work from start:

async function createWindow () {
// ...
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
// ...

Isn't this the default code generated by the plugin?

I have the same code here, and the dev tool is opened when I run dev server, but I don't see how your code gives "re-open" behaviour.

async await

[amrbashir]

@nklayman I ran into this issue again this morning with electron 9.0.0, @azeranex solution worked for me. Maybe add this to the docs under Common Issues ?

[nklayman]

I changed this to be the default for background.js since it seems like a somewhat common issue.

[amrbashir]

Thanks.

[lisonge]

await installExtension(VUEJS_DEVTOOLS);

output

(node:7692) ExtensionLoadWarning: Warnings loading extension at C:\Users\lisonge\AppData\Roaming\wallpaper-manage\extensions\nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' 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. (node:7692) ExtensionLoadWarning: Warnings loading extension at C:\Users\lisonge\AppData\Roaming\wallpaper-manage\extensions\nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' 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.

when i use other code to load

const VUEJS_DEVTOOLS_PATH = 'C:/Users/lisonge/AppData/Local/Microsoft/Edge/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/5.3.3_0'
await session.defaultSession.loadExtension(VUEJS_DEVTOOLS_PATH)

it output same log

[cnikolov]

Is this is fixed or still pending, i have the same issue? any solutions suggested here?

[DanielRivers]

Still happening in Electron 10

[MBurchard]

The suggested changes, adding await, does not help.

(node:21896) ExtensionLoadWarning: Warnings loading extension at C:\Users\Martin Burchard\AppData\Roaming\electron-test2\extensions\nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' 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.

This Repo can be used for testing: https://github.com/MBurchard/Electron-Test

[amacsmith]

I am still having the same issue, any solutions?

[burzum]

I can confirm that I've tried @MBurchard solution in my app and it doesn't work, even with async await.

[gskaplan]

I created Vue3 app, added the electron-builder, and I cannot under any circumstances get Vue Devtools to show up. I've made the mods with await, etc. but no luck. I repeated the exact same process using Vue2 and after adding the await, the devtools show up perfectly. For the Vue3 app, I also navigated a Chrome browser to localhost:8080 and got the app to show up and the Vue Tools DID show up in the devtools. I tried Vue3 with various versions of Electron but no luck. I'm writing all of this because I haven't seen any reference to Vue3 as having any relationship to this problem.

[MBurchard]

@gskaplan Have you tried my Repository? The Vue3 Electron App shows the DevTools. Only problem is a warning message it shows on startup... You may also compare, why the DevTools show up with that solution but not with yours...

[gskaplan]

@MBurchard I just tried your repo and have the same results. I even tried it on a different machine, so now I see the same behavior on both machines. I did a fresh install of node (latest) and vue-cli. Both machines are Windows and using Chrome 85.0.4183.121.

[DKhalil]

@gskaplan the vuedevtools extension doesn't support Vue3 yet, that's probably why ;)

https://headwayapp.co/vue-js-devtools-changelog

[uwejan]

@nklayman Hi, Any solution for this?

[nklayman]

I haven't had any problems after adding the await as mentioned in an above comment. Not sure what else could be done to help fix it unfortunately. Since it works for me I can't test any possible solutions.

[neosix]

I haven't had any problems after adding the await as mentioned in an above comment. Not sure what else could be done to help fix it unfortunately. Since it works for me I can't test any possible solutions.

@nklayman I found something interesting. On fresh install it works fine, but close Electron completely and start again, and dev-tools are gone. I deleted app folder from %AppData%\Roaming and dev-tools were back, but again after restart the same issue.

Maybe this can help you for further testing.

[evsar3]

@gskaplan as mentioned by @DKhalil, Vue Devtools doesn't support Vue 3 yet, but you can install the Vue Devtools Beta which supports Vue 3:

installExtension({
  id: 'ljjemllljcmogpfapbkkighbhhppjdbg',
  electron: '>=1.2.1'
})

However, it still showing up the warnings.

[zhch-hong]

vue2的调试工具和vue3的调试工具，不是同一个扩展插件

[Suyashtnt]

installExtension({
  id: 'ljjemllljcmogpfapbkkighbhhppjdbg',
  electron: '>=1.2.1'
})

works perfectly, thanks!

[m4heshd]

installExtension({
  id: 'ljjemllljcmogpfapbkkighbhhppjdbg',
  electron: '>=1.2.1'
})

Been trying to get this working for days. This was the only solution that worked. Thank you so much. As you mentioned, the warnings are still there.

[Christopher-Hayes]

For anyone wanting to verify the authenticity of the extension ID provided, here is the Chrome store page: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

[ghost]

I was facing same issue in redux dev tools, but creating window after the promise resolve fixed it.

app.whenReady().then(() => {
    installExtension(REDUX_DEVTOOLS)
        .then((name) => {
            console.log(`Added Extension:  ${name}`);
            createWindow();
        })
        .catch((err) => console.log('An error occurred: ', err));
});

[dominikjasek]

Hey, you're totally any Idea when this ljjemllljcmogpfapbkkighbhhppjdbg Vue3 Dev tools will fully support vuex?

I am deciding whether to use vue 2 or 3 and I feel like this is a big drawback (also vuetify is not available currently for vue 3). Any advices what I should consider?

[mgomez-tubs]

I'm getting this with VueJS 2.6.11. It's a bit strange how inconsistent this issue is.

[xiaohudie]

vue2的调试工具和vue3的调试工具，不是同一个扩展插件

一针见血

[yelonek]

Hello everyone. I stumbled into same problem.

I added electron-builder to my existing Vue 3 app. App is working, except for Vue 3 Devtools. It is complaining about some manifest.json keys and _metadata directory, but I have no idea what this is about. Any help will be appreciated.

Part of my package.json:

  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.1",
    "core-js": "^3.6.5",
    "jszip": "^3.6.0",
    "krl-dai": "file:../krl-dai",
    "moment": "^2.29.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "electron": "^12.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "vue-cli-plugin-electron-builder": "~2.0.0"

I got exact same message:

(node:4264) ExtensionLoadWarning: Warnings loading extension at C:\Users\my-user-name\AppData\Roaming\my-app-name\extensions\nhdogjmejiglipccpnnnanhbledajbpd:
  Unrecognized manifest key 'browser_action'.
  Unrecognized manifest key 'update_url'.
  Permission 'contextMenus' 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.

(Use `electron --trace-warnings ...` to show where the warning was created)

[azeranex]

@yelonek If you use Vue 3, you need to install beta devtool

await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')

[yelonek]

@azeranex Thank you.

I just figured it out led by @zhch-hong an @xiaohudie comments. I changed VUEJS_DEVTOOLS to VUEJS3_DEVTOOLS in background.js and it worked like a charm.

How can I help fix it? Looks like there must be discrimination between Vue 2 and Vue 3 when genereating background.js.

[ghost]

I'm having this same issue in Electron 13.1.4 and Vue 2.6.14

Anything that can be done to resolve it?

[obivandamme]

Same here with Electron 13.2.2 and Vue 2.6.11

The DevTools are available and also seem to work, but I always receive that strange error message

[djkloop]

@azeranex Thank you.

I just figured it out led by @zhch-hong an @xiaohudie comments. I changed VUEJS_DEVTOOLS to VUEJS3_DEVTOOLS in background.js and it worked like a charm.

How can I help fix it? Looks like there must be discrimination between Vue 2 and Vue 3 when genereating background.js.

same error

[djkloop]

// package.json

{
  "name": "abc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.17.2",
    "vue": "^3.2.9",
    "vue-router": "^4.0.11"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-plugin-typescript": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.2.9",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^7.17.0",
    "prettier": "^2.3.2",
    "sass": "^1.39.0",
    "sass-loader": "10",
    "typescript": "^4.4.2",
    "vue-cli-plugin-electron-builder": "~2.1.1"
  }
}

# error info
jcmogpfapbkkighbhhppjdbg:
  Unrecognized manifest key 'browser_action'.
  Unrecognized manifest key 'update_url'.
  Permission 'contextMenus' 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.
(Use `Electron --trace-warnings ...` to show where the warning was created)

# env
node: v14.17.6

[lukas2]

I see the same with electron 14.0.0 and vue 2.6.14, help is greatly appreciated..

[chrishham]

Same error here with electron 13.0.0 and vue 2.6.11.

[toimc]

Same error here with electron 15.3.0 and vue 3.0.0

{
  "name": "vue3-electron-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "electron": "^15.3.0",
    "electron-devtools-installer": "^3.2.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-cli-plugin-electron-builder": "~2.1.1"
  }
}

[sangyoo91]

Same here

[Likenttt]

Same here.

node v14.18.2
electron 13.0.0
vue 2.6.11

[KaKi87]

Hello, I'm running Electron 17 + Vue 3 + Parcel 2, Vue DevTools work fine but I am getting this warning.

(node:8012) ExtensionLoadWarning: Warnings loading extension at /home/tiana/.config/Electron/extensions/ljjemllljcmogpfapbkkighbhhppjdbg:
  Permission 'contextMenus' is unknown or URL pattern is malformed.

Thanks

[RhodeHummel]

Just to add my 2 cents. Here is my code snippet that I found to work. Notice the allowFileAccess is required for some reason. Without it the tab never shows up in the chrome tools.

await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg', {
    loadExtensionOptions: {
        allowFileAccess: true,
    },
});