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

Question

I am facing some trouble adding chrome addons into my Electron BrowserWindow.

Before creating my window (and after the ready event has fired), I try to add a devtools extension that my browser needs to do screen sharing.

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

I followed this Electron guide , and it worked for their example (adding the react develop tool). When I do the exact same thing with my own chrome extension I have this error:

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

I don't really get why the error specified is "invalid URL" since I'm doing the exact same thing / process with the react addon without a problem. I also have no idea what to do. Is it possible that my chrome addon is not Electron-compatible?

Answer 1

It looks like you're trying to add a regular Chrome extension instead of a Dev Tools extension.

The BrowserWindow.addExtension(path) method is for regular Chrome extensions:

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}

Conversely, the BrowserWindow.addDevToolsExtension(path) method is for Dev Tools extensions:

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}

Note that in both cases you need to wait for the ready event from the app module to be emitted:

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

Support for Chromium extensions in Electron is actively being worked on at the moment. The support isn't complete yet, but the GitHub issue seems to have regular updates being posted.

Fingers crossed!

A current pull request is open for 'just enough extensions [api] to load a simple ... extension'

Answer 3

Electron 9 has much more support for extensions!

To load them, use 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: { ... }
// }

Read more: https://github.com/electron/electron/blob/master/docs/api/extensions.md

Also, there's another project that helps you do that, also adds additional functionality: https://github.com/sentialx/electron-extensions

Answer 4

虽然有记录的方法来注册一个普通的扩展，但在大多数情况下它不会做太多，因为 Electron 只支持chrome.* API 的一个可访问子集（显然只有Spectron 和 Devtron需要的东西）并且因为它们前阵子说过，他们没有任何计划全面支持 Chrome 扩展 API。