feat(serve): add vue devtools extension, closes #35

Author: nklayman

generator/template/src/background.js

@@ -3,8 +3,10 @@
 import { app, protocol, BrowserWindow } from 'electron'
 import * as path from 'path'
 import { format as formatUrl } from 'url'
-import createProtocol from 'vue-cli-plugin-electron-builder/lib/createProtocol.js'
-
+import {
+  createProtocol,
+  installVueDevtools
+} from 'vue-cli-plugin-electron-builder/lib'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // global reference to mainWindow (necessary to prevent window from being garbage collected)
@@ -61,6 +63,10 @@ app.on('activate', () => {
 })
 
 // create main BrowserWindow when electron is ready
-app.on('ready', () => {
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    await installVueDevtools()
+  }
   mainWindow = createMainWindow()
 })

lib/createProtocol.d.ts

@@ -0,0 +1,2 @@
+export function createProtocol(scheme: string): void
+export function installVueDevtools(forceDownload?: boolean): Promise<string>

lib/index.d.ts

@@ -0,0 +1,2 @@
+export { default as installVueDevtools } from './installVueDevtools'
+export { default as createProtocol } from './createProtocol'

lib/index.js

@@ -0,0 +1,57 @@
+import fs from 'fs'
+import path from 'path'
+import rimraf from 'rimraf'
+import unzip from 'unzip-crx'
+
+import { getPath, downloadFile, changePermissions } from './utils'
+
+const downloadChromeExtension = (
+  chromeStoreID,
+  forceDownload,
+  attempts = 5
+) => {
+  const extensionsStore = getPath()
+  if (!fs.existsSync(extensionsStore)) {
+    fs.mkdirSync(extensionsStore)
+  }
+  const extensionFolder = path.resolve(`${extensionsStore}/${chromeStoreID}`)
+  return new Promise((resolve, reject) => {
+    if (!fs.existsSync(extensionFolder) || forceDownload) {
+      if (fs.existsSync(extensionFolder)) {
+        rimraf.sync(extensionFolder)
+      }
+      const fileURL = `https://clients2.google.com/service/update2/crx?response=redirect&x=id%3D${chromeStoreID}%26uc&prodversion=32` // eslint-disable-line
+      const filePath = path.resolve(`${extensionFolder}.crx`)
+      downloadFile(fileURL, filePath)
+        .then(() => {
+          unzip(filePath, extensionFolder).then(err => {
+            if (
+              err &&
+              !fs.existsSync(path.resolve(extensionFolder, 'manifest.json'))
+            ) {
+              return reject(err)
+            }
+            changePermissions(extensionFolder, 755)
+            resolve(extensionFolder)
+          })
+        })
+        .catch(err => {
+          console.log(
+            `Failed to fetch extension, trying ${attempts - 1} more times`
+          ) // eslint-disable-line
+          if (attempts <= 1) {
+            return reject(err)
+          }
+          setTimeout(() => {
+            downloadChromeExtension(chromeStoreID, forceDownload, attempts - 1)
+              .then(resolve)
+              .catch(reject)
+          }, 200)
+        })
+    } else {
+      resolve(extensionFolder)
+    }
+  })
+}
+
+export default downloadChromeExtension

lib/installVueDevtools/downloadChromeExtension.js

@@ -0,0 +1,54 @@
+import electron, { remote } from 'electron'
+import fs from 'fs'
+import path from 'path'
+
+import downloadChromeExtension from './downloadChromeExtension'
+import { getPath } from './utils'
+
+const { BrowserWindow } = remote || electron
+
+let IDMap = {}
+const IDMapPath = path.resolve(getPath(), 'IDMap.json')
+if (fs.existsSync(IDMapPath)) {
+  try {
+    IDMap = JSON.parse(fs.readFileSync(IDMapPath, 'utf8'))
+  } catch (err) {
+    console.error(
+      'electron-devtools-installer: Invalid JSON present in the IDMap file'
+    )
+  }
+}
+
+const install = (forceDownload = false) => {
+  return new Promise(resolve => {
+    const chromeStoreID = 'nhdogjmejiglipccpnnnanhbledajbpd'
+    const extensionName = IDMap[chromeStoreID]
+    const extensionInstalled =
+      extensionName &&
+      BrowserWindow.getDevToolsExtensions &&
+      BrowserWindow.getDevToolsExtensions()[extensionName]
+    if (!forceDownload && extensionInstalled) {
+      return Promise.resolve(IDMap[chromeStoreID])
+    }
+    downloadChromeExtension(chromeStoreID, forceDownload).then(
+      extensionFolder => {
+        // Use forceDownload, but already installed
+        if (extensionInstalled) {
+          BrowserWindow.removeDevToolsExtension(extensionName)
+        }
+        const name = BrowserWindow.addDevToolsExtension(extensionFolder) // eslint-disable-line
+        fs.writeFileSync(
+          IDMapPath,
+          JSON.stringify(
+            Object.assign(IDMap, {
+              [chromeStoreID]: name
+            })
+          )
+        )
+        resolve(extensionFolder)
+      }
+    )
+  })
+}
+
+export default install

