Ich habe eine Optionsseite, auf der der Benutzer bestimmte Optionen definieren und in localStorage speichern kann: options.html

Jetzt habe ich auch ein Inhaltsskript, das die auf der options.htmlSeite definierten Optionen abrufen muss. Wenn ich jedoch versuche, über das Inhaltsskript auf localStorage zuzugreifen, wird der Wert von der Optionsseite nicht zurückgegeben.

Wie kann ich dafür sorgen, dass mein Inhaltsskript Werte von localStorage, von der Optionsseite oder sogar von der Hintergrundseite erhält?

Update 2016:

Google Chrome hat die Speicher-API veröffentlicht: http://developer.chrome.com/extensions/storage.html

Es ist ziemlich einfach wie die anderen Chrome-APIs zu verwenden und kann von jedem Seitenkontext in Chrome aus verwendet werden.

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

Um es zu verwenden, stellen Sie sicher, dass Sie es im Manifest definieren:

    "permissions": [
      "storage"
    ],

Es gibt Methoden zum "Entfernen", "Löschen", "getBytesInUse" und einen Ereignis-Listener zum Abhören des geänderten Speichers "onChanged".

Verwenden von nativem localStorage ( alte Antwort von 2011 )

Inhaltsskripte werden im Kontext von Webseiten ausgeführt, nicht von Erweiterungsseiten. Wenn Sie über Ihr Inhaltsskript auf localStorage zugreifen, handelt es sich daher um den Speicher dieser Webseite und nicht um den Speicher der Erweiterungsseite.

Damit Ihr Inhaltsskript Ihren Erweiterungsspeicher lesen kann (wo Sie sie auf Ihrer Optionsseite festgelegt haben), müssen Sie die Weitergabe von Erweiterungsnachrichten verwenden .

Das erste, was Sie tun, ist, Ihr Inhaltsskript anzuweisen, eine Anforderung an Ihre Erweiterung zu senden, um einige Daten abzurufen. Diese Daten können Ihre Erweiterung localStorage sein:

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

Sie können eine API erstellen, um generische localStorage-Daten in Ihr Inhaltsskript abzurufen, oder möglicherweise das gesamte localStorage-Array abrufen.

Ich hoffe, das hat zur Lösung Ihres Problems beigetragen.

Ausgefallen und generisch zu sein ...

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

Manchmal ist es möglicherweise besser, die chrome.storage- API zu verwenden. Es ist besser als localStorage, weil Sie:

• Speichern Sie Informationen aus Ihrem Inhaltsskript, ohne dass eine Nachricht zwischen Inhaltsskript und Erweiterung übertragen werden muss.
• Speichern Sie Ihre Daten als JavaScript-Objekte, ohne sie in JSON zu serialisieren ( localStorage speichert nur Zeichenfolgen ).

Hier ist ein einfacher Code, der die Verwendung von chrome.storage demonstriert. Das Inhaltsskript ruft die URL der besuchten Seite und den Zeitstempel ab und speichert sie. Popup.js ruft sie aus dem Speicherbereich ab.

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

"Änderungen" ist hier ein Objekt, das einen alten und einen neuen Wert für einen bestimmten Schlüssel enthält. Das Argument "AreaName" bezieht sich auf den Namen des Speicherbereichs, entweder "lokal", "synchronisieren" oder "verwaltet".

Denken Sie daran, die Speicherberechtigung in manifest.json zu deklarieren.

manifest.json

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

Eine andere Option wäre die Verwendung der Chromspeicher-API. Dies ermöglicht die Speicherung von Benutzerdaten mit optionaler Synchronisierung zwischen Sitzungen.

Ein Nachteil ist, dass es asynchron ist.

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