extension Chrome: l'accès localStorage dans le script de contenu

Question

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

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

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

Answer 1

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 de tout contexte de la page dans Google 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 définir dans le manifeste:

"permissions": [ 
     "storage" 
    ], 

Il existe des méthodes pour « supprimer », « clair », « getBytesInUse », et un écouteur d'événement pour écouter stockage changé "onChanged"

aide localStorage native (ancienne réponse de 2011)

scripts contenu exécutés dans le contexte des pages Web, pas de pages d'extension. Par conséquent, si vous accédez à localStorage à partir de votre fichier de contenu, ce sera le stockage à partir de cette page Web, pas le stockage de la page d'extension. Maintenant, pour permettre à votre script de contenu de lire votre espace de stockage d'extension (où vous les avez définis depuis votre page d'options), vous devez utiliser l'extension message passing.

La première chose que vous faites est de dire à votre script de contenu pour envoyer une demande à votre poste pour aller chercher des 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); 
}); 

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 une API arrondir cela pour obtenir des données de localStorage génériques à votre script de contenu, ou peut-être, obtenir le tableau localStorage entier.

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

être de fantaisie et générique ...

contentscript.js

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

fond .js

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

Answer 2

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

Un inconvénient est qu'il est asynchrone.

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

Answer 3

Parfois, il peut être préférable d'utiliser chrome.storage API. Il vaut mieux alors localStorage parce que vous pouvez:

• stocker des informations à partir de votre script de contenu sans la nécessité d'un message passant entre le script de contenu et l'extension;
• stockez vos données en tant qu'objets JavaScript sans les sérialiser vers JSON (localStorage only stores strings).

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 l'horodatage et la 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); 
    }) 
})(); 

"Changes" est ici un objet qui contient 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" 
], 
...