2.2.1 • Published 2 months ago

@tomjs/electron-devtools-installer v2.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

@tomjs/electron-devtools-installer

npm node-current (scoped) NPM Docs

English | 中文

Electron 安装 Chrome 扩展,提供 cjs/esm

本库是基于 Samuel Attardelectron-devtools-installerJonLuca De Caroelectron-extension-installer 做了一些修改,并增加一些小功能。提供 esmcjs 支持,以支持 Electron v28+

预置Chrome DevTools 除了 Chrome 应用商店 可以选择 npmmirrorjsdelivrunpkg 加速下载。相关的扩展由 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 i @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列表:

IDName第三方
ANGULAR_DEVTOOLSAngular DevTools详情
APOLLO_CLIENT_TOOLSApollo Client Devtools详情
BACKBONE_DEBUGGERBackbone Debugger详情
EMBER_INSPECTOREmber Inspector详情
JQUERY_DEBUGGERjQuery Debugger详情
MOBX_DEVTOOLSMobX DevTools详情
REACT_DEVELOPER_TOOLSReact Developer Tools详情
REDUX_DEVTOOLSRedux DevTools详情
VUEJS_DEVTOOLSVue.js DevTools详情

注意

如果无法访问 Chrome应用商店 或者使用指定版本插件,可以通过一些第三方网站(Crx搜搜CrxDL)下载 .crx 文件后,改名后缀名为 .zip,使用压缩工具(360压缩)解压,调用 Electronsession.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
2.2.1

2 months ago

2.2.0

2 months ago

2.1.1

2 months ago

2.1.0

4 months ago

2.0.6

5 months ago

2.0.5

5 months ago

2.0.4

5 months ago

2.0.3

5 months ago

2.0.2

5 months ago

2.0.1

5 months ago

2.0.0

5 months ago

1.0.1

5 months ago

1.0.0

5 months ago