vue-cli-plugin-electron-builder: Electron 9.0.0, unable to install dev tools

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

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.

Still happening in Electron 10

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

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

I am still having the same issue, any solutions?

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

@gskaplan the vuedevtools extension doesn’t support Vue3 yet, that’s probably why 😉

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

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

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

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

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

Anything that can be done to resolve it?

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

// 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

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

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

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

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?

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

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?