Chrome devtools扩展背景页面到面板

Question

我没有运气从背景页面向面板传递消息。有大量的示例和文档，但它似乎不适用于事件。

这是背景页面的听众 - 标准的东西。

chrome.extension.onConnect.addListener(function (port) {
    
    var extensionListener = function (message, sender, sendResponse) {

        if(message.tabId && message.content) {

                //Evaluate script in inspectedPage
                if(message.action === 'code') {
                    chrome.tabs.executeScript(message.tabId, {code: message.content});

                //Attach script to inspectedPage
                } else if(message.action === 'script') {
                    chrome.tabs.executeScript(message.tabId, {file: message.content});

                //Pass message to inspectedPage
                } else {
                    chrome.tabs.sendMessage(message.tabId, message, sendResponse);
                }

        // This accepts messages from the inspectedPage and 
        // sends them to the panel
        } else {
            port.postMessage(message);
        }
        sendResponse(message);
    }

    // Listens to messages sent from the panel
    chrome.extension.onMessage.addListener(extensionListener);

    port.onDisconnect.addListener(function(port) {
        chrome.extension.onMessage.removeListener(extensionListener);
    });

});

此代码适用于所有“教科书”示例。但是在这种情况下，它会发送一条消息，事件监听器也不会发送它。

chrome.tabs.onUpdated.addListener(function (tabId, changes, tabObject) {
    if(changes.status && changes.status === "complete") {
        if(tabObject.url) {
            var command = 'console.log("url is ' + tabObject.url + '");';
            chrome.tabs.executeScript(tabId, {code: command});

            //** Trying to trigger message in background, which will pass message to panel.html */
            // THIS DOES NOT WORK!!! //
            var message = {content: "hello console"};
            chrome.extension.sendMessage(message);
        }
    }    
  });

任何人都可以看到我做错了什么或知道为什么在onUpdated事件中没有收到消息？

这是应该触发的面板中的代码。它适用于其他场景。

(function createChannel() {
    //Create a port with background page for continous message communication
    var port = chrome.extension.connect({
        name: "Channel between inspected page" //Given a Name
    });

    // Listen to messages from the background page
    port.onMessage.addListener(function (message) {

      document.getElementById("textareaconsole").value = message.content;
    });

}());

如果你很好奇，我试图禁用devtools扩展，如果它不是一个特定的域。谢谢。

Answer 1

解决方法是将我的事件代码移动到chrome.extension.onConnect.addListener事件中，它可以引用传入的端口。

chrome.extension.onConnect.addListener(function (port) {
...
    chrome.tabs.onUpdated.addListener(function (tabId, changes, tabObject) {
        if(changes.status && changes.status === "complete") {
            if(tabObject.url) {
                var command = 'console.log("url is ' + tabObject.url + '");';
                chrome.tabs.executeScript(tabId, {code: command});

                // This passes the message from the background page to the panel!!! //
                var message = {content: "hello console"};
                port.postMessage(message);
            }
        }   
    });

感谢woxxom