在自定义 Chrome 开发工具面板和 Chrome 扩展内容脚本之间直接通信

Question

我的问题是：有没有办法在我的自定义 Chrome DevTools 面板和我的 Chrome 扩展的内容脚本之间直接通信？现在，我似乎需要使用后台脚本作为内容脚本和开发工具面板之间的中介。

我尝试使用自定义窗口事件：

//在开发工具面板中

let event = new Event('suman-dev-tools', {
  value: 'foo'
} as any);


window.dispatchEvent(event);

//在内容脚本中

window.addEventListener('suman-dev-tools', function(ev){
  console.log('my devtools panel has spoken:', ev);
});

但这似乎不起作用 - 看起来我无法使用窗口事件在两件事之间进行通信。我必须使用后台页面在 devtools 页面和内容脚本之间进行通信吗？

Answer 1

正如您所提到的，最佳做法是使用后台脚本作为消息代理。

但还有另一种方法可以直接从开发工具面板运行内容脚本中的代码：devtools.inspectedWindow.eval 和 useContentScriptContext: true 允许您在内容脚本范围内评估代码。

chrome.devtools.inspectedWindow.eval('<your code>', {
    useContentScriptContext: true
}, function(result) {
    // result of the execution
});