简体   繁体   中英

modified innerHTML does not show on page

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?

(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:

msgComments 1 .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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM