feat(generator): use electron-devtools-installer, fixes #776

Author: nklayman

docs/guide/commonIssues.md

@@ -28,7 +28,7 @@ Often this issue is caused when Vue Devtools fails to install. This may happen i
 ```javascript
 if (isDevelopment && !process.env.IS_TEST) {
   // Install Vue Devtools
-  await installVueDevtools()
+  await installExtension(VUEJS_DEVTOOLS)
 }
 ```
 

docs/guide/recipes.md

@@ -237,7 +237,7 @@ app.on('ready', async () => {
   if (isDevelopment && !process.env.IS_TEST) {
     // Install Vue Devtools
     try {
-      await installVueDevtools()
+      await installExtensions(VUEJS_DEVTOOLS)
     } catch (e) {
       console.error('Vue Devtools failed to install:', e.toString())
     }

generator/index.js

@@ -105,7 +105,9 @@ module.exports = (api, options = {}) => {
   }
   addScript('postinstall', 'electron-builder install-app-deps')
   addScript('postuninstall', 'electron-builder install-app-deps')
-  const devDependencies = {}
+  const devDependencies = {
+    'electron-devtools-installer': '^3.1.0'
+  }
   if (electronVersion) {
     // Use provided electron version
     devDependencies.electron = electronVersion

generator/templates/base/src/background.js

@@ -1,10 +1,8 @@
 'use strict'
 
 import { app, protocol, BrowserWindow } from 'electron'
-import {
-  createProtocol,
-  <% if (devtoolsExtensionsBroken) { %>/* installVueDevtools */<% } else { %>installVueDevtools<% } %>
-} from 'vue-cli-plugin-electron-builder/lib'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+<% if (devtoolsExtensionsBroken) { %>// <% } %>import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Keep a global reference of the window object, if you don't, the window will
@@ -73,12 +71,12 @@ app.on('ready', async () => {
     // In addition, if you upgrade to Electron ^8.2.5 or ^9.0.0 then devtools should work fine
 
     // try {
-    //   await installVueDevtools()
+    //   await installExtension(VUEJS_DEVTOOLS)
     // } catch (e) {
     //   console.error('Vue Devtools failed to install:', e.toString())
     // }
 <% } else { %>try {
-      await installVueDevtools()
+      await installExtension(VUEJS_DEVTOOLS)
     } catch (e) {
       console.error('Vue Devtools failed to install:', e.toString())
     }<% } %>

lib/installVueDevtools/index.js

@@ -20,6 +20,13 @@ if (fs.existsSync(getIDMapPath())) {
 }
 
 const install = (forceDownload = false) => {
+  console.log(
+    'installVueDevtools() is deprecated, and will be removed in a future release.'
+  )
+  console.log('Please use electron-devtools-installer instead.')
+  console.log(
+    'See https://github.com/nklayman/vue-cli-plugin-electron-builder/releases/tag/v2.0.0-rc.4 for details.'
+  )
   // return new Promise(resolve => {
   const chromeStoreID = 'nhdogjmejiglipccpnnnanhbledajbpd'
   const extensionName = IDMap[chromeStoreID]
@@ -31,7 +38,7 @@ const install = (forceDownload = false) => {
     return Promise.resolve(IDMap[chromeStoreID])
   }
   return downloadChromeExtension(chromeStoreID, forceDownload).then(
-    extensionFolder => {
+    (extensionFolder) => {
       // Use forceDownload, but already installed
       if (extensionInstalled) {
         BrowserWindow.removeDevToolsExtension(extensionName)

package.json

@@ -61,6 +61,7 @@
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
     "electron": "^9.0.3",
+    "electron-devtools-installer": "^3.1.0",
     "eslint": "^7.2.0",
     "eslint-config-standard": "^14.0.0",
     "eslint-plugin-import": "^2.21.2",

yarn.lock

@@ -6521,6 +6521,15 @@ electron-chromedriver@^9.0.0:
     "@electron/get" "^1.12.2"
     extract-zip "^2.0.0"
 
+electron-devtools-installer@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-3.1.0.tgz#c7800d36ab8438b51d2e03345860f817ecb5797f"
+  integrity sha512-qZd1Aoya8YOK6QauNX92V5qyKGtb4lbs238bP+qtMBkXts24xJ/1PtOVBPvdg5w3Ts9L5o6I9sDErKuzHeJFDA==
+  dependencies:
+    rimraf "^3.0.2"
+    semver "^7.2.1"
+    unzip-crx "^0.2.0"
+
 electron-publish@22.7.0:
   version "22.7.0"
   resolved "https://registry.yarnpkg.com/electron-publish/-/electron-publish-22.7.0.tgz#d92ba7c4007c9ac1dd070593e48028184fb2dc19"