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"保存到localstorage。

然后，在background.html我希望将数据从localstorage传递到我的内容脚本，如下所示：

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);
            }
        });
    });
}

在此之后，我的脚本应该捕获请求，然后发送一个带有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获得，所以我认为这不应该是一个问题。

流程：

我选择了一些东西（f.e：每个组织显示一次登录）
点击"Save Btn"中的popup.html，然后popup.js保存 “table_7”到localStorage
然后点击popup.html中的“运行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并将其发送回背景页面。

问题是，当我运行流程时，我收到此警报： enter image description here

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

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')

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

1 个答案: