Message-passing to background.html from popup.js and content-scripts

StackOverflow https://stackoverflow.com/questions/13895007

Question

I'm trying to get the popup/popopen menu to show the user different content based off the current page-URL but can't get a connection. I've read that only background.html has access to current-tabs' URLs in the Chrome framework, so I'm trying to get it to tell my content-script and my popup.js this via message-passing -- background.html will receive a message and will include the right info in the response. Popup should be able to use getBackgroundPage() but content-injection scripts are not allowed to so I'd like to use messaging for both and have a common solution.

So... the console-messages about failed connections are buried in some random implementation code which I can't even view, namely: miscellaneous_bindings:236 or miscellaneous_bindings:235, depending on the arguments to the cal. Trying to view where we hit gets me this:

The webpage at chrome-devtools://devtools/miscellaneous_bindings might be temporarily down or it may have moved permanently to a new web address.

I'm convinced I'm doing something silly or else my system's messed up but I can't figure out which. Most of the examples and questions I've seen either require beta-release channel functionality or use v1.0 manifests, use deprecated functions (questions from like 2011), or don't have accepted answers. I'm with Chrome 24.0.1312.40 m and I've disabled other extensions.

Here's how we're set up...

popup.html 

<!doctype html>
<html>
    <head>
        <title>Working title popup</title>
        <script src="popup.js">
            // nothing allowed in here
        </script>
    </head>
    <body>

    <form>
        <fieldset>
        <button>Demo</button>
        <!--^ push to try again to get response string from background -->
        </fieldset>
    </form>

    </body>
</html>

popup.js: 

asky();

function asky(){
        catchersMit=null;
        console.log("Going to get info.");
        // Below causing Port error: 
        //"Could not establish connection. Receiving end does not exist.":
        chrome.extension.sendMessage({msg:"need some info"} //arg1
                                     ,function(response){   //arg2
                                        alert(reponse.msg);
                                        //^ yields undefined in alert window
                                        catchersMit=response;}
                                    );
        //_*_ catchersMit still appears undefined out here.
}

background.html: 

<!doctype html>
<html><head><script type="text/javascript">
chrome.extension.onMessage.addListener(

function(message,sender,sendResponse){
                sendResponse( {msg: "info you wanted"} );
} // anonymous (1st parameter) function OUT

); // onRequest listener OUT
</script></head><body></body></html>

manifest.json: 

{
  "name": "Extension Working Title",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Coolest functionality.",
        "browser_action": {
    "default_icon": "lnr_icon.png",
        "default_popup": "popup.html"
  },

  "permissions": [ "tabs","http://*/*" ],
  "background": { "page": "background.html" }
}

Right now I'm just working with popup.js as I find it easier to debug, but the resolution to this issue should not be different between that and the content-script if I'm not mistaken.

Was it helpful?

Solution

Assuming you need current browsing tab URL from your problem statement(I'm trying to get the popup/popopen menu to show the user different content based off the current page-URL), the following code will fetch the current Browsing tab URL, you can play on it for filtering required information.

chrome.tabs.query({
            "status": "complete",
            "currentWindow": true,
            "active": true
        }, function (tabs) {
            for(tab in tabs)console.log(tabs[tab].url);
});

There is no need of added message passing between background and browser action HTML page.

Content Scripts have already access to URL through window.location.href

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top