or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-electron-devtools-installer

An easy way to install Chrome DevTools extensions into Electron applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/electron-devtools-installer@4.0.x

To install, run

npx @tessl/cli install tessl/npm-electron-devtools-installer@4.0.0

index.mddocs/

Electron DevTools Installer

Electron DevTools Installer provides a streamlined solution for installing Chrome DevTools extensions in Electron applications, eliminating the manual process of downloading, extracting, and configuring extension files.

Package Information

  • Package Name: electron-devtools-installer
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install electron-devtools-installer --save-dev

Core Imports

import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from "electron-devtools-installer";

For CommonJS:

const { default: installExtension, REACT_DEVELOPER_TOOLS } = require("electron-devtools-installer");

Basic Usage

import { app } from "electron";
import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from "electron-devtools-installer";

app.whenReady().then(() => {
    // Install single extension
    installExtension(REACT_DEVELOPER_TOOLS)
        .then((ext) => console.log(`Added Extension: ${ext.name}`))
        .catch((err) => console.log("An error occurred: ", err));

    // Install multiple extensions
    installExtension([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS])
        .then(([redux, react]) => console.log(`Added Extensions: ${redux.name}, ${react.name}`))
        .catch((err) => console.log("An error occurred: ", err));
});

Capabilities

Extension Installation

Main function for installing Chrome DevTools extensions into Electron applications. Automatically downloads extensions from the Chrome Web Store, extracts them to app.getPath('userData')/extensions, and loads them into Electron. Extensions are cached locally and reused unless forceDownload is specified.

/**
 * Install Chrome DevTools extensions into Electron
 * @param extensionReference Extension or extensions to install
 * @param options Installation options
 * @returns Promise resolving with the extension(s) installed
 */
function installExtension(
  extensionReference: Array<ExtensionReference | string>,
  options?: InstallExtensionOptions,
): Promise<Extension[]>;

function installExtension(
  extensionReference: ExtensionReference | string,
  options?: InstallExtensionOptions,
): Promise<Extension>;

Usage Examples:

// Install with custom extension ID
await installExtension("fmkadmapgofadopljbjfkapdkoienihi");

// Install with options
await installExtension(REACT_DEVELOPER_TOOLS, {
  forceDownload: true,
  loadExtensionOptions: { allowFileAccess: true },
});

// Install to custom session
import { session } from "electron";
const customSession = session.fromPartition("persist:custom");
await installExtension(REDUX_DEVTOOLS, { session: customSession });

Predefined Extension Constants

Pre-configured extension references for popular development tools.

const EMBER_INSPECTOR: ExtensionReference;
const REACT_DEVELOPER_TOOLS: ExtensionReference;
const BACKBONE_DEBUGGER: ExtensionReference;
const JQUERY_DEBUGGER: ExtensionReference;
const VUEJS_DEVTOOLS: ExtensionReference;
const VUEJS_DEVTOOLS_BETA: ExtensionReference;
const REDUX_DEVTOOLS: ExtensionReference;
const MOBX_DEVTOOLS: ExtensionReference;

Usage Examples:

// Use predefined constants
await installExtension(REACT_DEVELOPER_TOOLS);
await installExtension(VUEJS_DEVTOOLS);

// Install multiple predefined extensions
await installExtension([
  REACT_DEVELOPER_TOOLS,
  REDUX_DEVTOOLS,
  VUEJS_DEVTOOLS
]);

Types

Extension

Electron's Extension interface representing a loaded browser extension.

interface Extension {
  /** The extension's unique identifier */
  id: string;
  /** The extension's display name */
  name: string;
  /** The extension's version */
  version: string;
  /** URL to the extension's directory */
  url: string;
}

Session

Electron's Session interface for managing browser sessions.

interface Session {
  /** Load an extension from the given path */
  loadExtension(path: string, options?: LoadExtensionOptions): Promise<Extension>;
  /** Remove an extension by ID */
  removeExtension(extensionId: string): void;
  /** Get all loaded extensions */
  getAllExtensions(): Extension[];
  /** Create session from partition */
  fromPartition(partition: string): Session;
}

LoadExtensionOptions

Electron's LoadExtensionOptions interface for extension loading configuration.

interface LoadExtensionOptions {
  /** Whether the extension can access file:// URLs */
  allowFileAccess?: boolean;
}

ExtensionReference

Structure for extension references containing the Chrome Store extension ID.

interface ExtensionReference {
  /** Extension ID from Chrome Web Store */
  id: string;
}

InstallExtensionOptions

Configuration options for extension installation behavior.

interface InstallExtensionOptions {
  /** Ignore whether the extension is already downloaded and redownload every time */
  forceDownload?: boolean;
  /** Options passed to session.loadExtension from Electron */
  loadExtensionOptions?: LoadExtensionOptions;
  /** Optionally specify the session to install devtools into, defaults to defaultSession */
  session?: Session;
}

Usage Examples:

// Force redownload and allow file access
const options: InstallExtensionOptions = {
  forceDownload: true,
  loadExtensionOptions: { allowFileAccess: true }
};
await installExtension(REACT_DEVELOPER_TOOLS, options);

// Install to specific session
const options: InstallExtensionOptions = {
  session: session.fromPartition("persist:devtools")
};
await installExtension(REDUX_DEVTOOLS, options);

Error Handling

The library includes built-in error handling and retry mechanisms:

  • Process Type Error: Throws error if used outside the main process
  • Invalid Extension Reference: Throws error for malformed extension references
  • Network Errors: Internal download mechanism automatically retries failed downloads up to 5 times with 200ms backoff
  • File System Errors: Handles extraction and permission errors gracefully
try {
  await installExtension(REACT_DEVELOPER_TOOLS);
} catch (error) {
  if (error.message.includes("main process")) {
    console.error("Extension installer can only be used from the main process");
  } else {
    console.error("Failed to install extension:", error);
  }
}