使Chrome扩展的背景功能同步

Question

已更新:这是@ViewSource解决方案，这是正确的，除了你需要在background.js中返回true，如所示。

我有一个问题，在我的chrome扩展设计，我找不到一个修复无论多少方式我配置它。

在我的pop - up.js中，我有一个按钮，一个按钮点击事件，像这样:

document.getElementById('btnUpload').addEventListener('click', function() {
    sendDocMsg(windowUrl);
});
}
function sendDocMsg() {
    chrome.runtime.sendMessage({url: decodeURIComponent(windowUrl)},     
    function(response){
        currentHTML = response.data;
 });

在后台我有一个处理程序:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse)    {
     var url= message.url;
     var doc = null;
     script = getScript(url);
     if(script!=null) {
        chrome.tabs.query({active: true, currentWindow: true},     function(tabs){
           chrome.tabs.sendMessage(tabs[0].id, {action: "getDocument", data:script}, 
               function(response) {
                  doc=response.data;
                  sendResponse({data: doc});
           });  
        });
     }  
return true;           

});

应该将数据从内容页发送回popup.js(通过背景页)，但出于某种原因，我得到:

Error in event handler for (unknown): TypeError: Cannot read property 'data'     of undefined
at chrome-extension://kpcmhhlcnclcnahkpjpaejaccponfble/popup.js:125:31

我在后台设置了一个断点，并且在响应上设置了正确的数据。我最初有一个函数调用从弹出到后台使用chrome.extension.getBackgroundPage ()

因为我读到这是弹窗联系后台的首选方式，但这会引起其他问题。

谁能看到为什么数据会返回到弹出窗口。js请?

Answer 1

扩展内的通信使用消息传递工作。使用背景作为内容脚本和弹出窗口之间的中间人。

1. 使用chrome.runtime.sendMessage从弹出窗口调用背景页面。
2. 使用chrome.runtime.onMessage.addListener在后台页面添加监听器
3. 在监听器中插入调用内容脚本。
4. 通过回调函数内部的sendResponse()向弹出窗口发送响应。

你的新代码应该看起来像这样:

popup.js:

chrome.runtime.sendMessage({url: decodeURIComponent(windowUrl)}, function(response){
  currentHTML = response.data;
});

background.js:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
     var url= message.url;
     var doc = null;
     script = getScript(url);
     if(script!=null) {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
           chrome.tabs.sendMessage(tabs[0].id, {action: "getDocument", data:script}, 
               function(response) {
                  doc=response.data;
                  sendResponse({data: doc});
           });  
        });
     }     
     return true;        
});