为electron添加Chrome扩展程序

官方文档

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

• • 1.加载 DevTools 扩展程序
  • • 1.1.下面以[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)为例：
    • **注意问题：**
    • • 1.1.1.只有在app模块的ready事件触发之后，才可以调用`BrowserWindow.addDevToolsExtension` API
      • 1.1.2.路径
    • 1.2.可以翻墙的情况下，配置就是相当简单了
  • 2.移除 DevTools 扩展程序

1.加载 DevTools 扩展程序

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

1.1.下面以React Developer Tools为例：

1. 在 Chrome 中安装React Developer Tools 。

2. 打开chrome://extensions，找到扩展程序的ID，形如fmkadmapgofadopljbjfkapdkoienihi的hash字符串。

3. 找到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。

4. 将扩展的位置传递到 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.

标签：Default,Chrome,扩展,addDevToolsExtension,BrowserWindow,electron,添加,Extensions
来源： https://blog.csdn.net/sinat_42338962/article/details/110529981