如何正确地将数据传递给 contentscript？

Question

我想解决以下问题： 我有一个弹出窗口，在popup.html 中有一个选择标签：

<select id="chart_select">
                                <option id="chart_0" value="default">Select One</option>
                                <option id="chart_1" value="table_1">DISPLAY CLIENT VERSION USAGE CHART</option>
                                <option id="chart_2" value="table_2">DISPLAY MOST ACTIVE REALMS CHART</option>
                                <option id="chart_3" value="table_3">DISPLAY MOST ACTIVE USERS CHART</option>
                                <option id="chart_4" value="table_4">DISPLAY AVERAGE USER FRAMERATE CHART</option>
                                <option id="chart_5" value="table_5">DISPLAY AVERAGE REALM FRAMERATE CHART</option>
                                <option id="chart_6" value="table_6">DISPLAY USER LOGGED IN '' TIMES CHART</option>
                                <option id="chart_7" value="table_7">DISPLAY LOGINS per ORGANISATION</option>
                            </select>

所以，我将所选值保存到localStorage['thetable']。例如，我选择 DISPLAY LOGINS per ORGANISATION ，然后将 "table_7" 保存到本地存储。

然后，在background.html 中，我想将数据从本地存储传递到我的内容脚本，如下所示：

if(localStorage.getItem('thetable') != ""){
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {thetable: localStorage.getItem('thetable') }, function(response) {
            if(response.dom != ""){
                localStorage.setItem('thedom',response.dom);
            }
        });
    });
} 

在此之后，我的 contentscript 应该捕获请求，并返回一个带有 dom 的响应，该 dom 由一个 id 指定，存储在 localStorage('thetable') 中。

contentscript.js:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.thetable != "") {
        sendResponse({dom: document.getElementById(request.thetable).innerHTML});
    }
}); 

注意： request.thetable 应该是“table_7”。 dom 应该是站点的<table id="table_7"> 的innerHTML。它存在，我制作了所有这些元素。

还有一个附加信息，我将选择值保存在另一个文件中，popup.js，并将“table_7”保存到此文件中的 localStorage。但是 localStorage 也可以从 background.html 获得，所以我认为这应该不是问题。

---

流程：

• 我选择了一些东西（例如：显示每个组织的登录信息）
• 我点击popup.html中的"Save Btn"，然后popup.js保存 “table_7”到本地存储

• 然后我点击popup.html 中的“Run Btn”，然后popup.js 重新加载 当前标签：

  chrome.tabs.getSelected(null, function(tab) { chrome.tabs.reload(tab.id); });

  我这样做，因为我的内容脚本仅在选项卡时收集信息 重新加载。

• 重新加载后，我认为background.html 应该发送请求到 contentscript 带有信息 ("table_7")

• contentscript 从站点获取 DOM，f.e: document.getElementById("table_7").innerHTML 并将其发送回后台页面。

问题是，我在运行流程时收到此警报：

谁能帮助我，如何解决这个问题？ :/ 谢谢

Answer 1

我找到了解决办法：

popup.js： 使用保存按钮，我保存选择值 (="*table_7*")，然后重新加载选定的选项卡：

$("#save_btn").click(function(){
        if($("#chart_select :selected").val()!="default"){
            var sel_val = $("#chart_select :selected").val();
            localStorage.setItem('thetable',sel_val);
            chrome.tabs.getSelected(null,function(tab){
                chrome.tabs.reload(tab.id);
            });
        }
    });

• 网站一重新加载，content_script.js 就会获得焦点：

content_script.js：

// SEND DOM structure to the background page
chrome.extension.sendRequest({ action: "waiting" },function(response){
    if(response){
        chrome.extension.sendRequest({ dom: document.getElementById(response.thetable).innerHTML });
    }
});

• 此代码向后台页面发送“等待”请求，等待响应，即响应已到来，代码获取页面 DOM，并将其发送回来。 所以它是一个嵌套的 sendRequest。

background.html：

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.action=="waiting"){
        sendResponse({thetable:localStorage.getItem('thetable')});
        chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
            if(request.dom){
                localStorage.setItem('thedom',request.dom);
            }
        }); 
    }   
}); 

• 如果等待请求到来，注意：等待是由内容脚本发送的，发回 id ("table_7") 注意：table_7 被保存到 localStorage popup.js，返回id(thetable)后，代码监听响应，如果响应来了，保存到localStorage。之后，“table_7”的 DOM 被保存。

完成工作，我在 popup.js 中处理数据。 注意：数据现在在localStorage('thedom')