Electron加载扩展

Edge扩展

Edge的扩展位置为

C:\Users\你的用户名\AppData\Local\Microsoft\Edge\User Data\Default\Extensions

我们可以看到这样的文件夹

image-20220510165407774

Edge中输入

1
edge://extensions/

进入扩展页面

在浏览器中找到所需扩展的ID

image-20220510164737155

我这里需要的是kmpfgkgaimakokfhgdahhiaaiidiphco

项目根目录添加文件夹extensions

把我们所需的扩展添加进来

Electron加载扩展

注意

并不是所有扩展都支持,主要是支持 DevTools 扩展和Chromium-internal 扩展。

Electron9及以上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const { app, session } = require('electron')
const path = require('path')

app.on('ready', async () => {
let extension_path = path.join(
process.cwd(),
"extensions",
"kmpfgkgaimakokfhgdahhiaaiidiphco",
"2.3.0_0"
);
await session.defaultSession.loadExtension(
extension_path,
// 打开本地文件也应用拓展
{allowFileAccess: true}
)
})

Electron9以下

1
2
3
4
5
6
7
8
9
const path = require('path')

let extension_path = path.join(
process.cwd(),
"extensions",
"kmpfgkgaimakokfhgdahhiaaiidiphco",
"2.3.0_0"
);
BrowserWindow.addDevToolsExtension(extension_path)

注意

不支持打包后的扩展(如.crx文件)

运行时会报好多警告,不影响插件加载。

打包可用

为了保证开发时打包后扩展均可用

  1. main.js中扩展根目录路径使用process.cwd()获取
  2. package.jsonextraFiles中添加扩展文件夹
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"build": {
"files": [
"main.js",
"*.html",
"images/**/*",
"app.ico",
"node_modules/**/*"
],
"extraFiles": [
"./extensions"
],
},
}

不要把扩展的路径只写在files下,否则打包后不可用。

校验扩展是否生效

我们可以访问

https://www.psvmc.cn/login.json

加载扩展前是这样的

image-20220510164958827

加载后是这样的

image-20220510165054545