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

Created on 31 May 2020 · 27Comments · Source: nklayman/vue-cli-plugin-electron-builder

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

Source

Meowzz95

Most helpful comment

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

azeranex on 4 Jun 2020

👍21 😄4

All 27 comments

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?

nklayman on 31 May 2020

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.

Al-Rozhkov on 1 Jun 2020

👍23

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

Xnip2020-06-02_16-37-40

Meowzz95 on 2 Jun 2020

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

azeranex on 4 Jun 2020

👍21 😄4

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.

Meowzz95 on 13 Jun 2020

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

azeranex on 13 Jun 2020

👍7

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

amrbashir on 13 Jul 2020

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

nklayman on 14 Jul 2020

Thanks.

amrbashir on 14 Jul 2020

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

lisonge on 20 Sep 2020

👍6

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

cnikolov on 21 Sep 2020

Still happening in Electron 10

DanielRivers on 22 Sep 2020

👍12

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

MBurchard on 29 Sep 2020

👍3 🚀2

I am still having the same issue, any solutions?

amacsmith on 1 Oct 2020

👍4

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

burzum on 1 Oct 2020

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 on 7 Oct 2020

👍3

@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 on 7 Oct 2020

@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 on 7 Oct 2020

👍2

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

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

DKhalil on 19 Oct 2020

👍4 ❤2

@nklayman Hi, Any solution for this?

uwejan on 20 Oct 2020

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 on 20 Oct 2020

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.

neosix on 23 Oct 2020

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

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

However, it still showing up the warnings.

evsar3 on 25 Oct 2020

👍9 ❤3

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

zhch-hong on 27 Oct 2020

👎3

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

works perfectly, thanks!

Suyashtnt on 15 Dec 2020

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.

m4heshd on 27 Dec 2020

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

Christopher-Hayes on 15 Jan 2021

👍1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Question||'build' in the application package.json is not supported since 3.0

JamesDream87 · 5Comments

Question: how to change the default icon ?

TrustNguyen · 5Comments

Cannot get Umzug to work. It fires no such file or directory when trying to load the migrations folder after bundling.

adnanlah · 4Comments

Use the shortcut key to refresh the page after the page blank

HeiShanLaoYao889 · 5Comments

【lint】'__static' is not defined

webees · 5Comments