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

Question

My question is: is there a way to communicate directly between my custom Chrome DevTools panel and my Chrome Extension's content script? Right now, it seems like I need to use the background script as a mediator between the content script and the devtools panel.

I tried using a custom window event:

// in the dev tools panel

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


window.dispatchEvent(event);

// in the content script

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

but that doesn't seem to work - it looks like I can't use window events to communicate between the two things. Must I use the background page to communicate between devtools page and content script?

Answer 1

As you mentioned the best practice is to use background script as a message broker.

But there is one more way to run code in content-script directly from devtool panel: devtools.inspectedWindow.eval with useContentScriptContext: true allows you to evaluate code in the content-script scope.

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