修复开发模式下 vue devtools 扩展没有加载的问题

package-lock.json

@@ -61,7 +61,7 @@
         "electron": "^29.4.2",
         "electron-builder": "^24.13.3",
         "electron-debug": "^3.2.0",
-        "electron-devtools-installer": "^3.2.0",
+        "electron-devtools-installer": "github:lyswhut/electron-devtools-installer#64596d615c1fc891eefd8aef1dfcb2c87aaadf03",
         "electron-to-chromium": "^1.4.805",
         "electron-updater": "^6.2.1",
         "eslint": "^8.57.0",
@@ -7010,14 +7010,14 @@
       }
     },
     "node_modules/electron-devtools-installer": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/electron-devtools-installer/-/electron-devtools-installer-3.2.0.tgz",
-      "integrity": "sha512-t3UczsYugm4OAbqvdImMCImIMVdFzJAHgbwHpkl5jmfu1izVgUcP/mnrPqJIpEeCK1uZGpt+yHgWEN+9EwoYhQ==",
+      "version": "0.0.0-development",
+      "resolved": "git+ssh://git@github.com/lyswhut/electron-devtools-installer.git#64596d615c1fc891eefd8aef1dfcb2c87aaadf03",
+      "integrity": "sha512-25Gh77PphZy8LIe1uKsrwlcOiEHZRmBHX5brmTO0HvYxEPJcRiAAIP2uRJxsnQ7mHm1AbNxB0NFl6j8VH+4koA==",
       "dev": true,
       "dependencies": {
         "rimraf": "^3.0.2",
-        "semver": "^7.2.1",
-        "tslib": "^2.1.0",
+        "semver": "^7.6.2",
+        "tslib": "^2.6.3",
         "unzip-crx-3": "^0.2.0"
       }
     },
