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

【问题标题】：How can I add a custom chrome extension to my Electron app?如何向我的 Electron 应用程序添加自定义 chrome 扩展？
【发布时间】：2019-04-19 20:03:01
【问题描述】：

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

在创建我的窗口之前（以及在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)

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

【问题讨论】：

您是想添加一个标准扩展（例如 React devtools）还是您自己创建的？
@MTCoster 这是我们公司为了在我们的平台上启用屏幕共享而创建的。
根据文档，您似乎必须为不同的操作系统指定不同的 URL。这是在哪个操作系统上使用/开发的？
@user3864563 我们正在 Ubuntu 上开发/测试它。必须为每个操作系统指定不同的 URL ？我在文档中找不到这个
更新，这里有更多支持：github.com/electron/electron/blob/master/docs/api/extensions.md

标签： javascript google-chrome-extension electron add-on

【解决方案1】：

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

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)

【讨论】：

我确实应该使用 .addExtension，因为我正在尝试添加常规的 chrome 扩展，但它仍然无法正常工作。我仍然遇到相同的错误“使用无效 URL 跳过扩展名：chrome-extension://extension-name”。我在准备好的事件之后添加了点击扩展，这样就不会出错
我尝试了其他扩展，例如语法，但我遇到了完全相同的问题。 Here 是我要导入的那个，我认为它可能与扩展无关，而与我尝试导入它的方式有关。编辑：我可能在集成 chrome 扩展的方式上做错了。现在我从 .config/Chromium/Default/Extensions 中的 Extensions 文件夹中取出它并将其粘贴到我的项目中。这不是你应该怎么做的吗？
遇到同样的事情 - 有人找到答案了吗？
同样的问题，有帮助吗？
自 2021 年 5 月 1 日起已弃用：electronjs.org/docs/api/…

【解决方案2】：

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

手指交叉！

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

【讨论】：

【解决方案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/sentialx/electron-extensions

【讨论】：

【解决方案4】：

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

【讨论】：