Подтвердить что ты не робот

Расширение Chrome: доступ к локальному хранилищу в контенте script

Итак, у меня есть страница параметров, где пользователь может определить определенные параметры, и он сохраняет его в localStorage: options.html

Теперь у меня также есть контент script, который должен получить параметры, которые были определены на странице options.html, но когда я пытаюсь получить доступ к localStorage из содержимого script, он не возвращает значение из страницы параметров.

Как сделать мой контент script получить значения из localStorage, со страницы параметров или даже с фоновой страницы?

4b9b3361

Ответ 1

Обновление 2016:

Google Chrome выпустил API хранения: http://developer.chrome.com/extensions/storage.html

Он довольно прост в использовании, как и другие API Chrome, и вы можете использовать его из любого контекста страницы в Chrome.

    // Save it using the Chrome extension storage API.
    chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
      console.log('Settings saved');
    });

    // Read it using the storage API
    chrome.storage.sync.get(['foo', 'bar'], function(items) {
      message('Settings retrieved', items);
    });

Чтобы использовать его, убедитесь, что вы определили его в манифесте:

    "permissions": [
      "storage"
    ],

Существуют методы для "удаления", "очистки", "getBytesInUse" и прослушивателя событий для прослушивания измененного хранилища "onChanged"

Использование native localStorage (старый ответ от 2011)

Скрипты содержимого выполняются в контексте веб-страниц, а не страниц расширения. Поэтому, если вы получаете доступ к localStorage из вашего содержимого, это будет хранилище с этой веб-страницы, а не хранилище страниц расширения.

Теперь, чтобы ваш контент script прочитал ваше хранилище расширений (где вы установили их со страницы параметров), вам необходимо использовать расширение передача сообщений.

Первое, что вы делаете, - это сообщить вашему контенту script отправить запрос на расширение для получения некоторых данных, и эти данные могут быть вашим расширением localStorage:

contentscript.js

chrome.runtime.sendMessage({method: "getStatus"}, function(response) {
  console.log(response.status);
});

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getStatus")
      sendResponse({status: localStorage['status']});
    else
      sendResponse({}); // snub them.
});

Вы можете сделать API вокруг этого, чтобы получить общие данные localStorage в свой контент script или, возможно, получить весь массив localStorage.

Я надеюсь, что это помогло решить вашу проблему.

Быть фантастическим и родовым...

contentscript.js

chrome.runtime.sendMessage({method: "getLocalStorage", key: "status"}, function(response) {
  console.log(response.data);
});

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocalStorage")
      sendResponse({data: localStorage[request.key]});
    else
      sendResponse({}); // snub them.
});

Ответ 2

Иногда бывает лучше использовать chrome.storage API. Это лучше, чем localStorage, потому что вы можете:

  • хранить информацию из вашего контента script без необходимости передача сообщения между контентом script и расширением;
  • хранить ваши данные как объекты JavaScript без их сериализации в JSON (localStorage хранит только строки).

Вот простой код, демонстрирующий использование chrome.storage. Содержимое script получает URL-адрес посещенной страницы и метки времени и сохраняет его, popup.js получает его из области хранения.

content_script.js

(function () {
    var visited = window.location.href;
    var time = +new Date();
    chrome.storage.sync.set({'visitedPages':{pageUrl:visited,time:time}}, function () {
        console.log("Just visited",visited)
    });
})();

popup.js

(function () {
    chrome.storage.onChanged.addListener(function (changes,areaName) {
        console.log("New item in storage",changes.visitedPages.newValue);
    })
})();

"Изменения" здесь - это объект, который содержит старое и новое значение для заданного ключа. Аргумент "AreaName" относится к названию области хранения: "local", "sync" или "managed".

Не забудьте объявить разрешение на хранение в manifest.json.

manifest.json

...
"permissions": [
    "storage"
 ],
...

Ответ 3

Другой вариант - использовать API хромостроения. Это позволяет хранить пользовательские данные с дополнительной синхронизацией между сеансами.

Один недостаток заключается в том, что он асинхронный.

https://developer.chrome.com/extensions/storage.html