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

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

While there is a documented 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, they don't have any plans to support Chrome extension APIs at a full scale.