vue devtools integrated in chromium devtools

.gitignore

@@ -1,6 +1,8 @@
 .DS_Store
 dist
 build
+misc/*
+!misc/.gitkeep
 node_modules
 thumbs.db
 NOTES.md

.vscode/launch.json

@@ -28,7 +28,7 @@
       "sourceMaps": true,
       "type": "node",
       "timeout": 1000000
-    },
+    }
   ],
   "compounds": [
       {

package.json

@@ -8,7 +8,6 @@
   "scripts": {
     "debug": "npm run rebuild:electron && npm run debug-runner",
     "debug-runner": "node scripts/devRunner.js --remote-debug",
-    "devtools": "npx vue-devtools",
     "compile": "npm run compile:main && npm run compile:workers && npm run compile:renderer",
     "compile:main": "webpack --mode=production --config webpack.main.config.js",
     "compile:workers": "webpack --mode=production --config webpack.workers.config.js",
@@ -19,7 +18,8 @@
     "rebuild:electron": "rimraf ./dist &&  npm run postinstall",
     "release": "standard-version",
     "release:pre": "npm run release -- --prerelease alpha",
-    "postinstall": "electron-builder install-app-deps",
+    "devtools:install": "node scripts/devtoolsInstaller",
+    "postinstall": "electron-builder install-app-deps && npm run devtools:install",
     "test": "npm run compile && npm run test:dry",
     "test:dry": "xvfb-maybe -- playwright test",
     "lint": "eslint . --ext .js,.vue && stylelint \"./src/**/*.{css,scss,sass,vue}\"",
@@ -29,6 +29,9 @@
   },
   "author": "Fabio Di Stasio <fabio286@gmail.com>",
   "main": "./dist/main.js",
+  "antares": {
+    "devtoolsId": "nhdogjmejiglipccpnnnanhbledajbpd"
+  },
   "build": {
     "appId": "com.fabio286.antares",
     "artifactName": "${productName}-${version}-${os}_${arch}.${ext}",
@@ -148,7 +151,6 @@
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "@vue/compiler-sfc": "^3.2.33",
-    "@vue/devtools": "^6.1.4",
     "all-contributors-cli": "^6.20.0",
     "babel-loader": "^8.2.3",
     "chalk": "^4.1.2",
@@ -180,6 +182,7 @@
     "tree-kill": "^1.2.2",
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.3",
+    "unzip-crx-3": "^0.2.0",
     "vue-eslint-parser": "^8.3.0",
     "vue-loader": "^16.8.3",
     "webpack": "^5.60.0",

scripts/devtoolsInstaller.js

@@ -0,0 +1,47 @@
+// @ts-check
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const unzip = require('unzip-crx-3');
+const { antares } = require('../package.json');
+
+const extensionID = antares.devtoolsId;
+const destFolder = path.resolve(__dirname, `../misc/${extensionID}`);
+const filePath = path.resolve(__dirname, `${destFolder}${extensionID}.crx`);
+const fileUrl = `https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3D${extensionID}%26uc&prodversion=32`;
+const fileStream = fs.createWriteStream(filePath);
+
+const downloadFile = url => {
+   return new Promise((resolve, reject) => {
+      const request = https.get(url);
+
+      request.on('response', response => {
+         if (response.statusCode && response.statusCode >= 300 && response.statusCode < 400 && response.headers.location) {
+            return downloadFile(response.headers.location)
+               .then(resolve)
+               .catch(reject);
+         }
+
+         response.pipe(fileStream);
+
+         response.on('close', () => {
+            console.log('Devtools download completed!');
+            resolve();
+         });
+         response.on('error', reject);
+      });
+      request.on('error', reject);
+      request.end();
+   });
+};
+
+(async () => {
+   try {
+      await downloadFile(fileUrl);
+      await unzip(filePath, destFolder);
+      fs.unlinkSync(filePath);
+   }
+   catch (error) {
+      console.log(error);
+   }
+})();

src/main/main.ts

@@ -106,6 +106,14 @@ else {
          mainWindow.webContents.send('unhandled-exception', error);
       });
    });
+
+   app.on('browser-window-created', (event, window) => {
+      if (isDevelopment) {
+         const { antares } = require('../../package.json');
+         const extensionPath = path.resolve(__dirname, `../../misc/${antares.devtoolsId}`);
+         window.webContents.session.loadExtension(extensionPath, { allowFileAccess: true }).catch(console.error);
+      }
+   });
 }
 
 function createAppMenu () {

src/renderer/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-import devtools from '@vue/devtools';
 import { createApp, configureCompat } from 'vue';
 import '@mdi/font/css/materialdesignicons.css';
 import 'leaflet/dist/leaflet.css';
@@ -23,6 +22,3 @@ createApp(App)
    .use(pinia)
    .use(i18n)
    .mount('#app');
-
-if (process.env.NODE_ENV === 'development')
-   devtools.connect();