"Attempting to use a disconnected port object" 在 Chrome 扩展中从内容向弹出窗口发送消息时

Question

因此，我需要将消息从弹出窗口传递到内容，反之亦然。目前这是我正在做的事情，但这并不能正常工作：

manifest.json:

{
  // Required
    "manifest_version": 2,
    "name": "Extension name",
    "version": "0.1",
    "content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["content.js"]
    }
    ],
    "browser_action" : {
        "default_title" : "Extension name",
        "default_popup" : "popup.html"
    },
    "permissions": [
        "tabs",
        "*://*/*",
        "contextMenus"
    ]

}

popup.js

var port = "";
window.onload = function() 
{
    document.getElementById("captureImage").onclick = captureImage;
}


function captureImage(isBig = true)
{
    chrome.tabs.query({'active': true}, function (tabs) {
        port = chrome.tabs.connect(tabs[0].id, {name: "Besada"});
        port.onMessage.addListener(function(msg) {
            alert(msg.message);
        });
        port.postMessage({message: "getCoords"});
    });
}

和content.js

chrome.runtime.onConnect.addListener(function(port){
    port.onMessage.addListener(function(msg) {

    });

    port.postMessage({message: "hello!"});  // this message I receive

    document.onmouseup = function(e) {
        port.postMessage({message: "hello!"}); // this message produces an error
    };
});

我需要的是当用户释放鼠标左键时发送的消息。以下是发生的情况：当我单击 popup.html 中的按钮时，会显示带有文本 "Hello" 的警报，但是当我在此之后单击页面中的任意位置时，出现错误：Uncaught Error: Attempting to use a disconnected port object

我做错了什么，我该如何解决？

我猜当我点击页面时弹出窗口关闭时端口正在断开连接，但我对此不太确定。

Answer 1

当您单击其他地方时，弹出窗口不再作为文档存在。它就像一个已经关闭的选项卡。因此，不再有任何通信对象。

正确的修复方法是改为与后台页面通信，或者使用非易失性chrome.storage。然后，当弹出窗口打开时，您可以使用任一信息源来显示内容。

"Attempting to use a disconnected port object" 在 Chrome 扩展中从内容向弹出窗口发送消息时

"Attempting to use a disconnected port object" while sending message from content to popup in Chrome extension

javascript

message

google-chrome-extension