javascript - 再一次约: Error: Attempting to use a disconnected port object,怎么办？

Question

这是我的设置

背景.js

var port = null;
function setPort() {
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        port = chrome.tabs.connect(tabs[0].id, {name: "CONTENTSCRIPT"});
    });
}

// when i click on something, get the port and send a message
function clickHandler(e) {
    setPort();
    if (port) {
        port.postMessage({key: 'message', value: true});
    }
}

内容脚本.js

chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "CONTENTSCRIPT") {
        port.onMessage.addListener(function (msg) {
            console.log(msg);
        });
    }
});

我正在做的是单击随机选项卡上的上下文菜单按钮并尝试发送消息。

发生的情况是，我第一次点击，没有任何反应，没有错误。我第二次单击该消息时会通过。

如果我切换到另一个选项卡，然后单击菜单按钮，我会收到错误:尝试使用断开连接的端口对象错误。如果我再次点击，消息就会成功发送

我尝试使用 var port = chrome.runtime.connect({name: "CONTENTSCRIPT"}); 但每次都会出现端口断开连接的错误

想法？

Answer 1

您的问题在于 chrome.tabs.query 是异步的。

您执行setPort()，它会在query执行回调并设置端口之前立即返回。此时，port 要么为空，要么引用您之前选项卡的端口。

因此，您要么不会收到错误，要么会因为旧端口无效而收到错误。

发生之后，执行query中的回调，并为下一次通信设置port。

---

因此，要解决此问题，您需要在调用链中设置端口后发送消息。示例:

function setPort(callback) {
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        port = chrome.tabs.connect(tabs[0].id, {name: "CONTENTSCRIPT"});
        callback(port);
    });
}

function clickHandler(e) {
    setPort( function (port) {
        if (port) { port.postMessage({key: 'message', value: true}); }
    });  
}

---

编辑:顺便说一下，你应该重用一个端口，这就是重点。如果您每次都重新建立连接，则最好使用 sendMessage，尽管我认为您仅使用上面的代码进行测试。