如何向我的 Electron 应用程序添加自定义 chrome 扩展？

Question

我在将 chrome 插件添加到我的 Electron BrowserWindow 时遇到了一些问题。

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

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

我遵循了这个 Electron guide，并且它适用于他们的示例（添加反应开发工具）。当我用我自己的 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)

我真的不明白为什么指定的错误是 "invalid URL"，因为我正在使用反应插件做完全相同的事情/过程而没有问题。我也不知道该怎么办。有没有可能是我的 chrome 插件不兼容 Electron？

Answer 1

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

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

BrowserWindow.addExtension(path)

path String

Adds Chrome extension located at path, and returns extension's name.

The method will also not return if the extension's manifest is missing or incomplete.

Note: This API cannot be called before the ready event of the app module is emitted.

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

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

BrowserWindow.addDevToolsExtension(path)

path String

Adds DevTools extension located at path, and returns extension's name.

The extension will be remembered so you only need to call this API once, this API is not for programming use. If you try to add an extension that has already been loaded, this method will not return and instead log a warning to the console.

The method will also not return if the extension's manifest is missing or incomplete.

Note: This API cannot be called before the ready event of the app module is emitted.

^{- 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

虽然有文档记录 method to register a normal extension, in majority of cases it won't do much, as Electron supports only an accessibility subset of the chrome.* APIs (apparently only the stuff required by Spectron and Devtron) and as they've stated a while ago，但他们没有任何全面支持 Chrome 扩展 API 的计划。

Answer 3

支持 Electron 中的 Chromium 扩展 is actively being worked on at the moment. The support isn't complete yet, but the GitHub issue 似乎已发布定期更新。

双手合十！

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

Answer 4

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

如何向我的 Electron 应用程序添加自定义 chrome 扩展？

How can I add a custom chrome extension to my Electron app?

javascript

google-chrome-extension

electron

add-on