开门见山,Chrome 安装好的扩展也可以在 Electron 应用中使用,只需要 Electron 中载入扩充功能,你需要将其下载到 Chrome 浏览器中,找出档案路径,再呼 BrowserWindow.addDevToolsExtension(extension) API 将其载入。
以 Vue.js devtools 为例:
- 在 Chrome中安装
- 输入
chrome://extensions
,找到插件的 ID,它是一串类似fmkadmapgofadopljbjfkapdkoienihi
的字符串。 - 找出 Chrome 存储插件的本地路径。
- Windows 中是
%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions
; - macOS 中是
~/Library/Application Support/Google/Chrome/Default/Extensions
。
在 Electron 使用:
app.on('ready', function() {
BrowserWindow.addDevToolsExtension('/Users/Augus/Library/Application\ Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0');
});
记得将 DevTools 开启,才会看到实际效果
BrowserWindow.webContents.openDevTools({ detach: true });