Asynchronous Message Sending In Google Chrome Extension Popup

Question

I have been researching asynchronous function calls and how to set variables to values from them and have had a lot of trouble with it. I want to create a port to message with my file content.js on the extension.

To do this I need to receive the tab of the window that I have open, and use its attribute id in the chrome.tabs.connect() function. This implementation fails to reach any console.log() calls but I don't understand asynchronous programming well enough to understand. Can anyone help with this? My problem is that the two files aren't communicating, so the port isn't opening.

<script language = "Javascript">
    function foo(callback){
        var port = chrome.tabs.connect(chrome.tabs.query({ currentWindow: true, active: true }, function(tabs) {
            //sets curTab to current tab
            console.log(tabs[0]);
            var curTab;
            setTimeout(function(tabs) {
                curTab = tabs[0];
                console.log(curTab);
            }, 5000);

        }),{name: "mode"})

         //both files are preset to this so no need to message
        var mode = "on";

        document.getElementById("stop").onclick = function(){
            if(mode === "off")
                mode = "on";
            else
                mode = "off";
            setMode();
            console.log("clikityclik");
        };


        console.log(mode);


        function setMode(){
            /*sends message to port*/
            if(port)
                port.postMessage({newMode: mode});
            else{
                console.log("error: port not created");
            }
        }   
    }

the relevant code from my content.js file is below. I call this function once

function getMode(){
    /*receives message from port
    **communicates with sandboxed.html
    */
    chrome.runtime.onConnect.addListener(function(port) {
        console.assert(port.name == "mode");
        port.onMessage.addListener(function(msg) {
            if (msg.newMode){
                mode = msg.newMode;
                console.log("Mesage received: "+mode);
            }
            else
                console.log("error receiving new mode, last mode was: " + mode);
        });
    });

}

The goal of this program is for the first script to send messages to the content.js when a div is clicked and for the 'content.js' file to receive those messages whenever they are sent.

Answer 1

the solution was to make a function that creates the port, with an input of tab. Basically, getTab will try to get the the value of the tab, and if we do have a tab it will run the callback function which is createPort which contains the information necessary to create the port and also the event handler for the click on the div .

function getTab(callback){
    chrome.tabs.query({ currentWindow: true, active: true }, function(tabs) {
        console.log(tabs[0]);
        callback(tabs[0]);
    });
}   

function createPort(tab){
    var port = chrome.tabs.connect(tab.id,{name: "mode"});

    document.getElementById("stop").onclick = function(){
        if(mode === "off")
            mode = "on";
        else
            mode = "off";
        setMode(port);
        console.log("clikityclik");
    };
}
var mode = "on"; //mode is preset to on in content.js
getTab(createPort);