Estensione Chrome: accesso a localStorage nello script di contenuto

Quindi, ho una pagina delle opzioni in cui l’utente può definire determinate opzioni e la salva in localStorage: options.html

Ora, ho anche uno script di contenuto che deve ottenere le opzioni che sono state definite nella pagina options.html , ma quando provo ad accedere a localStorage dallo script di contenuto, non restituisce il valore dalla pagina delle opzioni.

Come faccio a far sì che il mio script di contenuto ottenga i valori da localStorage, dalla pagina delle opzioni o anche dalla pagina di sfondo?

Aggiornamento 2016:

Google Chrome ha rilasciato l’API di archiviazione: http://developer.chrome.com/extensions/storage.html

È abbastanza facile da utilizzare come le altre API di Chrome e puoi utilizzarlo da qualsiasi contesto di pagina in 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); }); 

Per usarlo, assicurati di definirlo nel manifest:

  "permissions": [ "storage" ], 

Esistono metodi per “rimuovere”, “cancella”, “getBytesInUse” e un listener di eventi per ascoltare la memoria modificata “onChanged”

Utilizzo di localStorage nativo ( vecchia risposta del 2011 )

Gli script di contenuto vengono eseguiti nel contesto di pagine Web, non di pagine di estensione. Pertanto, se accedi a localStorage dal tuo contentscript, sarà lo spazio di archiviazione da quella pagina Web, non lo spazio di archiviazione della pagina di estensione.

Ora, per consentire allo script di contenuto di leggere l’archiviazione dell’estensione (in cui vengono impostati dalla pagina delle opzioni), è necessario utilizzare il passaggio dei messaggi di estensione.

La prima cosa che fai è dire al tuo script di contenuto di inviare una richiesta alla tua estensione per recuperare alcuni dati, e che i dati possono essere la tua estensione 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. }); 

Puoi fare un’API intorno a questo per ottenere dati generici localStorage per il tuo script di contenuto, o forse, ottenere l’intera matrice localStorage.

Spero che questo abbia aiutato a risolvere il tuo problema.

Essere fantasiosi e generici …

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

A volte potrebbe essere meglio usare l’ API chrome.storage . È meglio di localStorage perché puoi:

  • memorizzare le informazioni dallo script del contenuto senza la necessità di passare il messaggio tra lo script e l’estensione del contenuto;
  • memorizza i tuoi dati come oggetti JavaScript senza serializzarli su JSON ( localStorage memorizza solo stringhe ).

Ecco un semplice codice che dimostra l’uso di chrome.storage. Lo script di contenuto ottiene l’URL della pagina visitata e il timestamp e lo memorizza, popup.js lo ottiene dall’area di archiviazione.

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

“Modifiche” qui è un object che contiene il vecchio e il nuovo valore per una data chiave. L’argomento “AreaName” fa riferimento al nome dell’area di archiviazione, “locale”, “sincronizzazione” o “gestito”.

Ricordarsi di dichiarare il permesso di archiviazione in manifest.json.

manifest.json

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

Un’altra opzione potrebbe essere l’utilizzo dell’API chromestorage. Ciò consente l’archiviazione dei dati dell’utente con la sincronizzazione opzionale tra le sessioni.

Uno svantaggio è che è asincrono.

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