javascript - 如何在弹出脚本和内容脚本之间发送消息

Question

我正在尝试构建一个 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... 函数发送响应，则响应将返回后台。谁能帮助我了解导致这种行为的原因以及如何解决它？

Answer 1

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

请参阅上面的代码片段。您无法从异步回调中返回值。事实上，此代码块只是在内部函数执行之前完成，并且 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 即可。