Question

I am writing a Google Chrome extension. I have reached the stage where I can pass messages back and forth readily but I am running into trouble with using the response callback. My background page opens a message page and then the message page requests more information from background. When the message page receives the response I want to replace some of the standard text on the message page with custom text based on the response. Here is the code:

chrome.extension.sendRequest({cmd: "sendKeyWords"}, function(response) {
    keyWordList=response.keyWordsFound;
        var keyWords="";
        for (var i = 0; i<keyWordList.length; ++i)
        {
            keyWords=keyWords+" "+keyWordList[i];
        }
        document.getElementsByClassName("comment")[1].firstChild.innerHTML=keyWords;
        alert (document.getElementsByClassName("comment")[1].firstChild.innerHTML);
});

FIRST QUESTION: This all seems to work fine but the text on the page doesn’t change. I am almost certainly because the callback completes after the page is finished loading and the rest of the code finishes before the callback completes, too. How do I update the page with the new text? Can I listen for the callback to complete or something like that?

SECOND QUESTION: The procedure I am pursuing first opens the message page and then the message page requests the keyword list from background. Since I always want the keyword list, it makes more sense to just send it when I create the tab. Can I do that? Here is the code from background that opens the message page:

//when request from detail page to open message page 
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.cmd == "openMessage") {
        console.log("Received Request to Open Message, Profile Score: "+request.keyWordsFound.length);
        keyWordList=request.keyWordsFound;
        chrome.tabs.create({url: request.url}, function(tab){
        msgTabId=tab.id; //needed to determine if message tab has later been closed
        chrome.tabs.executeScript(tab.id, {file: "message.js"});
        });
        console.log("Opening Message");
    }
});

Along the lines of the second question, I also tried this in background:

//when request from detail page to open message page 
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.cmd == "openMessage") {
        console.log("Received Request to Open Message, Profile Score: "+request.keyWordsFound.length);
        keyWordList=request.keyWordsFound;
        var keyWords="";
        for (var i = 0; i<keyWordList.length; ++i)
        {
            keyWords=keyWords+" "+keyWordList[i];
        }
        console.log(keyWords);
        chrome.tabs.create({url: request.url}, function(tab){
        msgTabId=tab.id; //needed to determine if message tab has later been closed
        chrome.tabs.executeScript(tab.id, {code: "document.getElementsByClassName('comment')[1].firstChild.innerHTML=keyWords;", file: "message.js"});
    });
        console.log("Opening Message");
    }
});

But this doesn’t work either, it just breaks and neither script is executed.

Answer 1

I can answer the first part of the question after reading a previous answer by @serg. The problem stems from the asynchronous nature of sendRequest. A callback is required. Here is the code that works:

function getKeyWords(action, callback){
    chrome.extension.sendRequest(
            {
                cmd: action
            },
            function(response)
            {
                callback(response.keyWordsFound);
            }
    );
}

var keyWords="";
getKeyWords("sendKeyWords", function(reply) {
    keyWordList=reply;

    for (var i = 0; i<keyWordList.length; ++i)
    {
        keyWords=keyWords+" "+keyWordList[i];
    }
    msgComment1.innerHTML="<strong>"+keyWords+"</strong>";
    console.log("reply is:", keyWords);
});

Once again, I am indebted to @serg. Thanks.