Skip to content

Latest commit

 

History

History
139 lines (99 loc) · 8.13 KB

README.zh_CN.md

File metadata and controls

139 lines (99 loc) · 8.13 KB

@tomjs/electron-devtools-installer

npm node-current (scoped) NPM jsDocs.io

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 { app } from 'electron';
import { installExtension, VUEJS_DEVTOOLS } from '@tomjs/electron-devtools-installer';

// 安装 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 { app } = require('electron');
const { installExtension, VUEJS_DEVTOOLS } = require('@tomjs/electron-devtools-installer');

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

文档

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 详情
JQUERY_DEBUGGER jQuery Debugger 详情
MOBX_DEVTOOLS MobX DevTools 详情
PREACT_DEVELOPER_TOOLS Preact Developer Tools 详情
REACT_DEVELOPER_TOOLS React Developer Tools 详情
REDUX_DEVTOOLS Redux 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 { app, session } = require('electron');
const path = require('node:path');
const os = require('node:os');

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 ，否则为 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 。

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

测试/调试

pnpm jest --verbose false