Question

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

我的Chrome扩展程序设计存在问题，无论我配置多少种方法，都无法找到解决方法。

在我的popup.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（）

因为我读到这是弹出窗口联系背景的首选方式，但这导致了其他问题。

任何人都可以看到为什么数据会被返回到popup.js吗？

Answer 1

扩展程序内的通信使用Message Passing。使用背景作为内容脚本和弹出窗口之间的中间人。

使用chrome.runtime.sendMessage
使用chrome.runtime.onMessage.addListener在后台页面添加侦听器。
在侦听器内插入对内容脚本的调用。
使用回调函数中的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;        
});

使Chrome扩展程序后台功能同步

1 个答案: