Sending a message from popup.js to the Chrome extension on background.js

Question

What is the correct way to send a message (and get an answer) to background.js from popup.js in a Chrome extension? Every method that I try ends up with an error that:

"Port: connection failed. End of reception does not exist.

I would prefer to use chrome.extension.sendMessage () via chrome.extension.connect () with port.postMessage (), but none of the methods seem to work.

What I'm trying to do is call a button in popup.html to call in javascript in popup.js, which calls background.js to get information about currentTab (), which was topMost (i.e.: to get current URL string to display in popup.html)

Right now in popup.js (connected to a button action) I have:

function getURL() { chrome.extension.sendMessage({greeting: "GetURL"}, function(response) { tabURL = response.navURL }); $("#tabURL").text(tabURL); } 

In background.js I have:

 chrome.extension.onMessage.addListener( function(request,sender,sendResponse) { if( request.greeting == "GetURL" ) { var tabURL = "Not set yet"; chrome.tabs.getCurrent(function(tab){ tabURL = tab.url; }); sendResponse( {navURL:tabURL} ); } } 

Any ideas?

Answer 1

To clarify, we are talking about the relationship between the pop-up page from the Action browser and the background of the script?

In any case, you have quite a few errors in the code.

The first completely ignores the fact that all callbacks in the chrome api are asynchronous .

In the background page

  var tabURL = "Not set yet"; chrome.tabs.getCurrent(function(tab){ tabURL = tab.url; }); //this will be invoked somewhere in the future sendResponse( {navURL:tabURL} ); //navUrl will be always Not set yet because callback of getCurrent hasn't been called yet 

Same thing in popup.js

 chrome.runtime.sendMessage({greeting: "GetURL"}, function(response) { tabURL = response.navURL });//callback will be invoked somewhere in the future $("#tabURL").text(tabURL)//tabURL will display something totally different from what you have been expected 

The second error is that chrome.tabs.getCurrent does not give you the current tab selected by the user in the main window. docs says:

Gets the tab with which this script call is executed. It can be undefined if called from a context without tabs (for example: background page or popup).

This way you will get undefined for all your requests because you are calling it on the background image. What you need to do is use the chrome.tabs.query method to get the active tabs.

So, after fixing all the problems, the new code should look something like this:

background.js

 chrome.runtime.onMessage.addListener( function(request,sender,sendResponse) { if( request.greeting === "GetURL" ) { var tabURL = "Not set yet"; chrome.tabs.query({active:true},function(tabs){ if(tabs.length === 0) { sendResponse({}); return; } tabURL = tabs[0].url; sendResponse( {navURL:tabURL} ); }); } } 

popup.js

 function getURL() { chrome.runtime.sendMessage({greeting: "GetURL"}, function (response) { tabURL = response.navURL; $("#tabURL").text(tabURL); }); }