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

Question

我正在尝试开发一个可以与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>

每次，浏览器只显示null。 根本没有设置本地存储，这使我认为后台页面完全断开连接。 我有不正确的连线吗？

Answer 1

显然，我几个月前因为沮丧而放弃了这个项目。 我终于决定今天再次访问它，这就是我发现的：

1. localStorage对象被缓存（图），这解释了为什么扩展有时会工作，并且在我对代码进行了重大更改之后突然不能工作。 这也解释了为什么扩展在我修复之后不会继续工作。 为了将来参考，从Chrome的扩展管理器重新加载扩展程序会清除扩展程序的localStorage缓存。
2. Chrome扩展程序的背景页面（至少在ANTP扩展名的情况下）必须是HTML文件。 如果它是一个JS文件，它将无法工作。
3. 我以前在JavaScript上真的很糟糕。

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

background.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>

Answer 2

如果我理解正确，后台页面会尝试在localStorage中存储内容，然后将widget.html传递给任何请求内容脚本/ app / extension，然后读取存储在localStorage中的信息。

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

如果您只想检查后台页面是否响应，请在该页面中执行console.log（'something'），然后在开发人员工具窗口中检查控制台上是否打印了“something”以获取后台页面。