lib/installVueDevtools/index.js

@@ -0,0 +1,44 @@
+import electron, { remote } from 'electron'
+import fs from 'fs'
+import path from 'path'
+import https from 'https'
+
+export const getPath = () => {
+  const savePath = (remote || electron).app.getPath('userData')
+  return path.resolve(`${savePath}/extensions`)
+}
+
+// Use https.get fallback for Electron < 1.4.5
+const { net } = remote || electron
+const request = net ? net.request : https.get
+
+export const downloadFile = (from, to) =>
+  new Promise((resolve, reject) => {
+    const req = request(from)
+    req.on('response', res => {
+      // Shouldn't handle redirect with `electron.net`, this is for https.get fallback
+      if (
+        res.statusCode >= 300 &&
+        res.statusCode < 400 &&
+        res.headers.location
+      ) {
+        return downloadFile(res.headers.location, to)
+          .then(resolve)
+          .catch(reject)
+      }
+      res.pipe(fs.createWriteStream(to)).on('close', resolve)
+    })
+    req.on('error', reject)
+    req.end()
+  })
+
+export const changePermissions = (dir, mode) => {
+  const files = fs.readdirSync(dir)
+  files.forEach(file => {
+    const filePath = path.join(dir, file)
+    fs.chmodSync(filePath, parseInt(mode, 8))
+    if (fs.statSync(filePath).isDirectory()) {
+      changePermissions(filePath, mode)
+    }
+  })
+}

lib/installVueDevtools/utils.js

@@ -28,12 +28,14 @@
   "private": false,
   "dependencies": {
     "@vue/cli-service": "https://github.com/nklayman/vue-cli-plugin-electron-builder/raw/master/vue-cli-service-custom-1.tgz",
+    "electron": "^2.0.5",
     "electron-builder": "^20.24.4",
     "execa": "^0.10.0",
     "fs-extra": "^7.0.0",
     "lodash.merge": "^4.6.1",
     "spectron": "^3.8.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
+    "unzip-crx": "^0.2.0",
     "webpack": "^4.16.1",
     "webpack-chain": "^4.8.0",
     "webpack-target-electron-renderer": "^0.4.0"
@@ -46,7 +48,6 @@
     "@vue/cli-plugin-unit-jest": "^3.0.0-rc.5",
     "@vue/cli-test-utils": "^3.0.0-rc.5",
     "@vue/eslint-config-typescript": "^3.0.0-rc.5",
-    "electron": "^2.0.5",
     "eslint-config-standard": "^11.0.0",
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-node": "^7.0.1",

package.json

@@ -3397,6 +3397,10 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.3, core-js@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
 
+core-js@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.3.0.tgz#fab83fbb0b2d8dc85fa636c4b9d34c75420c6d65"
+
 [email protected], core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4349,6 +4353,10 @@ es6-promise@^4.0.3, es6-promise@^4.0.5, es6-promise@^4.1.0:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
 
+es6-promise@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.0.2.tgz#010d5858423a5f118979665f46486a95c6ee2bb6"
+
 es6-promisify@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
@@ -5865,6 +5873,10 @@ immediate@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.2.3.tgz#d140fa8f614659bd6541233097ddaac25cdd991c"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+
 import-global@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/import-global/-/import-global-0.1.0.tgz#97b38fd444114eec16824a935f8da575b57aa1ce"
@@ -6904,6 +6916,16 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jszip@^3.1.0:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.1.5.tgz#e3c2a6c6d706ac6e603314036d43cd40beefdf37"
+  dependencies:
+    core-js "~2.3.0"
+    es6-promise "~3.0.2"
+    lie "~3.1.0"
+    pako "~1.0.2"
+    readable-stream "~2.0.6"
+
 keygrip@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/keygrip/-/keygrip-1.0.2.tgz#ad3297c557069dea8bcfe7a4fa491b75c5ddeb91"
@@ -7102,6 +7124,12 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@~3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  dependencies:
+    immediate "~3.0.5"
+
 linkify-it@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
@@ -8379,7 +8407,7 @@ pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
 
-pako@~1.0.5:
+pako@~1.0.2, pako@~1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
 
@@ -8989,6 +9017,10 @@ private@^0.1.6, private@^0.1.8, private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
 
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
 process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
@@ -9306,6 +9338,17 @@ [email protected], readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
 readdirp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
@@ -10958,6 +11001,14 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+unzip-crx@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/unzip-crx/-/unzip-crx-0.2.0.tgz#4c0baa8bdac756256754beca7843c13d7b858c18"
+  dependencies:
+    jszip "^3.1.0"
+    mkdirp "^0.5.1"
+    yaku "^0.16.6"
+
 unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
@@ -11915,6 +11966,10 @@ y18n@^3.2.1:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
 
+yaku@^0.16.6:
+  version "0.16.7"
+  resolved "https://registry.yarnpkg.com/yaku/-/yaku-0.16.7.tgz#1d195c78aa9b5bf8479c895b9504fd4f0847984e"
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"