javascript - 如何在 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

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

如果这就是您想要做的，那么问题可能是这样的 - 后台页面和内容脚本/其他应用程序/扩展程序无法直接访问彼此的本地存储(这就是 widget.html 在运行时所做的事情)请求脚本/页面的沙箱)。您需要使用消息传递在后台页面和发送 poke 消息的脚本之间传递信息。

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