如何获取在弹出脚本到内容脚本之间发送的消息并返回答案

【问题标题】：How to get Messages sent between popup script to content script and back如何获取在弹出脚本到内容脚本之间发送的消息并返回
【发布时间】：2015-04-05 16:17:35
【问题描述】：

我正在尝试构建一个 chrome 扩展，该扩展涉及将数据请求从弹出脚本发送到内容脚本（通过后台脚本）分析内容脚本端的请求并发送回响应（再次通过后台脚本）。

弹窗脚本代码：

chrome.runtime.sendMessage({action:"getLanguages",data:"hi hi",}, function(response) {
    document.write(response.msg);
});

后台脚本：

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    var returnedLangs;
    if (request.action == "getLanguages"){
        returnedLangs = getLangs();
        alert("got langs " + returnedLangs);
        //sendResponse({msg: "goodbye"});
    }

});

function getLangs() {
    var langs; 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {action: "getLanguages"}, function(response) {
            langs = response.langs;
            alert(langs);
            return langs;
        });
    });
}

内容脚本代码：

chrome.extension.onMessage.addListener( function(request, sender, sendResponse)
    {
        getLanguages(sendResponse,sendBackLangs);
    });

function getLanguages(sendResponse,callback) {
    var acceptLangs = [];
    chrome.i18n.getAcceptLanguages(function(langs) {
        langs.forEach( function(lang) {
            acceptLangs.push(lang);
        });
        callback(sendResponse,acceptLangs);
    });
}

function sendBackLangs(sendResponse, acceptedLangs) {
    sendResponse({langs: "acceptedLangs"});
}

使用当前内容脚本代码，不会将响应发送回后台，但如果我直接从 chrome.extension.onMessage... 函数发送响应，则响应将返回后台。谁能帮助我了解导致这种行为的原因以及如何解决？

【问题讨论】：

标签： javascript jquery html google-chrome-extension

【解决方案1】：

    chrome.tabs.sendMessage(tabs[0].id, {action: "getLanguages"}, function(response) {
        langs = response.langs;
        alert(langs);
        return langs; // <---- Return where?
    });

见上面的sn-p。您不能从异步回调中返回值。事实上，这个代码块只是在内部函数执行之前完成，getLangs() 返回undefined。

但是，您想做的事情是可行的。您可以将sendResponse 函数传递给稍后调用的回调；您只需向 Chrome 表明您稍后会调用它。

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    if (request.action == "getLanguages"){
        getLangs(sendResponse); // Pass the callback
        return true; // Indicates to Chrome to keep the message channel open
    }
});

function getLangs(callback) {
    var langs; 
    chrome.tabs.query(
        {active: true, currentWindow: true},
        function(tabs) {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {action: "getLanguages"},
                function(response) {
                    // Here it sends it to the content script
                    callback(response.langs); 
                }
            );
        }
    );
}

也就是说，绝对没有理由通过后台路由请求。只需在弹出窗口中直接输入tabs.query。

【讨论】：