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?

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.

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

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()
// ...

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.

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

@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 ?

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

Thanks.

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

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

Still happening in Electron 10

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

I am still having the same issue, any solutions?

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

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.

@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...

@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.

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

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

@nklayman Hi, Any solution for this?

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.

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.

@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.

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

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

works perfectly, thanks!

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.

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

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

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?

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

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

一针见血

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)

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

await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')

@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.

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

Anything that can be done to resolve it?

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

@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

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

Same error here with electron 13.0.0 and vue 2.6.11.

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"
  }
}

Same here

Same here.

node v14.18.2
electron 13.0.0
vue 2.6.11

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

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