时间戳

首页 > 解决方案 > 如何向我的 Electron 应用程序添加自定义 chrome 扩展？

javascript - 如何向我的 Electron 应用程序添加自定义 chrome 扩展？

问题描述

我在将 chrome 插件添加到我的 Electron BrowserWindow 时遇到了一些麻烦。

在创建我的窗口之前（以及在ready事件触发之后），我尝试添加我的浏览器需要进行屏幕共享的 devtools 扩展。

BrowserWindow.addDevToolsExtension('/home/USER/.config/chromium/Default/Extensions/dkjdkjlcilokfaigbckcipicchgoazeg/1.5_0');

我遵循了这个电子指南，它适用于他们的示例（添加反应开发工具）。当我使用自己的 chrome 扩展程序执行完全相同的操作时，出现此错误：

[4735:1116/163422.268391:ERROR:CONSOLE(7701)] "Skipping extension with invalid URL: chrome-extension://extension-name", source: chrome-devtools://devtools/bundled/shell.js (7701)

我真的不明白为什么指定的错误是“无效的 URL”，因为我正在使用 react 插件做完全相同的事情/过程而没有问题。我也不知道该怎么办。我的 chrome 插件是否可能与 Electron 不兼容？

标签： javascriptgoogle-chrome-extensionelectronadd-on

解决方案

看起来您正在尝试添加常规 Chrome 扩展程序而不是 Dev Tools 扩展程序。

该BrowserWindow.addExtension(path)方法适用于常规 Chrome 扩展：

BrowserWindow.addExtension(path)

  • path细绳

添加位于 的Chrome 扩展程序path，并返回扩展程序的名称。

如果扩展的清单丢失或不完整，该方法也不会返回。

注意：ready在模块的事件app发出之前，不能调用此 API 。

- https://electronjs.org/docs/api/browser-window#browserwindowaddextensionpath

相反，该BrowserWindow.addDevToolsExtension(path)方法适用于开发工具扩展：

BrowserWindow.addDevToolsExtension(path)

  • path细绳

添加位于 的DevTools 扩展path，并返回扩展的名称。

扩展名会被记住，因此您只需要调用一次此 API，此 API 不用于编程用途。如果您尝试添加已加载的扩展，此方法将不会返回，而是会在控制台中记录警告。

如果扩展的清单丢失或不完整，该方法也不会返回。

注意：ready在模块的事件app发出之前，不能调用此 API 。

- https://electronjs.org/docs/api/browser-window#browserwindowadddevtoolsextensionpath

请注意，在这两种情况下，您都需要等待模块发出的ready事件：app

const { BrowserWindow, app } = require('electron')

let mainWindow = null

function main() {
  BrowserWindow.addExtension('/path/to/extension')
  mainWindow = new BrowserWindow()
  mainWindow.loadURL('https://google.com')
  mainWindow.on('close', event => {
    mainWindow = null
  })
}

app.on('ready', main)

推荐阅读