Question

在向我的电子浏览器窗口中添加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”，因为我正在使用React Addon做完全相同的事情/过程，而没有任何问题。我也不知道该怎么办。我的铬插件是否可能与电子不兼容？

Answer 1

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

手指交叉！

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

Answer 2

您似乎正在尝试添加常规的Chrome扩展程序而不是开发工具扩展程序。

import { Editor } from 'slate-react' import Plain from 'slate-plain-serializer' class App extends React.Component { state = { value: Plain.deserialize(this.props.richText), } onChange = ({ value }) => { this.setState({ value }) } render() { return <Editor value={this.state.value} onChange={this.onChange} /> } }方法用于常规的Chrome扩展程序：

BrowserWindow.addExtension(path)


BrowserWindow.addExtension(path)字符串


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

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

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

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

相反，app方法适用于Dev Tools扩展：

BrowserWindow.addDevToolsExtension(path)


BrowserWindow.addDevToolsExtension(path)字符串


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

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

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

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

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

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

app

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

虽然有一个已记录的method to register a normal extension，但在大多数情况下它不会做很多事情，因为Electron仅支持chrome.* API中的accessibility subset个（ Spectron and Devtron ）和stated a while ago以来，他们还没有任何计划全面支持Chrome扩展API。

如何在我的电子应用程序中添加自定义Chrome扩展程序？

4 个答案: