为electron添加Chrome扩展程序

逃离我推掉我的手 2022-12-26 04:50 1179阅读 0赞

[官方文档][Link 1]

Electron支持[Chrome DevTools 扩展程序][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')
        
        
        复制

**成功：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_16_color_FFFFFF_t_70]

### **注意问题：** ###

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

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

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

#### 1.1.2.路径 ####

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hAEyLvIp-1606975672957)(C:\\Users\\Administrator\\Desktop\\每日\\assets\\1606974584634.png)\]][img-hAEyLvIp-1606975672957_C_Users_Administrator_Desktop_assets_1606974584634.png]

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

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

文件夹下是这个样子：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_16_color_FFFFFF_t_70 1][]

找到对应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.

[Link 1]: https://www.electronjs.org/docs/tutorial/devtools-extension
[Chrome DevTools]: https://developer.chrome.com/extensions/devtools
[React Developer Tools]: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_16_color_FFFFFF_t_70]: /images/20221120/cc71c99228294db2919da3d2de491050.png
[img-hAEyLvIp-1606975672957_C_Users_Administrator_Desktop_assets_1606974584634.png]: /images/20221120/50169214bba14a46a0190bcc34650d33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_16_color_FFFFFF_t_70 1]: /images/20221120/119a961308384e81867413cd84c81e0b.png