CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-electron-devtools-installer

An easy way to install Chrome DevTools extensions into Electron applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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);
  }
}

Install with Tessl CLI

npx tessl i tessl/npm-electron-devtools-installer
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/electron-devtools-installer@4.0.x
Publish Source
CLI
Badge
tessl/npm-electron-devtools-installer badge