为electron添加Chrome扩展程序

最新推荐文章于 2025-05-29 09:08:57 发布

_花开富贵

最新推荐文章于 2025-05-29 09:08:57 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/sinat_42338962/article/details/110529981

本文介绍了如何在Electron应用中加载和移除Chrome开发者工具扩展，如React Developer Tools。详细步骤包括在Chrome中获取扩展ID，定位扩展文件夹，以及在Electron中使用API进行加载和移除。特别强调必须在app模块的ready事件后调用API，并提供了Windows、Linux和macOS下的扩展存储路径示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档

Electron支持Chrome DevTools 扩展程序，可增强开发工具调试流行web框架的能力

1.加载 DevTools 扩展程序

为了在Electron中加载一个扩展程序，你需要在Chrome浏览器中下载它，找到它在系统目录中位置，然后调用BrowserWindow.addDevToolsExtension(extension)API 加载它

1.1.下面以React Developer Tools为例：

在 Chrome 中安装React Developer Tools 。
打开chrome://extensions，找到扩展程序的ID，形如fmkadmapgofadopljbjfkapdkoienihi的hash字符串。
找到Chrome 扩展程序的存放目录：
- 在Ｗindows 下为 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;
- 在 Linux下为：
  - ~/.config/google-chrome/Default/Extensions/
  - ~/.config/google-chrome-beta/Default/Extensions/
  - ~/.config/google-chrome-canary/Default/Extensions/
  - ~/.config/chromium/Default/Extensions/
- 在 macOS下为~/Library/Application Support/Google/Chrome/Default/Extensions。
将扩展的位置传递到 BrowserWindow.addDevToolsExtension API，用于React开发者工具，这样做很好：
```
const path = require('path')
const os = require
```