2010-10-14 22 views
121

Tak, mam stronę opcji, gdzie użytkownik może określić pewne opcje i zapisuje go w localStorage: options.htmlChrome rozszerzenie: dostęp localStorage w skrypcie zawartości

Teraz mam również skrypt treści, które musi uzyskać opcje, które zostały zdefiniowane na stronie options.html, ale kiedy próbuję uzyskać dostęp do localStorage ze skryptu treści, nie zwraca ona wartości ze strony opcji.

Co zrobić, aby mój skrypt treści pobierał wartości z localStorage, ze strony opcji, a nawet strony w tle?

+1

pokrewne: http://stackoverflow.com/questions/3033829/google-chrome-extension-local-storage –

+0

pokrewne: http://stackoverflow.com/questions/4224039/chrome-extension-with-cloud-storage – Jason

+0

Powiązane: http://stackoverflow.com/questions/39768005/single-data-store-offline-locally-for-both-a-web-site-and-an -extension-in-chrome? noredirect = 1 # comment66832892_39768005 – super1ha1

Odpowiedz

189

Aktualizacja 2016:

Google Chrome zwolniony API przechowywania: http://developer.chrome.com/extensions/storage.html

To jest dość łatwy w użyciu, podobnie jak inne interfejsy API z Chrome i można go używać z dowolnym kontekście strony w 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); 
    }); 

Aby go użyć, upewnij się zdefiniować go w manifeście:

"permissions": [ 
     "storage" 
    ], 

istnieją metody, aby „usunąć”, „jasny”, „getBytesInUse”, a detektor zdarzeń do nasłuchiwania zmieniona przechowywanie "onChanged"

Korzystanie natywną localStorage (stary odpowiedź od 2011)

skrypty Content uruchomić w kontekście stron internetowych, nie strony rozszerzenia. Dlatego jeśli uzyskujesz dostęp do localStorage ze swojego spisu treści, będzie to miejsce z tej strony internetowej, a nie z magazynu strony rozszerzenia.

Teraz, aby skrypt treści mógł odczytać pamięć rozszerzenia (w miejscu, w którym zostały one ustawione ze strony opcji), należy użyć rozszerzenia message passing.

Pierwszą rzeczą, jaką można zrobić, to powiedzieć skrypt treści wysłać zapytanie do rozszerzenia się pobrać niektórych danych, a dane mogą być swój wewnętrzny 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. 
}); 

można zrobić API A zaokrąglij to, aby uzyskać ogólne dane localStorage do skryptu treści, lub może uzyskać całą tablicę localStorage.

Mam nadzieję, że pomogło to rozwiązać Twój problem.

być wyobraźnia i rodzajowy ...

contentscript.js

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

tło.js

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

Oczywiście żądanie może również być {method: 'getStorage', key: 'status'}, a detektor odpowiada odpowiednimi danymi. –

+0

Co jeśli chcę, aby wszystko z localStorage było przesyłane na rozszerzenie? Czy mogę napisać 'sendResponse ({data: localStorage});'? –

+5

Spróbuj i zobacz :) –

7

Inną opcją byłoby użycie interfejsu chromestorage API. Umożliwia to przechowywanie danych użytkownika z opcjonalną synchronizacją między sesjami.

Jedną z wad jest to, że jest asynchroniczna.

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

+2

działa jak urok! –

+0

@Jason, a co z transakcjami typu "wszystko lub nic" **? – Pacerier

38

Czasami może lepiej byłoby użyć chrome.storage API. To lepsze niż localStorage ponieważ można:

informacje
  • sklep ze skryptu zawartości bez potrzeby wiadomości przechodzącej pomiędzy treścią skryptu i rozbudowy;
  • Przechowuj swoje dane jako obiekty JavaScript bez serializacji do JSON (localStorage only stores strings).

Oto prosty kod demonstrujący użycie chrome.storage. Skrypt zawartości pobiera adres URL odwiedzonej strony i znacznik czasu i przechowuje go, popup.js pobiera go z obszaru pamięci.

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

"Zmiany" tu jest obiektem, który zawiera starą i nową wartość dla danego klucza. Argument "AreaName" odnosi się do nazwy obszaru pamięci, "local", "sync" lub "managed".

Pamiętaj, aby zadeklarować pozwolenie na przechowywanie w pliku manifest.json.

manifest.json

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

Zdarzenie 'onChanged' już dostarcza dane w obiekcie' changes'. Ponadto zwróć szczególną uwagę na 'przestrzeń nazw' zdarzenia 'onChanged'. Jeśli przechowujesz coś za pomocą 'chrome.storage.local.set', to wyzwalane jest zdarzenie' onChanged', ale czytanie przy użyciu 'chrome.storage.sync.get' ma niewielki sens. –

+0

Tak, masz rację, zredagowałem moją odpowiedź. Oczywiście można użyć chrome.storage.sync.get w innych scenariuszach, ale tutaj jest on rzeczywiście zbędny. –

+0

W odpowiedzi na wersję 5 odpowiedzi: 'changes.visitedPages' będzie niezdefiniowane, jeśli' odwiedzonyPages' nie został zmieniony. Zawiń wiersz w 'if (changes.visitedPages) {...}, aby rozwiązać ten problem. –

Powiązane problemy