开发工具扩展程序

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

    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 [] API.

    Using the as an example:

    2. 打开chrome://extensions，找到扩展程序的ID，形如fmkadmapgofadopljbjfkapdkoienihi的hash字符串。

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

      • 在 Linux下为：
        • ~/.config/google-chrome/Default/Extensions/
        • ~/.config/google-chrome-beta/Default/Extensions/
        • ~/.config/chromium/Default/Extensions/
      • 在 macOS下为~/Library/Application Support/Google/Chrome/Default/Extensions。

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

    • loadExtension returns a Promise with an , which contains metadata about the extension that was loaded. This promise needs to resolve (e.g. with an expression) before loading a page. Otherwise, the extension won’t be guaranteed to load.
    • loadExtension must be called on every boot of your app if you want the extension to be loaded.

    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.

    Electron only supports , so extensions using unsupported chrome.* APIs under the hood may not work.

    The following Devtools extensions have been tested to work in 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.