Install Chrome extension for Electron, support cjs/esm
npm install @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 的安装,请参考官方文档。
- 支持 cjs/esm
- 支持 Electron v28+ 使用 esm
``bashpnpm
pnpm 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
``