@tomjs/electron-devtools-installer

English | 中文

Install Chrome extension for Electron, support cjs/esm.

This library is based on Samuel Attard's electron-devtools-installer and JonLuca De Caro's electron-extension-installer, with some modifications and added small features. It provides support for esm and cjs to support for Electron v28+.

For Chrome DevTools installation, please visit the Official Documentation.

Features

• Support cjs/esm
• Support Electron v28+ to use esm

Install

# pnpm
pnpm add @tomjs/electron-devtools-installer

# yarn
yarn add @tomjs/electron-devtools-installer

# npm
npm add @tomjs/electron-devtools-installer

Usage

• esm

import { app } from 'electron';
import { installExtension, VUEJS_DEVTOOLS } from '@tomjs/electron-devtools-installer';

// Install Vue.js DevTools
app.whenReady().then(() => {
  installExtension(VUEJS_DEVTOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
    .then(ext => console.log(`Added Extension:  ${ext.name}`))
    .catch(err => console.log('An error occurred: ', err));
});

• cjs

const { app } = require('electron');
const { installExtension, VUEJS_DEVTOOLS } = require('@tomjs/electron-devtools-installer');

// Install Vue.js DevTools
app.whenReady().then(() => {
  installExtension(VUEJS_DEVTOOLS)
    .then(ext => console.log(`Added Extension:  ${ext.name}`))
    .catch(err => console.log('An error occurred: ', err));
});

Documentation

• API Document provided by jsdocs.io.
• index.d.ts provided by unpkg.com.

API

Preset Chrome Extensions ID

The following is a list of preset Chrome extensions ID:

ID	Name
ANGULAR_DEVTOOLS	Angular DevTools
APOLLO_CLIENT_TOOLS	Apollo Client Devtools
BACKBONE_DEBUGGER	Backbone Debugger
EMBER_INSPECTOR	Ember Inspector
JQUERY_DEBUGGER	jQuery Debugger
MOBX_DEVTOOLS	MobX DevTools
PREACT_DEVELOPER_TOOLS	Preact Developer Tools
REACT_DEVELOPER_TOOLS	React Developer Tools
REDUX_DEVTOOLS	Redux DevTools
VUEJS_DEVTOOLS	Vue.js DevTools
VUEJS_DEVTOOLS_BETA	Vue.js devtools (beta)
VUEJS_DEVTOOLS_V5	Vue.js devtools (v5)
VUEJS_DEVTOOLS_V6	Vue.js devtools (v6)

installExtension(extensionIds[, options])

install chrome extension for electron

• extensionIds: string | string[] - Chrome extension id
• options: Install extension options
  • loadExtensionOptions: session.LoadExtensionOptions
  • forceDownload: boolean - Force to download the extension even if it's already installed, default is false
  • source: 'chrome' | 'unpkg' | 'jsdelivr' | 'npmmirror' - Download url source. When the OS language is zh_CN , the default value is npmmirror, otherwise it is chrome.
  • session: 'string' | 'Electron.Session' - The target session on which the extension shall be installed, default is session.defaultSession.

Returns Promise<Electron.Extension | Electron.Extension[]> - extension name/version, etc.

downloadExtension(extensionId[, options])

download chrome extension for electron

• extensionId: string - Chrome extension id
• options: Download extension options
  • force: boolean - Force to download the extension even if it's already installed, default is false
  • unzip: boolean - Whether to unzip the downloaded file, default is true
  • attempts: number - Number of attempts to download the extension, default is 5
  • outPath: string - The path to save the downloaded extension, default is path.join(app.getPath('userData'), 'extensions')
  • source: 'chrome' | 'unpkg' | 'jsdelivr' | 'npmmirror' - Download url source. When the OS language is zh_CN , the default value is npmmirror, otherwise it is chrome.

Returns Promise<{ filePath: string; unzipPath?: string }>

Test/Debug

pnpm jest --verbose false