直接在自定义Chrome devtools面板和Chrome扩展程序内容脚本之间进行通信

Question

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

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

//在开发工具面板中

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

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

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

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