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)