npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tomjs/electron-devtools-installer

v2.4.0

Published

Install Chrome extension for Electron, support cjs/esm

Downloads

2,223

Readme

@tomjs/electron-devtools-installer

npm node-current (scoped) NPM jsDocs.io

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 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压缩)解压,调用 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