@@ -16216,9 +16216,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
       "dev": true
     },
     "node_modules/tunnel": {

package.json

@@ -136,7 +136,7 @@
     "electron": "^29.4.2",
     "electron-builder": "^24.13.3",
     "electron-debug": "^3.2.0",
-    "electron-devtools-installer": "^3.2.0",
+    "electron-devtools-installer": "github:lyswhut/electron-devtools-installer#64596d615c1fc891eefd8aef1dfcb2c87aaadf03",
     "electron-to-chromium": "^1.4.805",
     "electron-updater": "^6.2.1",
     "eslint": "^8.57.0",

src/main/app.ts

@@ -18,6 +18,53 @@ export const initGlobalData = () => {
     cmdParams: envParams.cmdParams,
     deeplink: envParams.deeplink,
   }
+  global.lx = {
+    inited: false,
+    isSkipTrayQuit: false,
+    // mainWindowClosed: true,
+    event_app: createAppEvent(),
+    event_list: createListEvent(),
+    event_dislike: createDislikeEvent(),
+    appSetting: defaultSetting,
+    worker: createWorkers(),
+    hotKey: {
+      enable: true,
+      config: {
+        local: {
+          enable: false,
+          keys: {},
+        },
+        global: {
+          enable: false,
+          keys: {},
+        },
+      },
+      state: new Map(),
+    },
+    theme: {
+      shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+      theme: {
+        id: '',
+        name: '',
+        isDark: false,
+        colors: {},
+      },
+    },
+    player_status: {
+      status: 'stoped',
+      name: '',
+      singer: '',
+      albumName: '',
+      picUrl: '',
+      progress: 0,
+      duration: 0,
+      playbackRate: 1,
+      lyricLineText: '',
+      lyricLineAllText: '',
+      lyric: '',
+      collect: false,
+    },
+  }
 
   global.staticPath =
     process.env.NODE_ENV !== 'production'
@@ -209,48 +256,11 @@ const initTheme = () => {
 
 let isInitialized = false
 export const initAppSetting = async() => {
-  if (!global.lx) {
+  if (!global.lx.inited) {
     const config = await initHotKey()
-    global.lx = {
-      isSkipTrayQuit: false,
-      // mainWindowClosed: true,
-      event_app: createAppEvent(),
-      event_list: createListEvent(),
-      event_dislike: createDislikeEvent(),
-      appSetting: defaultSetting,
-      worker: createWorkers(),
-      hotKey: {
-        enable: true,
-        config: {
-          local: config.local,
-          global: config.global,
-        },
-        state: new Map(),
-      },
-      theme: {
-        shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
-        theme: {
-          id: '',
-          name: '',
-          isDark: false,
-          colors: {},
-        },
-      },
-      player_status: {
-        status: 'stoped',
-        name: '',
-        singer: '',
-        albumName: '',
-        picUrl: '',
-        progress: 0,
-        duration: 0,
-        playbackRate: 1,
-        lyricLineText: '',
-        lyricLineAllText: '',
-        lyric: '',
-        collect: false,
-      },
-    }
+    global.lx.hotKey.config.local = config.local
+    global.lx.hotKey.config.global = config.global
+    global.lx.inited = true
   }
 
   if (!isInitialized) {

src/main/event/AppEvent.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from 'events'
 
 import { saveAppHotKeyConfig, updateSetting } from '@main/utils'
+import type { BrowserWindow } from 'electron'
 
 export class Event extends EventEmitter {
   // closeAll() {
@@ -69,6 +70,10 @@ export class Event extends EventEmitter {
     this.emit('hot_key_config_update', config)
   }
 
+  main_window_created(win: BrowserWindow) {
+    this.emit('main_window_created', win)
+  }
+
   main_window_ready_to_show() {
     this.emit('main_window_ready_to_show')
   }
@@ -100,6 +105,10 @@ export class Event extends EventEmitter {
   main_window_fullscreen(isFullscreen: boolean) {
     this.emit('main_window_fullscreen', isFullscreen)
   }
+
+  desktop_lyric_window_created(win: BrowserWindow) {
+    this.emit('desktop_lyric_window_created', win)
+  }
 }
 
 

src/main/index-dev.ts

@@ -8,20 +8,34 @@
 import { app } from 'electron'
 import electronDebug from 'electron-debug'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+import { openDevTools } from './utils'
 // Install `electron-debug` with `devtron`
 electronDebug({
-  showDevTools: true,
+  showDevTools: false,
   devToolsMode: 'undocked',
 })
 
 // Install `vue-devtools`
 app.on('ready', () => {
-  installExtension(VUEJS_DEVTOOLS)
+  global.lx.event_app.on('main_window_created', (win) => {
+    openDevTools(win.webContents)
+    installExtension(VUEJS_DEVTOOLS, { session: win.webContents.session })
       .then((name: string) => {
-      console.log(`Added Extension:  ${name}`)
+        console.log(`[main window] Added Extension:  ${name}`)
       })
       .catch((err: Error) => {
-      console.log('An error occurred: ', err)
+        console.log('[main window] An error occurred: ', err)
+      })
+  })
+  global.lx.event_app.on('desktop_lyric_window_created', (win) => {
+    openDevTools(win.webContents)
+    installExtension(VUEJS_DEVTOOLS, { session: win.webContents.session })
+      .then((name: string) => {
+        console.log(`[lyric window] Added Extension:  ${name}`)
+      })
+      .catch((err: Error) => {
+        console.log('[lyric window] An error occurred: ', err)
+      })
   })
 })
 

src/main/modules/winLyric/main.ts

@@ -145,6 +145,7 @@ export const createWindow = () => {
 
   winEvent()
   // browserWindow.webContents.openDevTools()
+  global.lx.event_app.desktop_lyric_window_created(browserWindow)
 }
 export const isExistWindow = (): boolean => !!browserWindow
 

src/main/modules/winMain/main.ts

@@ -117,6 +117,7 @@ export const createWindow = () => {
 
   // global.lx.mainWindowClosed = false
   // browserWindow.webContents.openDevTools()
+  global.lx.event_app.main_window_created(browserWindow)
 }
 
 export const isExistWindow = (): boolean => !!browserWindow

src/main/types/app.d.ts

@@ -5,6 +5,7 @@ import { type DislikeType, type AppType, type ListType } from '@main/event'
 import { type DBSeriveTypes } from '@main/worker/utils'
 
 interface Lx {
+  inited: boolean
   appSetting: LX.AppSetting
   hotKey: {
     enable: boolean