google chrome扩展更新文本响应后回调 [英] google chrome extension update text after response callback

问题描述

我在撰写Google Chrome扩充功能。我已经到达阶段，我可以传递消息来回容易，但我遇到麻烦使用响应回调。我的后台页面打开一个消息页面，然后消息页面从后台请求更多信息。当消息页面接收到响应时，我想根据响应，使用自定义文本替换消息页面上的一些标准文本。代码如下：

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.

推荐答案

我可以在阅读@serg的上一个回答后回答问题的第一部分。该问题源于sendRequest的异步性质。需要回调。这是代码的工作原理：

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

我再次感谢@serg。谢谢。

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

这篇关于google chrome扩展更新文本响应后回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！