@tomjs/electron-devtools-installer

English | 中文

为 Electron 安装 Chrome 扩展，提供 cjs/esm

本库是基于 Samuel Attard 的 electron-devtools-installer 和 JonLuca De Caro 的 electron-extension-installer 做了一些修改，并增加一些小功能。提供 esm 和 cjs 支持，以支持 Electron v28+。

预置 的 Chrome DevTools 除了 Chrome 应用商店 可以选择 npmmirror、jsdelivr、unpkg 加速下载。相关的扩展由 electron-devtools-files 定时更新和发布。

关于 Chrome DevTools 的安装，请参考官方文档。

Features

• 支持 cjs/esm
• 支持 Electron v28+ 使用 esm

安装

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

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

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

使用

• esm

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

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

• cjs

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

// 安装 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));
});

文档

• jsdocs.io 提供的 API 文档.
• unpkg.com 提供的 index.d.ts.

API

Preset Chrome Extensions ID

以下是预设的Chrome扩展ID列表：

| ID | Name | 第三方 | | ------------------------ | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | ANGULAR_DEVTOOLS | Angular DevTools | 详情 | | APOLLO_CLIENT_TOOLS | Apollo Client Devtools | 详情 | | BACKBONE_DEBUGGER | Backbone Debugger | 详情 | | EMBER_INSPECTOR | Ember Inspector | 详情 | | MOBX_DEVTOOLS | MobX DevTools | 详情 | | PREACT_DEVELOPER_TOOLS | Preact Developer Tools | 详情 | | REACT_DEVELOPER_TOOLS | React Developer Tools | 详情 | | REDUX_DEVTOOLS | Redux DevTools | 详情 | | SOLID_DEVTOOLS | Solid Devtools | 详情 | | SVELTE_DEVTOOLS | Svelte 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) | 详情 |

注意

如果无法访问 Chrome应用商店 或者使用指定版本插件，可以通过一些第三方网站（Crx搜搜、CrxDL）下载 .crx 文件后，改名后缀名为 .zip，使用压缩工具（360压缩）解压，调用 Electron 的 session.defaultSession.loadExtension 方法安装。

const os = require('node:os');
const path = require('node:path');
const { app, session } = require('electron');

const reactDevToolsPath = 'crx扩展解压路径';
app.whenReady().then(async () => {
  await session.defaultSession.loadExtension(reactDevToolsPath);
});

installExtension(extensionIds[, options])

为 Electron 安装 Chrome 扩展

• extensionIds: string | string[] - Chrome 扩展 id

• options: 安装可选配置

  • loadExtensionOptions: session.LoadExtensionOptions
  • forceDownload: boolean - 强制下载已安装插件，默认值为 false
  • source: 'chrome' | 'unpkg' | 'jsdelivr' | 'npmmirror' - 下载地址源。当操作系统语言为 zh_CN 时，默认值为 npmmirror ，否则为 unpkg 。
    • 非 chrome 是由 electron-devtools-files 提供的预置 Chrome 扩展。
  • session: 'string' | 'Electron.Session' - 应安装扩展的目标会话，默认为 session.defaultSession。

  返回 Promise<Electron.Extension | Electron.Extension[]> - 扩展名称/版本等

downloadExtension(extensionId[, options])

为 Electron 下载 Chrome 扩展

• extensionId: string - Chrome 扩展 id
• options: 下载扩展可选配置
  • force: boolean - 强制下载扩展，即使它已经安装，默认为 false
  • unzip: boolean - 是否解压下载的文件，默认为 true
  • attempts: number - 尝试下载扩展程序的次数，默认为 5
  • outPath: string - 保存下载扩展的路径，默认为 path.join(app.getPath('userData'), 'extensions')
  • source: 'chrome' | 'unpkg' | 'jsdelivr' | 'npmmirror' - 下载地址源。当操作系统语言为 zh_CN 时，默认值为 npmmirror ，否则为 chrome 。
    • 非 chrome 是由 electron-devtools-files 提供的预置 Chrome 扩展。

返回 Promise<{ filePath: string; unzipPath?: string }>

测试/调试

pnpm jest --verbose false