如何在 Google Chrome 扩展程序中使用 HTML5 的 localStorage？答案

【问题标题】：How do I use HTML5's localStorage in a Google Chrome extension?如何在 Google Chrome 扩展程序中使用 HTML5 的 localStorage？
【发布时间】：2012-03-06 23:52:32
【问题描述】：

我正在尝试开发一个可与 Awesome New Tab Page 一起使用的扩展程序。我已经听从了作者对这封信的建议，但我添加到后台页面的任何脚本似乎都没有被执行。这是我的背景页面：

<script>
    var info = {
        poke: 1,
        width: 1,
        height: 1,
        path: "widget.html"
    }

    chrome.extension.onRequestExternal.addListener(function(request, sender, sendResponse) {
        if (request === "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-poke") {
            chrome.extension.sendRequest(
                sender.id,
                {
                    head: "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-pokeback",
                    body: info,
                }
            );
        }
    });

    function initSelectedTab() {
        localStorage.setItem("selectedTab", "Something");
    }

    initSelectedTab();
</script>

这里是 manifest.json：

{
    "update_url": "http://clients2.google.com/service/update2/crx",
    "background_page": "background.html",
    "name": "Test Widget",
    "description": "Test widget for mgmiemnjjchgkmgbeljfocdjjnpjnmcg.",
    "icons": {
        "128": "icon.png"
    },
    "version": "0.0.1"
}

这里是widget.html的相关部分：

<script>
    var selectedTab = localStorage.getItem("selectedTab");

    document.write(selectedTab);
</script>

每次，浏览器只显示空值。本地存储根本没有设置，这让我觉得后台页面完全断开了。是不是我的东西接线不正确？

【问题讨论】：

即使我的背景页面中只有 alert("Blah")，它什么也没做。啊，这让我发疯了。

标签： javascript html google-chrome google-chrome-extension local-storage

【解决方案1】：

如果我理解正确，后台页面正试图在 localStorage 中存储一些内容，然后将 widget.html 传递给任何请求的内容脚本/应用程序/扩展，然后它将读取存储在 localStorage 中的信息。

如果这是您尝试做的，那么问题可能出在 - 背景页面和内容脚本/其他应用程序/扩展无法直接访问彼此的 localStorage（这是 widget.html 在运行时所做的请求脚本/页面的沙箱）。您需要使用消息传递在后台页面和发送戳消息的脚本之间传递信息。

如果您只想检查后台页面是否响应，请在该页面中执行 console.log('something')，然后检查后台页面的开发人员工具窗口中的控制台上是否打印了 'something' .

【讨论】：

谢谢，@Adi B。我会试试看。
废话。 console.log() 在后台页面中不做任何事情。我试图在小部件页面中执行 chrome.extension.getBackgroundPage().console.log('foo') ，但它在控制台中给了我这个错误： Unsafe JavaScript attempt to access frame with URL chrome-extension://mgmiemnjjchgkmgbeljfocdjjnpjnmcg /background.html 来自带有 URL chrome-extension://lhdhihamoggeikbfdhkfffkplmmbaado/widget.html 的框架。域、协议和端口必须匹配。未捕获的类型错误：无法调用未定义的方法“日志”
@david 您是在后台页面还是在小部件中调用 console.log() ？在后台页面调用它。此外，如果您看到后台页面的开发人员工具窗口的链接，则说明后台页面正在加载。页面上的任何错误都会在开发人员的工具控制台上显示。

【解决方案2】：

显然，几个月前我出于沮丧放弃了这个项目。我终于决定今天重温它，这就是我发现的：

localStorage 对象被缓存（见图），这解释了为什么扩展有时会起作用，而在我对代码进行重大更改后很长时间突然不起作用。这也解释了为什么在我修复它后很长时间内扩展程序仍无法继续工作。为了将来参考，从 Chrome 的扩展管理器重新加载扩展会清除扩展的 localStorage 缓存。
Chrome 扩展程序的背景页面（至少在 ANTP 扩展程序的情况下）必须是 HTML 文件。如果是 JS 文件就不行了。
我曾经很不擅长 JavaScript。

这是更新后的代码，您可以将其用作您自己的 Chrome 或 ANTP 扩展程序的外壳。我还包括了 ANTP 使用 poke v2 所需的更改。

背景.html：

<html>
    <body>
        <script>
            (function () {
                "use strict";

                var info = {
                    poke: 2,
                    width: 1,
                    height: 1,
                    path: "widget.html",
                    v2: {
                        resize: false,
                        min_width: 1,
                        max_width: 1,
                        min_height: 1,
                        max_height: 1
                    }
                };

                chrome.extension.onRequestExternal.addListener(function (request, sender, sendResponse) {
                    if (request === "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-poke") {
                        chrome.extension.sendRequest(
                            sender.id,
                            {
                                head: "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-pokeback",
                                body: info
                            }
                        );
                    }
                });

                localStorage.setItem("foo", "bar");
            }());
        </script>
    </body>
</html>

manifest.json 完全相同。以下是 widget.html 的相关部分：

<script>
    (function () {
        "use strict";

        var foo = localStorage.getItem("foo");

        document.write(foo);
    }());
</script>

【讨论】：