Electron 加载 Chrome 开发插件

igaozp commented 6 years ago

在 Electron 的开发过程中可以使用专门为 Chrome 开发的扩展插件，这样可以极大的提高页面 Debug 的效率。接下来看一下如何在 Electron 中使用这些扩展插件。

下载扩展插件

要想使用这些插件，首先要在自己的 Chrome 浏览器中安装这些插件，然后在 Chrome 的扩展程序页面 chrome://extensions 下找到刚下载的扩展，每一个扩展都以一个专属的 ID ，记住这个扩展的 ID。

查找扩展路径

接下来需要找到扩展的在本地磁盘的路径:

在 Windows 下 Chrome 扩展的路径一般为 C:\Users\username\AppData\Local\Google\Chrome\User Data\Default\Extensions\ 或者 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions
在 Linux 下为 ~/.config/google-chrome/Default/Extensions/
在 macOS 下为 ~/Library/Application Support/Google/Chrome/Default/Extensions

具体的路径可能在不同的系统和软件版本之间有差异，可以自行搜索。然后在目录下找到刚才的 ID 值一样的文件夹，这个文件夹就是扩展的安装路径。

加载扩展

在 Electron 中使用 BrowserWindow.addDevToolsExtension(devToolsUrl) 来加载扩展，devToolsUrl为扩展的安装路径。例如加载 Windows 中的 Chrome 扩展 :

const devToolsUrl = 'C:\\Users\\username\\AppData\\Local\\CentBrowser\\User Data\\Default\\Extensions\\nhdogjmejiglipccpnnnanhbledajbpd\\3.1.2_0'

function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  win.webContents.openDevTools()
  // 加载扩展
  BrowserWindow.addDevToolsExtension(devToolsUrl)

  win.on('closed', () => {
    win = null
  })
}

这样就可以在 Electron 的开发工具中使用 Chrome 的扩展。

其他

现在 Electron 官方只支持部分 Chrome 扩展，具体信息可以查看此链接。

liqiujiong commented 1 year ago

加载不了 (node:10228) UnhandledPromiseRejectionWarning: TypeError: require$$0$5.BrowserWindow.addDevToolsExtension is not a function at createWindow (E:\Code\my-electron-app\out\main\index.js:14642:30) at E:\Code\my-electron-app\out\main\index.js:14774:3 (Useelectron --trace-warnings ...to show where the warning was created)

igaozp commented 1 year ago

加载不了 (node:10228) UnhandledPromiseRejectionWarning: TypeError: require$$0$5.BrowserWindow.addDevToolsExtension is not a function at createWindow (E:\Code\my-electron-app\out\main\index.js:14642:30) at E:\Code\my-electron-app\out\main\index.js:14774:3 (Useelectron --trace-warnings ...to show where the warning was created)

新版的 electron 应该API发生了变动，可以参考下最新的写法 https://www.electronjs.org/zh/docs/latest/api/extensions https://juejin.cn/post/6976047817139683364

igaozp / notes