Chrome message passing error : Attempting to use a disconnected port object

问题:

My chrome extension uses long-lived 'Port' object for message passing between 'content script' and 'popup' page. The 'popup' is able to send a message to the 'content script' event listener. But, the 'Port' object in the 'content script' is unable to send message to the 'popup' page.

var port = chrome.extension.connect({"name":"swap"});  // listener for incoming connections chrome.extension.onConnect.addListener(function( incomingPort ){      // listener on incoming messages     incomingPort.onMessage.addListener(function( msg ){          if( msg.command === 'get_scripts' ){             //do work          }          var scrs = { 'scripts' : 'name' };         var result = port.postMessage( scrs );      }); }); 

When executing 'port.postMessage(Object obj)' , the plugin throws the following Error,

Error in event handler for 'undefined': Attempting to use a disconnected port object   Error: Attempting to use a disconnected port object at PortImpl.postMessage (miscellaneous_bindings:54:5) at chrome-extension://loiamkgdhfjdlkcpehnebipeinpcicfj/swap.js:27:31 at [object Object].dispatch (event_bindings:203:41) at Object.<anonymous> (miscellaneous_bindings:250:22) event_bindings:207 

I have tried using 'Port' object and 'incomingPort' object, both throw the same 'Error'. It feels like it has to do with the scope of the pre-created 'Port' object.

The plugin code is available at this git repository https://github.com/snambi/chrome_plugin/tree/master/src/chrome

What is wrong in this plugin?

回答1:

I've looked through your code, and it makes no sense to me:

• Did you know that a port has an onMessage and postMessage method at both sides? One single port is sufficient to communicate in both directions.
• Communicating between a popup and a content script in your way is going to be terribly hard. It's hard to launch the content script and the pop-up simultaneously.

Since your extension has no background page, and a relatively useless content script, I assume that your extension's core is the browser action popup window. Instead of injecting a content script by default, you can also use the following flow:

1. User clicks on browser action
2. popup.html and popup.js are executed.
   • Add an event listener to chrome.runtime.onConnect, to receive port request.
   • Use chrome.tabs.query({active:true, windowId:-2}, callback_function); to select the current window in the current tab. (-2 is the chrome.windows.WINDOW_ID_CURRENT constant)
   • callback_function receives one argument: An array of tabs. Since it's impossible that the current window has no tabs, select the first element of the array: var tab = tabs[0];
   • Now, use chrome.tabs.executeScript(tab.id, {file:'swap.js'}); to execute a content script.
   • Within the content script, connect to the popup using chrome.runtime.connect.
   • Your logic here.

I've also seen that you're using port == null to check whether a port valid or not. If you do that, make sure that the comparison makes sense, by voiding the variable when the port is disconnected:

var port; chrome.runtime.onConnect.addListener(function(_port) {     // ...optional validation of port.name...      port = _port;     port.onMessage.addListener(function(message) { /* .. logic .. */});     port.onDisconnect.addListener(function() {         port = null;     }); }); 

文章来源: Chrome message passing error : Attempting to use a disconnected port object