Chrome extension: accéder à localStorage dans le script de contenu

Donc, j'ai une page d'options, où l'utilisateur peut définir certaines options et il l'enregistre dans localStorage: options.html

maintenant, j'ai aussi un script de contenu qui a besoin d'obtenir les options qui ont été définies dans la page options.html , mais quand j'essaie d'accéder à localStorage à partir du script de contenu, il ne renvoie pas la valeur de la page options.

Comment faire pour que mon script de contenu obtienne des valeurs à partir de localStorage, de la page d'options ou même du page d'arrière-plan?

133
demandé sur LondonAppDev 2010-10-14 23:55:47

3 réponses

mise à jour 2016:

Google Chrome a publié L'API de stockage: http://developer.chrome.com/extensions/storage.html

il est assez facile à utiliser comme les autres API Chrome et vous pouvez l'utiliser à partir de n'importe quel contexte de page dans 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);
    });

Pour l'utiliser, assurez-vous de le définir dans le manifeste:

    "permissions": [
      "storage"
    ],

Il existe des méthodes pour "supprimer", "clair", "getBytesInUse", et un écouteur d'événements pour écouter le stockage modifié" onChanged "

natives localStorage ( vieille réponse de 2011 )

Les scripts de contenu

s'exécutent dans le contexte des pages Web, pas des pages d'extension. Par conséquent, si vous accédez à localStorage à partir de votre contentscript, ce sera le stockage à partir de cette page Web, pas le stockage de la page d'extension.

maintenant, pour laisser votre script de contenu pour lire votre extension de stockage (où vous les définissez à partir de votre page d'options), vous devez utiliser l'extension message de passage .

la première chose que vous faites est de dire à votre script de contenu d'envoyer une demande à votre extension pour récupérer quelques données, et que les données peuvent être votre extension localStorage:

contentscript.js

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

"1519310920 d'arrière-plan".js

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

vous pouvez faire une API autour de cela pour obtenir des données localStorage génériques à votre script de contenu, ou peut-être, obtenir l'ensemble du tableau localStorage.

j'espère que aidé à résoudre votre problème.

d'être De fantaisie et générique ...

contentscript.js

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

"1519310920 d'arrière-plan".js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocalStorage")
      sendResponse({data: localStorage[request.key]});
    else
      sendResponse({}); // snub them.
});
202
répondu Mohamed Mansour 2016-09-10 02:04:15

parfois, il peut être préférable d'utiliser chrome.stockage API. C'est mieux que localStorage parce que vous pouvez:

  • stocker les informations de votre script de contenu sans avoir besoin de message passant entre le script de contenu et l'extension;
  • stockez vos données comme objets JavaScript sans les sérialiser à JSON ( localStorage ne stocke que les chaînes ).

voici un code simple démontrant l'utilisation du chrome.stockage. Le script de contenu obtient l'url de la page visitée et timestamp et le stocke, popup.js l'obtient de la zone de stockage.

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);
    })
})();

" change " voici un objet qui contient de vieux et la nouvelle valeur pour une clé donnée. L'argument "AreaName" renvoie au nom de la zone de stockage, soit 'local', 'sync' ou 'gérée'.

N'oubliez pas de déclarer l'autorisation de stockage dans le manifeste.json.

manifeste.json

...
"permissions": [
    "storage"
 ],
...
42
répondu Pawel Miech 2017-05-23 12:26:10

une autre option serait d'utiliser l'API chromestorage. Cela permet le stockage des données de l'utilisateur avec la synchronisation facultative à travers les sessions.

seul inconvénient est qu'il est asynchrone.

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

7
répondu Jason 2014-01-06 15:32:09