Question

I am writing a Google extension. Here my content script modifies a page based on a list of keywords requested from background. But the new innerHTML does not show up on the screen. I’ve kluged it with an alert so I can see the keywords before deciding to actually send a message, but it is not how the routine should work. Here’s the code:

// MESSAGE.JS //
//alert("Message Page");

var keyWordList= new Array();
var firstMessage="Hello!";
var contentMessage=document.getElementById("message");
contentMessage.value=firstMessage;
var msgComments=document.getElementsByClassName("comment");
msgComments[1].value="Hello Worlds!";//marker to see what happens

chrome.extension.sendRequest({cmd: "sendKeyWords"}, function(response) {
    keyWordList=response.keyWordsFound;
    //alert(keyWordList.length+" key words.");//did we get any keywords back?
    var keyWords="";
    for (var i = 0; i<keyWordList.length; ++i)
    {
        keyWords=keyWords+" "+keyWordList[i];
    }
    //alert (keyWords);//let's see what we got
    document.getElementsByClassName("comment")[1].firstChild.innerHTML=keyWords;
    alert (document.getElementsByClassName("comment")[1].firstChild.innerHTML);// this is a band aid - keyWords does not show up in tab
});

document.onclick= function(event) {
   //only one button to click in page
    document.onload=self.close();
};

What do I have to do so that the text area that is modified actually appears in the tab?

Answer 1

(Answering my own question) This problem really has two parts. The simplest part is that I was trying to modify a text node by setting its value like this:

msgComments1.value=”Hello Worlds!”; //marker to see what happens

To make it work, simply set the innerHTML to a string value like this:

msgComment1.innerHTML=”Hello Worlds!”; //now it works.

The second part of the problem is that the asynchronous call to chrome.extension.sendRequest requires a callback to update the innerHTML when the reply is received. I posted a question in this regard earlier and have answered it myself after finding a solution in an previous post by @serg.