开发工具扩展程序

    本文简要描述了手动加载一个扩展程序的过程 你也可以尝试一下electron-devtools-installer,这个第三方工具可以直接从Chrome的WebStore下载扩展程序

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

    下面以为例:

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

    • 找到Chrome 扩展程序 的存放目录:

      • 在 Linux下为:

        • ~/.config/google-chrome/Default/Extensions/
        • ~/.config/google-chrome-canary/Default/Extensions/
        • ~/.config/chromium/Default/Extensions/
      • 在 macOS下为~/Library/Application Support/Google/Chrome/Default/Extensions
    • Pass the location of the extension to BrowserWindow.addDevToolsExtension API, for the React Developer Tools, it is something like:

    The extension will be remembered so you only need to call this API once per extension. If you try to add an extension that has already been loaded, this method will not return and instead log a warning to the console.

    您可以传递扩展程序的名称到 BrowserWindow.remoeDeveToolsExtension API 移除它。 The name of the extension is returned by BrowserWindow.addDevToolsExtension and you can get the names of all installed DevTools Extensions using the BrowserWindow.getDevToolsExtensions API.

    支持的 DevTools 扩展程序

    Electron 只支持有限的chrome. API,所以,一些扩展程序如果使用了不支持的 API,它可能会无法正常工作。 以下 DevTools 扩展程序已经通过测试,可以在Electron中正常工作:

    如果 DevTools 扩展不工作, 我该怎么办?

    然后在Electron的问题列表中提交一个 bug, 并描述扩展程序的哪个部分没有按预期的方式工作。