Chrome devtools 扩展背景页面到面板答案

【问题标题】：Chrome devtools extension background page to panelChrome devtools 扩展背景页面到面板
【发布时间】：2017-12-30 22:34:12
【问题描述】：

我无法将消息从背景页面传递到面板。有很多示例和文档，但它似乎不适用于事件。

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

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 扩展（如果它不是特定域）。谢谢。

【问题讨论】：

谢谢。我正在尝试从后台向面板发送数据。
然后简单地使用端口。
谢谢！这就是解决办法。当我的代码被移动到端口可访问的 OnConnect 时，它就可以工作了。

标签： google-chrome-extension google-chrome-devtools

【解决方案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

【讨论】：