2015-04-05 40 views
0

我試圖構建一個包含從彈出腳本向內容腳本發送數據請求的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 ...函數sendResponse迴應將回到背景。 任何人都可以幫助我理解是什麼導致了這種行爲,我該如何解決?

回答

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即可。

相關問題