How do I use HTML5's localStorage in a Google Chrome extension?

Posted by davidkennedy85 on Stack Overflow See other posts from Stack Overflow or by davidkennedy85
Published on 2012-03-06T23:52:32Z Indexed on 2012/06/21 21:16 UTC
Read the original article Hit count: 241

I am trying to develop an extension that will work with Awesome New Tab Page. I've followed the author's advice to the letter, but it doesn't seem like any of the script I add to my background page is being executed at all. Here's my background 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>

Here is 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"
}

Here is the relevant part of widget.html:

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

    document.write(selectedTab);
</script>

Every time, the browser just displays null. The local storage isn't being set at all, which makes me think the background page is completely disconnected. Do I have something wired up incorrectly?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html5