Как использовать HTML5 localStorage в расширении Google Chrome? - PullRequest
Новая
       15

Как использовать HTML5 localStorage в расширении Google Chrome?

0 голосов
/ 07 марта 2012

Я пытаюсь разработать расширение, которое будет работать с 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>

Вот манифест.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>

Каждый раз, браузер просто отображает ноль. Локальное хранилище вообще не устанавливается, что заставляет меня думать, что фоновая страница полностью отключена. У меня что-то неправильно подключено?

Ответы [ 2 ]

1 голос
/ 22 июня 2012

Очевидно, я отказался от этого проекта несколько месяцев назад из-за разочарования.Наконец я решил вернуться к нему сегодня, и вот что я обнаружил:

  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>
1 голос
/ 07 марта 2012

Если я правильно понимаю, фоновая страница пытается что-то сохранить в localStorage, а затем передать widget.html любому запрашивающему контент-скрипту / приложению / расширению, который затем прочитает информацию, хранящуюся в localStorage.

Если это то, что вы пытаетесь сделать, то проблема может быть в следующем: фоновая страница и контент-скрипты / другие приложения / расширения не могут напрямую обращаться к localStorage друг друга (что и делает widget.html при запуске в запрашивающемскрипт / песочница страницы).Вам нужно использовать передачу сообщений для передачи информации между фоновой страницей и сценарием, отправляющим сообщение poke.

Если вы хотите просто проверить, отвечает ли фоновая страница, выполните console.log ('что-то »на этой странице, а затем проверьте, напечатано ли« что-то »на консоли в окне инструментов разработчика для фоновой страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...