从 localStorage 获取 chrome 选项卡和窗口

Question

我正在尝试访问 Google Chrome 扩展程序中的选项卡和 Windows 数据。我显然已经设法获取此信息并通过 localStorage 加载它，但我不知道如何使用这些信息，因为我似乎无法通过 JSON 解析将数据解析回对象数组。

代码如下：

<html>
<head>
<script>

tabs = {};
tabIds = [];

focusedWindowId = undefined;
currentWindowId = undefined;
localStorage.windowsTabsArray = undefined;

function loadItUp() {
  return arrays = chrome.windows.getAll({ populate: true }, function(windowList) {
    tabs = {};
    tabIds = [];
    var groupsarr = new Array();
    var tabsarr = new Array();
    var groupstabs = new Array();
    for (var i = 0; i < windowList.length; i++) {
      windowList[i].current = (windowList[i].id == currentWindowId);
      windowList[i].focused = (windowList[i].id == focusedWindowId);
      groupsarr[windowList[i].id] = "Untitled"+i;


      for (var j = 0; j < windowList[i].tabs.length; j++) {
        tabsarr[windowList[i].tabs[j].id] = windowList[i].tabs[j];
        groupstabs[windowList[i].id] = windowList[i].tabs;
      }
    }
      localStorage.groupsArray = JSON.stringify(groupsarr);
      localStorage.tabsArray = JSON.stringify(tabsarr);
      localStorage.groupsTabsArray = JSON.stringify(groupstabs);
  });
}

function addGroup() {
    var name = prompt("NEW_GROUP_NAME");
    var groupsarr = JSON.parse(localStorage.groupsArray);
    groupsarr.push(name);
    localStorage.groupsArray = JSON.stringify(groupsarr);
}

</script>
</head>
  <body onload="loadItUp()">
    WINDOW_QTY:
    <script type="text/javascript">
        var wArray = JSON.parse(localStorage.groupsArray);
        document.write(wArray);
    </script>
    <br/>
    TABS_QTY:
    <script type="text/javascript">
        var tArray = JSON.parse(localStorage.tabsArray)
        document.write(tArray);
    </script>
    <br/>
    WINDOWS_TABS_QTY:
    <script type="text/javascript">
        document.write(JSON.parse(localStorage.groupsTabsArray));
    </script>
    <br/>
  </body>
</html>

Answer 1

1)

页面显示一堆[object Object]。

这是意料之中的，当您调用document.write(tArray); 时，对象会隐式转换为字符串；没有自定义 toString 实现的自定义对象将转换为“[object Object]”。这并不意味着它们没有被“解析”。

要检查对象，您可以使用开发者工具。您可以从扩展页面打开背景页面的检查器，如果您让页面在选项卡中打开（例如，如果您使用 chrome_url_overrides），您可以像检查常规网页一样检查它。

如果您将 document.write 调用替换为 console.log()，您将能够在开发者工具的控制台中检查对象。

2)

您是否意识到标签中的 document.write 调用在 loadItUp() 之前运行？

在 loadItUp() 之前不知道页面代码正在执行。

脚本在被解析器插入到 DOM 的那一刻被执行（除非它们是 deferred 或 async） - 请参阅 MDC documentation on <script>， - 而各种加载事件，特别是 <body onload=...>，是页面解析完成后执行。

所以现在您的document.write 调用会打印上次加载页面时保存到localStorage 的值，这可能不是您想要的。

您应该使用element.innerHTML 或element.textContent 来更新页面的文本，而不是使用内联脚本中的document.write()。有很多方法可以引用您需要的元素，document.getElementById() 就是其中之一。

3)

最后，请注意，并非每个对象都可以保存到localStorage，然后从localStorage 加载。例如，方法将无法在往返过程中存活，并且对象的身份不会被保留，这意味着您从 Chrome API 获得的对象在您将其存储在 localStorage 并重新加载后将不再是同一个对象.

你没有解释为什么你认为你需要localStorage - 当你想在页面关闭并重新加载后保留一些数据时使用它 - 所以也许你真的不需要它？