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

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)

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'


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