@tomjs/electron-devtools-installer

 !node-current (scoped) !NPM 

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

安装

``bash


pnpm

pnpm add @tomjs/electron-devtools-installer

yarn

yarn add @tomjs/electron-devtools-installer

npm

npm add @tomjs/electron-devtools-installer
`

使用

- esm

`js
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

`js
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

$3

以下是预设的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 方法安装。

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

$3

为 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 - 扩展名称/版本等

$3

为 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 }>

测试/调试

`bash
pnpm jest --verbose false
``