chrome扩展中具有长期连接的“尝试使用断开连接的端口对象”

Question

i get this error Uncaught Error: Attempting to use a disconnected port object

when i opend my popup page after the first time, i have a long-lived connections between

content script<->background page<->popup page.

When i click on browser action icon , popup page will get some information from server through background page to initialize.

All things work fine at the first click, but if i close the popup and click it again, it just cant get the information from background page.

here is my code

popup page

window.onload = function() {

var port = chrome.runtime.connect({name: "stadium"});

chrome.tabs.query({ currentWindow: true, active: true }, function callback(tabs){
  console.log("send TabID to background page");
  port.postMessage({"method":"sendTabId","content": tabs[0].id});
});


port.postMessage({"method" : "initialPopup"});//initilaize request

port.onMessage.addListener(function(msg) {
  console.log("somthing");
    if (msg.method == "updatePage"){
               initialize....
             }
    else if(...){...}
 });

and background page

    var socket = io.connect('http://localhost:3700/');

    chrome.tabs.onRemoved.addListener(function(tabId,removeInfo){

      if(tabId==stadiumTabId){

        //change to the original style popup page
        chrome.browserAction.setPopup({"popup":"../pages/popup_out_guest.html"});  

      }

    });

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

      console.assert(port.name == "stadium"); 

      port.onMessage.addListener(function(msg) {  

        if (msg.method == "initialPopup"){  //get the initilaize request

            socket.emit('updateMatchInfo',"haha");

            socket.on('getUpdate',function(matchInfo){
                       console.log("background page get data from server");
                        port.postMessage({"method":"updatePage","content": matchInfo});                         
                      });
        }

        else if (msg.method == "something"){ 
           //insert content scripts
          chrome.tabs.executeScript({file: 'js/content_scripts.js', allFrames: true});

          //change to another popup page style
          chrome.browserAction.setPopup({"popup":"../pages/popup_in_guest.html"});               
        }
  });//port.onMessage.addListener

});//onConnect.addListener

the error occurs at this line in background page

 port.postMessage({"method":"updatePage","content": matchInfo}); 

i've checked that server send the data to background page correctly, but just can't figure out the error.

thanks for help !!

Answer 1

Are you using by the way Awesome Screenshot ? I had that error message so often but once I disable that extension the message went away :)

Answer 2

Whenever you close the popup, the page it displays is also closed / destroyed, unlike the background page that's always running.

So a long-lived connection breaks, as one of the sides ceases to exist.

You should switch from using long-lived connection to simple messages. As it opens, the popup requests the current state, and the background page broadcasts state updates. If the popup is not listening to updates (because it's not open), no harm is done.