Electron Chrome Extension

Environment

Tested with Electron v4.0.4 - Node v8.9.0 - NPM v5.5.1

Setup

Renderer - preload

require('electron-chrome-extension/preload');

For some reasons the navigator user agent is not inherited from the session so you will need to redefine the user agent via the Object.defineProperty method after the import

Main

import ECx from 'electron-chrome-extension';

app.on('ready', async () => {
  createWindow();

  // Load Grammarly
  await ECx.load('kbfnbcaeplbcioakkpcpgfkobkghlhen');
});

Connect your application logic

Extensions react to browser events for trigger their own logic. ECx send inner webContents events to extensions subscribers but external events like creating new window, changing tab focus etc should be triggered on your side like this:

// main.js

ipcMain.on('YOUR_EVENT', (...) =>
  ECx.sendEvent({
    channel: 'tabs.onActivated',
    payload: [{ tabId, windowId }],
  })
);

Usage with DevTools extension

⚠️ electron-chrome-extension will break Electron's support for Devtools extensions.

If you wish to use devtools extensions, make sure to add the prelaod on the Session itself:

if (isDev) {
  app.on('session-created', session => {
    session.setPreloads([path.join(__dirname, 'node_modules/electron-chrome-extension/preload')]
  });
}

It is not recommended to have the preload added to Sessions outside developement environnement because it can lead to have extension's code run in priviledged contexts (BrowserWindows with nodeIntegration for instance).

Then install Chrome DevTools extensions with electron-chrome-extension:

import ECx from 'electron-chrome-extension';
// load React Dev Tools
ECx.load('jdkknkkbebbapilgoeccciglkfbmbnfm');

ECx APIs

ECx.load(extensionId: IExtension['id']): Promise<IExtension>
ECx.unload(extensionId: IExtension['id']): void
ECx.setConfiguration(configuration: Configuration = {}): Promise<ECx>
ECx.isLoaded(extensionId: IExtension['id']): boolean
ECx.isUpToDate(extensionId: IExtension['id']): Promise<boolean>
ECx.get(extensionId: IExtension['id']): Promise<IExtension>
ECx.sendEvent(event: ExtensionEventMessage): void

Tools

Start Playground

$ npm start

You can tweak the playground files at your convenience and extensions would automatically downloaded and clean app data with $ npm run playground:reset

Test

$ npm test

We use electron-mocha for run our test suit. Warning (because not explained in the lib): test assertions lives in the renderer, the main remains accessible for IPC calls and Electron Main API calls.

Publish

$ npm publish

References

Know supported extensions

as of 05/29/19 with their Chrome WebStore ID

Mixmax: ocpljaamllnldhepankaeljmeeeghnid
Gmelius: dheionainndbbpoacpnopgmnihkcmnkl
Mailtracker: pgbdljpkijehgoacbjpolaomhkoffhnl
Boomerang: mdanidgdpmkimeiiojknlnekblgmpdll
Clearbit Connect: pmnhcgfcafcnkbengdcanjablaabjplo
Grammarly: kbfnbcaeplbcioakkpcpgfkobkghlhen
React Developers Tools: fmkadmapgofadopljbjfkapdkoienihi
Redux DevTools: lmhkpmbekcpmknklioeibfkpmmfibljd
Apollo Client Developer Tools: jdkknkkbebbapilgoeccciglkfbmbnfm

getstation/electron-chrome-extension