Question

尝试构建一个简单的Chrome扩展程序，以输出localStorage的全部内容。

它应该有多难？花了几个小时研究和尝试，仍然不起作用:(

感谢您的帮助！

例如：

function load() {
    chrome.storage.local.get(null, function(items) {
    var allKeys = Object.keys(items);
    alert(allKeys.count);
  });
}
document.addEventListener('DOMContentLoaded', () => {
  load();
});

输出'undefined'

我试过的其他一些方法实际上包含了一个对象，但我无法用它做任何事情（没有计数/长度，没有JSON.stringify，没有toString（）等）。

清单：

"permissions": [
    "activeTab",
    "storage",
    "tabs",
    "http://*/*",
    "https://*/*",
    "chrome://favicon/"
  ]

如何在我的扩展程序弹出窗口中输出整个localStorage？

请帮忙！

Answer 1

你能试试allKeys.length吗？

Object.keys(items)会返回一个数组。默认情况下，数组没有属性count。我想你的意思是length。

如果您需要网页的本地存储（选项卡中加载的域），而不是扩展页的本地存储，我认为您不能这样做。

IvánNokonoko有一个很好的观点，你需要注入脚本以便与加载的网页进行交互，但问题是注入的脚本被强制在隔离的环境中运行，您只能访问DOM树，但无法访问原始JS环境，因此您可以获得的localStorage变量是您自己的隔离环境中的变量，而不是原始变量。

引自Chrome Content Scripts API：

但是，内容脚本有一些限制。他们不能：


使用由网页或其他内容脚本定义的变量或函数

我相信注入代码与内容脚本具有相同的重新启发。

我认为此限制是出于安全考虑。将DOM树暴露给扩展是可以的，在最坏的情况下，扩展会弄乱视图。但是如果将JS env（例如本地存储）暴露给扩展，那么它可能是危险的，因为扩展能够访问/篡改数据。

Answer 2

要显示当前活动标签的localStorage，请尝试：

chrome.tabs.executeScript({code:'JSON.stringify(localStorage)'},function(result) {
    console.log(JSON.parse(result[0]));
});

工作示例：

<强> popup.html

<body>
    <div id=ls></div>
    <script src="popup.js"></script>
</body>

<强> popup.js

chrome.tabs.executeScript({code:'JSON.stringify(localStorage)'}, res => {
    var ls = document.querySelector("#ls"), lsObj = JSON.parse(res[0]), lsHtml = "";
    for (var key in lsObj)
        lsHtml += "<p>" + key + " : " + lsObj[key] + "</p>";
    ls.innerHTML = lsHtml ? lsHtml : "The active tab has nothing in localStorage";
});

Chrome扩展程序：chrome.storage.local.get头疼

2 个答案: