如何动态更改背景.js以反映用户在版式中的设置？

Question

所以我现在正在开发一个chrome扩展，以便被引入Web开发的世界。我遇到了一个我似乎无法理解的问题。目前，我的背景.js使用以下方法获取所有打开的窗口以及每个窗口中打开的选项卡：

function getAllOpenWindows(winData) {
  var tabs = [];
  for (var i in winData) {
    /*if (winData[i].focused === true) {*/
        var winTabs = winData[i].tabs;
        var totTabs = winTabs.length;
        for (var j=0; j<totTabs;j++) {
          tabs.push(winTabs[j].url);
        }
    /*}*/
  }
  console.log(tabs);
}

这实际上是由 BPATEL 在这里发布的。现在，正如您看到注释行所示，它允许我决定选项卡是仅取自当前焦点窗口还是所有窗口。我的问题是，一旦扩展程序加载到 chrome 中并被积极使用，我该如何动态更改此设置？因此，如果用户进入选项并说他们只想要所有窗口，我将能够向我的后台传递一条消息.js说"嘿，使用所有窗口功能而不是当前聚焦的窗口"。我知道理想情况下应该在这里使用 2 个单独的函数，这只是一个关于如何完成的示例。谢谢吨！

Answer 1

您可以使用本地存储来保存任何用户设置。选项页和后台页共享相同的本地存储，因此您可以从选项页更新设置并从后台页访问值。

选项.html

<input type="checkbox" id="windowType" value="All">Check all windows</input>
<input type="button" id="saveSettings" value="Save">Save</input>

选项.js

document.getElementById("saveSettings").onclick = save_settings;
function save_settings()
{
   var checkAll = document.getElementById("windowType").checked;
   localStorage.setItem("check_all_windows",checkAll);
}

当选项页面加载时，您可以使用类似的函数将复选框的值更新为当前值。

背景.js

function getAllOpenWindows(winData) {
  var tabs = [];
  for (var i in winData) {
    var checkAll = (localStorage.getItem("check_all_windows") == "true");
    if (checkAll || winData[i].focused === true) {
        var winTabs = winData[i].tabs;
        var totTabs = winTabs.length;
        for (var j=0; j<totTabs;j++) {
          tabs.push(winTabs[j].url);
        }
    }
  }
  console.log(tabs);
}

在后台.js，你可以从localStorage获取同一键的值，并检查它是设置为true还是false。请记住，localStorage 会将值存储为字符串，因此您需要将其与正确的字符串进行比较 - if（"false"） 的计算结果为 true。