为electron添加Chrome扩展程序

2022-12-20 07:29:26

Electron支持Chrome DevTools 扩展程序，可增强开发工具调试流行web框架的能力

1.加载 DevTools 扩展程序

为了在Electron中加载一个扩展程序，你需要在Chrome浏览器中下载它，找到它在系统目录中位置，然后调用BrowserWindow.addDevToolsExtension(extension)API 加载它

1.1.下面以React Developer Tools为例：

在 Chrome 中安装React Developer Tools 。
打开chrome://extensions，找到扩展程序的ID，形如fmkadmapgofadopljbjfkapdkoienihi的hash字符串。
找到Chrome 扩展程序的存放目录：
- 在Ｗindows 下为 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;
- 在 Linux下为：
  - ~/.config/google-chrome/Default/Extensions/
  - ~/.config/google-chrome-beta/Default/Extensions/
  - ~/.config/google-chrome-canary/Default/Extensions/
  - ~/.config/chromium/Default/Extensions/
- 在 macOS下为~/Library/Application Support/Google/Chrome/Default/Extensions。

将扩展的位置传递到 BrowserWindow.addDevToolsExtension API，用于React开发者工具，这样做很好：

const path = require('path')
const os = require('os')

BrowserWindow.addDevToolsExtension(
   path.join(os.homedir(), '/Library/Application support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.3.0_0')


复制

成功：

注意问题：

1.1.1.只有在app模块的ready事件触发之后，才可以调用`BrowserWindow.addDevToolsExtension` API

这个扩展将被记住，所以你只需要在扩展中调用此 API 一次。如果您试图添加一个已加载的扩展，这个方法不会返回，而是将警告记录到控制台。

所以说BrowserWindow.addDevToolsExtension的位置因该放在createWindow里边

1.1.2.路径

Chrome为每一个扩展程序生成了一个唯一id

要去devtools在电脑中的安装位置找到对应的id文件夹

我的路径：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\

文件夹下是这个样子：

找到对应ID的文件夹后点进去然后把带有版本号的那个文件夹整个路径放到BrowserWindow.addDevToolsExtension就可以了

1.2.可以*的情况下，配置就是相当简单了

// 引入插件
import installExtension, {
  REACT_DEVELOPER_TOOLS,
  REDUX_DEVTOOLS
} from 'electron-devtools-installer'

// 安装
app.on('ready', createWindow)
  .whenReady()
  .then(() => {
    if (isDevelopment) {
      installExtension(REACT_DEVELOPER_TOOLS)
        .then((name) => console.log(`Added Extension:  ${name}`))
        .catch((err) => console.log('An error occurred: ', err))
      installExtension(REDUX_DEVTOOLS)
        .then((name) => console.log(`Added Extension:  ${name}`))
        .catch((err) => console.log('An error occurred: ', err))
    }
  })

2.移除 DevTools 扩展程序

You can pass the name of the extension to the BrowserWindow.removeDevToolsExtension API to remove it. The name of the extension is returned by BrowserWindow.addDevToolsExtension and you can get the names of all installed DevTools Extensions using the BrowserWindow.getDevToolsExtensions API.

码农公寓