CODEWITHSUNDEEP
javascriptgoogle-chromeasynchronousgoogle-chrome-extension
Matthew Ciaramitaro
Matthew Ciaramitaro

Reputation: 1179

Asynchronous Message Sending In Google Chrome Extension Popup

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.

Upvotes: 1

Views: 416

Answers (1)

Matthew Ciaramitaro
Matthew Ciaramitaro

Reputation: 1179

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);

Upvotes: 1

Related Questions