0

我想解决以下问题：我有一个弹出窗口，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 应该捕获请求，并用存储在 localStorage('thetable') 中的 id 指定的 dom 发送回响应。

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 获得，所以我认为这不应该是一个问题。

流量：

  • 我选择了一些东西（fe: DISPLAY LOGINS per ORGANISATION）
  • 我点击"Save Btn"，popup.html然后popup.js将“table_7”保存到localStorage

  • 然后我单击“运行 Btn” popup.html，然后popup.js重新加载当前选项卡：

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

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

  • 重新加载后，我认为background.html应该将请求发送到 contentscript信息（“table_7”）

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

问题是，当我运行流程时，我会收到此警报： 在此处输入图像描述

有人可以帮助我，如何解决这个问题？：/ 谢谢

4

1 回答 1

0

我找到了一个解决方案：

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。

背景.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 由 popup.js 保存到 localStorage，发回 id(thetable) 后，代码监听响应，如果响应已经到来，请将其保存到 localStorage。在此之后，“table_7”的 DOM 被保存。

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

于 2012-05-05T19:14:07.547 回答