web-dev-qa-db-fra.com

Chrome: accès au stockage local dans un script de contenu

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

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

Comment faire en sorte que mon script de contenu obtienne les valeurs de localStorage, de la page d'options ou même de la page d'arrière-plan?

google-chrome-extensionlocal-storagecontent-script
143
user476214

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", "effacer", "getBytesInUse" et un écouteur d'événement pour écouter le stockage modifié "onChanged"

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

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

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

La première chose que vous faites est de dire à votre script de contenu d'envoyer une demande à votre extension pour récupérer des données. Ces données peuvent être votre extension 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.
});

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

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

Pour être chic 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.
});
218
Mohamed Mansour

Parfois, il peut être préférable d’utiliser l’API chrome.storage. C'est mieux que localStorage car vous pouvez:

  • stocker des informations de votre script de contenu sans qu'il soit nécessaire de faire passer un message entre le script de contenu et son extension;
  • stockez vos données sous forme d'objets JavaScript sans les sérialiser en JSON ( localStorage ne stocke que des chaînes ).

Voici un code simple démontrant l'utilisation de chrome.storage. Le script de contenu récupère l'URL de la page visitée et de l'horodatage et le stocke, popup.js le récupère depuis 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);
    })
})();

"Modifications" est un objet contenant 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 "géré".

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

manifest.json 

...
"permissions": [
    "storage"
 ],
...
42
Pawel Miech

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

Un inconvénient est qu'il est asynchrone.

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

7
Jason