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

问题

So, I need to pass messages from popup to content and vice versa. Currently here is what I am doing now, but this does not work how it's supposed to work:

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"});
    });
}

and 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
    };
});

What I need is message to be sent when user releases the left mouse button. Here is what happens: when I am clicking a button in my popup.html, the alert with the text "Hello" shows, but when I am clicking anywhere in the page after that, I am getting an error: Uncaught Error: Attempting to use a disconnected port object

What am I doing wrong and how can I fix this?

My guess the port is disconnecting when popup closes when I click on page, but I'm not really sure about this.

回答1:

The popup ceases to exist as a document when you click elsewhere. It's like a tab that has closed. As such, there's no longer anything to communicate to.

The proper way to fix it is to communicate with the background page instead, or use the non-volatile chrome.storage. Then, when the popup is opened, you can use either information source to show content.

来源：https://stackoverflow.com/questions/35072377/attempting-to-use-a-disconnected-port-object-while-sending-message-from-conten

标签

javascript

google-chrome-extension

message