如何在我的Electron应用程序中添加自定义铬扩展

Question

我在向电子浏览器窗口添加chrome插件时遇到了一些问题。

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

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

我遵循了这个Electron指南，它为他们的例子起到了作用(添加了反应开发工具(。当我用我自己的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"，因为我正在用react插件做完全相同的事情/过程，没有问题。我也不知道该怎么办。我的chrome插件可能与Electron不兼容吗？

Answer 1

看起来您正在尝试添加一个常规的Chrome扩展，而不是开发工具扩展。

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

BrowserWindow.addExtension(path)

• path字符串

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

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

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

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

相反，BrowserWindow.addDevToolsExtension(path)方法适用于开发工具扩展：

BrowserWindow.addDevToolsExtension(path)

• path字符串

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

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

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

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

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

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

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

目前正在积极研究对Electron中Chromium扩展的支持。支持尚未完成，但GitHub问题似乎有定期更新。

祝你好运！

当前的拉取请求是为"刚好足够的扩展[api]加载一个简单的…"打开的。。。扩展

Answer 3

Electron 9对扩展有更多的支持！

要加载它们，请使用session.loadExtension：https://github.com/electron/electron/blob/master/docs/api/extensions.md

const { app, BrowserWindow, session } = require('electron')
// ... in your createWindow function, which is called after app.whenReady
const mainWindow = new BrowserWindow({...})
const ext = await session.defaultSession.loadExtension('/path/to/unpacked/chrome-ext')
console.log('ext', ext)
// outputs config file
// {
//   id: 'dcpdbjjnmhhlnlbibpeeiambicbbndim',
//   name: 'Up! – Free Social Bot',
//   path: '/Users/caffeinum/Development/GramUp/chrome-ext',
//   url: 'chrome-extension://dcpdbjjnmhhlnlbibpeeiambicbbndim/',
//   version: '1.7.0',
//   manifest: { ... }
// }

阅读更多：https://github.com/electron/electron/blob/master/docs/api/extensions.md

此外，还有另一个项目可以帮助您做到这一点，它还添加了其他功能：https://github.com/sentialx/electron-extensions

Answer 4

虽然有一种记录在案的注册正常扩展的方法，但在大多数情况下，它不会有太大作用，因为Electron只支持chrome.*API的可访问性子集(显然只是Spectron和Devtron所需的东西(，而且正如他们不久前所说，他们没有任何计划全面支持Chrome扩展API。