Skip to main content

开发工具扩展

¥DevTools Extension

Electron 支持 Chrome 开发工具扩展，可用于扩展 Chrome 开发者工具调试流行 Web 框架的能力。

¥Electron supports Chrome DevTools extensions, which can be used to extend the ability of Chrome's developer tools for debugging popular web frameworks.

使用工具加载 DevTools 扩展​

¥Loading a DevTools extension with tooling

加载 DevTools 扩展的最简单方法是使用第三方工具来自动执行该进程。electron-devtools-installer 是一个流行的 NPM 包，它就可以做到这一点。

¥The easiest way to load a DevTools extension is to use third-party tooling to automate the process for you. electron-devtools-installer is a popular NPM package that does just that.

手动加载 DevTools 扩展​

¥Manually loading a DevTools extension

如果你不想使用工具方法，也可以手动执行所有必要的操作。要在 Electron 中加载扩展，你需要通过 Chrome 下载它，找到其文件系统路径，然后通过调用 ses.loadExtension API 将其加载到你的 会议 中。

¥If you don't want to use the tooling approach, you can also do all of the necessary operations by hand. To load an extension in Electron, you need to download it via Chrome, locate its filesystem path, and then load it into your Session by calling the ses.loadExtension API.

以 反应开发者工具 为例：

¥Using the React Developer Tools as an example:

  1. 在 Google Chrome 中安装扩展程序。

    ¥Install the extension in Google Chrome.

  2. 导航到 chrome://extensions，找到它的扩展 ID，它是一个类似于 fmkadmapgofadopljbjfkapdkoienihi 的哈希字符串。

    ¥Navigate to chrome://extensions, and find its extension ID, which is a hash string like fmkadmapgofadopljbjfkapdkoienihi.

  3. 找出 Chrome 用于存储扩展的文件系统位置：

    ¥Find out the filesystem location used by Chrome for storing extensions:

    • 在 Windows 上为 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions；

      ¥on Windows it is %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;

    • 在 Linux 上它可能是：

      ¥on Linux it could be:

      • ~/.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。

      ¥on macOS it is ~/Library/Application Support/Google/Chrome/Default/Extensions.

  4. 将扩展的位置传递给 ses.loadExtension API。对于 React Developer Tools v4.9.0，它看起来像：

    ¥Pass the location of the extension to the ses.loadExtension API. For React Developer Tools v4.9.0, it looks something like:

    const { app, session } = require('electron')
    const path = require('node:path')
    const os = require('node:os')

    // on macOS
    const reactDevToolsPath = path.join(
      os.homedir(),
      '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
    )

    app.whenReady().then(async () => {
      await session.defaultSession.loadExtension(reactDevToolsPath)
    })

注意：

¥Notes:

  • loadExtension 返回一个带有 扩展对象 的 Promise，其中包含有关已加载的扩展的元数据。这个 promise 需要在加载页面之前解决（例如使用 await 表达式）。否则，将无法保证加载扩展。

    ¥loadExtension returns a Promise with an Extension object, which contains metadata about the extension that was loaded. This promise needs to resolve (e.g. with an await expression) before loading a page. Otherwise, the extension won't be guaranteed to load.

  • loadExtension 不能在 app 模块的 ready 事件发出之前调用，也不能在内存中（非持久）会话上调用。

    ¥loadExtension cannot be called before the ready event of the app module is emitted, nor can it be called on in-memory (non-persistent) sessions.

  • 如果你希望加载扩展，则必须在应用每次启动时调用 loadExtension。

    ¥loadExtension must be called on every boot of your app if you want the extension to be loaded.

删除 DevTools 扩展​

¥Removing a DevTools extension

你可以将扩展程序的 ID 传递给 ses.removeExtension API 以将其从会话中删除。加载的扩展在应用启动之间不会保留。

¥You can pass the extension's ID to the ses.removeExtension API to remove it from your Session. Loaded extensions are not persisted between app launches.

DevTools 扩展支持​

¥DevTools extension support

Electron 仅支持 一组有限的 chrome.* API，因此在后台使用不受支持的 chrome.* API 的扩展可能无法工作。

¥Electron only supports a limited set of chrome.* APIs, so extensions using unsupported chrome.* APIs under the hood may not work.

以下 Devtools 扩展已经过测试，可以在 Electron 中使用：

¥The following Devtools extensions have been tested to work in Electron:

如果 DevTools 扩展不起作用，我该怎么办？​

¥What should I do if a DevTools extension is not working?

首先，请确保该扩展程序仍在维护中并且与最新版本的 Google Chrome 兼容。我们无法为不受支持的扩展提供额外支持。

¥First, please make sure the extension is still being maintained and is compatible with the latest version of Google Chrome. We cannot provide additional support for unsupported extensions.

如果扩展程序在 Chrome 上运行，但在 Electron 上运行失败，请在 Electron 的 问题跟踪器 中提交错误，并描述扩展程序的哪一部分未按预期运行。

¥If the extension works on Chrome but not on Electron, file a bug in Electron's issue tracker and describe which part of the extension is not working as expected.