it-swarm.com.de

Chrome Erweiterung: Zugriff auf localStorage im Inhaltsskript

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

Jetzt habe ich auch ein Inhaltsskript, das die Optionen abrufen muss, die auf der Seite options.html Definiert wurden. 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 abruft?

143
user476214

Update 2016:

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

Es ist wie die anderen Chrome APIs recht einfach 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".

Native localStorage verwenden ( alte Antwort von 2011)

Inhaltsskripte werden im Kontext von Webseiten und nicht von Erweiterungsseiten ausgeführt. Wenn Sie also über Ihr Contentscript auf localStorage zugreifen, wird dies der Speicher dieser Webseite und nicht der Speicher der Erweiterungsseite sein.

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

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

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

Sie können eine API erstellen, um generische localStorage-Daten für Ihr Inhaltsskript abzurufen, oder das gesamte localStorage-Array abrufen.

Ich hoffe, das hat Ihnen geholfen, Ihr Problem zu lösen.

Schick und generisch zu sein ...

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

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

  • speichern von Informationen aus Ihrem Inhaltsskript , ohne dass eine Nachrichtenübermittlung zwischen Inhaltsskript und Erweiterung erforderlich ist;
  • 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. Die Datei 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 alte und neue Werte für einen bestimmten Schlüssel enthält. Das Argument "AreaName" bezieht sich auf den Namen des Speicherbereichs, entweder "lokal", "synchron" oder "verwaltet".

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

manifest.json

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

Eine weitere 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

7
Jason