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），则可以像检查常规网页一样进行检查。

如果用console.log()替换document.write调用，您将能够在Developer Tools的控制台中检查对象。

2）

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


不知道在loadItUp（）之前页面代码正在执行。

脚本在解析器插入DOM时执行（除非它们是defer红色或async） - 请参阅MDC documentation on <script>， - 各种加载事件，特定<body onload=...>，在页面完成解析后执行。

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

您应该使用element.innerHTML或element.textContent来更新网页的文字，而不是使用内嵌脚本中的document.write()。有很多方法可以获得所需元素的引用，document.getElementById()就是一个。

3）

最后，请注意，并非每个对象都可以保存到localStorage，然后从localStorage加载。例如，方法将无法在往返过程中存活，并且不会保留对象的标识，这意味着您将Chrome API中的对象存储在localStorage并加载后不会是同一个对象它回来了。

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

从localStorage获取chrome选项卡和窗口

1 个答案: