CODEWITHSUNDEEP
javascripthtmlgoogle-chromegoogle-chrome-extensionlocal-storage
Big McLargeHuge
Big McLargeHuge

Reputation: 16056

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

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?

Upvotes: 0

Views: 1219

Answers (2)

Big McLargeHuge
Big McLargeHuge

Reputation: 16056

Obviously, I ditched this project months ago out of frustration. I finally decided to revisit it today, and here's what I discovered:

  1. The localStorage object is cached (go figure), which explains why the extension would work sometimes and the suddenly not work long after I had made a breaking change to the code. This also explains why the extension would continue not to work long after I had fixed it. For future reference, reloading the extension from Chrome's extension manager clears the localStorage cache for the extension.
  2. The background page for a Chrome extension (at least in the case of an ANTP extension) MUST be a HTML file. It will not work if it's a JS file.
  3. I used to be REALLY bad at JavaScript.

Here's the updated code, which you can use as a shell for your own Chrome or ANTP extension. I've also included the changes required by ANTP for using 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 is exactly the same. Here are the relevant parts of widget.html:

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

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

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

Upvotes: 1

Adi B
Adi B

Reputation: 1219

If I understand this correctly, the background page is trying to store something in localStorage, then pass the widget.html to any requesting content-script / app / extension which will then read the information stored in localStorage.

If this is what you are trying to do, then the problem could be this - background page and content-scripts / other apps / extensions cannot directly access each other's localStorage (which is what widget.html does when it runs in the requesting script/page's sandbox). You need to use message passing to pass the information between background page and the script that is sending the poke message.

If you want to just check if the background-page is responding, do a console.log('something') in that page and then check if 'something' is printed on the console in the developer tools window for background page.

Upvotes: 1

Related Questions