12. 开发工具扩展

原文：https://github.com/electron/electron/blob/master/docs/tutorial/devtools-extension.md
译者：Lin

Electron支持Chrome DevTools Extension，可以使用流行的调试网页框架的工具来扩展。

本篇文档概述来手动加载一个扩展的过程。你可能还需要试一下electron-devtools-installer，一个第三方的工具，能够直接从Chrome WebStore下载扩展。

Electron中加载一个扩展，你需要先在Chrome浏览器中下载它，找到它的下载路径，然后使用BrowserWindow.addDevToolsExtension(extension)接口加载它。

在Chrome浏览器中安装。
导航到chrome://extensions，然后找到那个扩展的ID，是哈希值形式的，就像这样：fmkadmapgofadopljbjfkapdkoienihi。
找到用于存储Chrome扩展的文件位置：

Windows中是 %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接口，对于React Developer Tools可能是这样的：~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0

注意：BrowserWindow.addDevToolsExtension接口 API 不能在app模块尚未加载完之前被调用。

扩展的名字将由接口BrowserWindow.addDevToolsExtension返回来，你可以将接口的名字传入BrowserWindow.removeDevToolsExtension接口来卸载它。

Electron仅支持一小部分chrome.*接口，如果一些扩展使用不支持的chrome.*接口会导致一些Chrome扩展的功能不能使用。以下工具扩展经过测试保证可以在Electron中工作：

请确保这个扩展仍然在被维护中，一些扩展不能工作是因为Chorme浏览器的版本问题，而我们不能做任何事情来使它工作。

然后在Electron的问题列表中记录一个bug，并描述是扩展的哪个部分没有按预期工作。

最后编辑于：2017.12.06 01:30:41

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。