如何在Electron应用程序中添加自定义chrome扩展程序？

Question

我在将我的Electron BrowserWindow中添加chrome插件时遇到了一些麻烦。

在创建我的窗口之前（以及在ready事件被触发之后），我尝试添加一个devtools扩展，我的浏览器需要进行屏幕共享。

BrowserWindow.addDevToolsExtension('/home/USER/.config/chromium/Default/Extensions/dkjdkjlcilokfaigbckcipicchgoazeg/1.5_0');

我跟着这个Electron guide，它适用于他们的例子（添加react开发工具）。当我使用自己的chrome扩展执行完全相同的操作时出现此错误：

[4735:1116/163422.268391:ERROR:CONSOLE(7701)] "Skipping extension with invalid URL: chrome-extension://extension-name", source: chrome-devtools://devtools/bundled/shell.js (7701)

我真的不明白为什么指定的错误是“无效的URL”，因为我正在做反应插件完全相同的事情/过程没有问题。我也不知道该怎么做。我的镀铬插件是否可能与电子兼容？

Answer 1

您似乎正在尝试添加常规Chrome扩展程序而不是Dev Tools扩展程序。

BrowserWindow.addExtension(path)方法适用于常规Chrome扩展程序：

BrowserWindow.addExtension(path)

• path字符串

添加位于path的Chrome扩展程序，并返回扩展程序的名称。

如果扩展名的清单缺失或不完整，该方法也不会返回。

注意：在发出ready模块的app事件之前，无法调用此API。

- https://electronjs.org/docs/api/browser-window#browserwindowaddextensionpath

相反，BrowserWindow.addDevToolsExtension(path)方法适用于Dev Tools扩展：

BrowserWindow.addDevToolsExtension(path)

• path字符串

添加位于path的DevTools扩展，并返回扩展名。

扩展名将被记住，因此您只需要调用此API一次，此API不用于编程。如果您尝试添加已加载的扩展，则此方法不会返回，而是向控制台记录警告。

如果扩展名的清单缺失或不完整，该方法也不会返回。

注意：在发出ready模块的app事件之前，无法调用此API。

- https://electronjs.org/docs/api/browser-window#browserwindowadddevtoolsextensionpath

请注意，在这两种情况下，您都需要等待ready模块发出的app事件：

const { BrowserWindow, app } = require('electron')

let mainWindow = null

function main() {
  BrowserWindow.addExtension('/path/to/extension')
  mainWindow = new BrowserWindow()
  mainWindow.loadURL('https://google.com')
  mainWindow.on('close', event => {
    mainWindow = null
  })
}

app.on('ready', main)

Answer 2

虽然有记录的method to register a normal extension，但在大多数情况下它不会做太多，因为Electron只支持accessibility subset的chrome.*（显然只有Spectron and Devtron所需的东西），因为他们有stated a while ago，他们没有任何计划全面支持Chrome扩展API。

Answer 3

目前支持Electron is actively being worked on中的Chromium扩展。支持尚未完成，但GitHub issue似乎定期发布更新。

手指交叉！

'just enough extensions [api] to load a simple ... extension'正在打开当前拉动请求