Расширение Chrome: доступ к localStorage в скрипте содержимого - PullRequest
Новая
       34

Расширение Chrome: доступ к localStorage в скрипте содержимого

143 голосов
/ 14 октября 2010

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

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

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

Ответы [ 3 ]

215 голосов
/ 15 октября 2010

Обновление 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"

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

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

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

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

contentcript.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.
});

Youможет использовать API для этого, чтобы получить универсальные данные localStorage для вашего скрипта контента или, возможно, получить весь массив 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.
});
42 голосов
/ 11 января 2014

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

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

Вот простой код, демонстрирующий использование chrome.storage. Сценарий содержимого получает 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"
 ],
...
7 голосов
/ 19 июля 2012

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

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

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

...