Extension Chrome : accès à localStorage dans le contenu script

Question

J'ai une page d'options où l'utilisateur peut définir certaines options et les sauvegarder dans localStorage : options.html

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

Comment faire pour que mon contenu script obtienne des valeurs de localStorage, de la page d'options ou même de la page de fond ?

Answer 1

Mise à jour 2016 :

Google Chrome a publié l'API de stockage : https://developer.chrome.com/docs/extensions/reference/storage/

Elle est assez facile à utiliser comme les autres API de 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", "effacer", "getBytesInUse", et un écouteur d'événements pour écouter les changements de stockage "onChanged".

Utilisation du localStorage natif ( ancienne réponse de 2011 )

Les scripts de contenu s'exécutent dans le contexte des pages web, et non des pages d'extension. Par conséquent, si vous accédez à localStorage depuis votre script de contenu, il s'agira du stockage de cette page Web, et non du stockage de la page d'extension.

Maintenant, pour permettre à votre contenu script de lire votre stockage d'extension (où vous les avez définis à partir de votre page d'options), vous devez utiliser l'extension passage des messages .

La première chose que vous faites est de dire à votre script de contenu d'envoyer une requête à votre extension pour récupérer certaines données, et ces données peuvent être le localStorage de votre extension :

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

Vous pouvez faire une API autour de cela pour obtenir des données génériques de localStorage à votre contenu script, ou peut-être, obtenir le tableau localStorage entier.

J'espère que cela a aidé à résoudre votre problème.

Pour être fantaisiste et générique ...

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

Answer 2

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

• stocker les informations de votre contenu script. sans avoir besoin de passage de messages entre le contenu script et l'extension ;
• stocker vos données sous forme d'objets JavaScript sans les sérialiser en JSON ( localStorage ne stocke que des chaînes de caractères ).

Voici un code simple démontrant l'utilisation de chrome.storage. Content script récupère l'url de la page visitée et l'horodatage et le stocke, popup.js le récupère dans la zone de stockage.

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

"Changes" est ici un objet qui contient l'ancienne et la nouvelle valeur pour une clé donnée. L'argument "AreaName" fait référence au nom de la zone de stockage, soit 'local', 'sync' ou 'managed'.

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

manifeste.json

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

Answer 3

Une autre option serait d'utiliser l'API de chromestorage. Celle-ci permet de stocker les données de l'utilisateur avec une synchronisation facultative entre les sessions.

L'inconvénient est qu'il est asynchrone.

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