2012-12-10 17 views
6

Ich schreibe meine erste Chrome-Erweiterung, und ich habe gerade erst vor ein paar Stunden damit begonnen. Alles funktionierte gut, wenn es fest codiert war. Im Wesentlichen füll ich ein 8-seitiges Formular aus. Jede Seite des Formulars entspricht einem separaten Inhaltsskript. Die Content-Skripte so etwas wie folgt aussehen: (die Felder zu finden, ist ein bisschen schwieriger, da sie nicht Standard sind, aber ich bin nicht besorgt über that..that Teil Werke)Mehrere Variablen an Content-Skript übergeben chrome

var first_name = 'John'; 
var last_name = 'Doe'; 
... 
... 
document.getElementById('first_name').value = first_name; 
document.getElementById('last_name').value = last_name; 

Das funktionierte gut (für mich), aber ich möchte es an ein paar Leute verteilen, von denen keiner die Erweiterung aus dem Quellcode verwenden würde und/oder die Variablen direkt bearbeiten könnte. Also habe ich eine 'Optionen'-Seite erstellt, die dies als Beispiel verwendet:

Die Optionen-Seite ist ein Modell des auszufüllenden Formulars, und jeder Benutzer kann hier seine Standardwerte eingeben. Meine save_options() Funktion funktioniert grundsätzlich (Pseudocode):

foreach(fields as field) { 
    localStorage[field] = document.getElement....(field); 
} 

Das funktioniert gut. Es speichert richtig, zeigt die gespeicherten Werte an usw.

Das Problem kommt, wenn ich versuche, auf die Variablen vom Inhaltsskript zuzugreifen. Von dem, was ich gelesen habe, kann dies nicht (direkt) gemacht werden, und es gibt verschiedene Online-Methoden, die zeigen, wie das geht. Ich möchte so etwas wie diese (Content-Skript) tun:

var first_name = localStorage["first_name"]; 
var last_name = localStorage["last_name"]; 
... 
... 
document.getElementById('first_name').value = first_name; 
document.getElementById('last_name').value = last_name; 

Meine Fragen sind:

1) Für diejenigen, die mit Chrome-Erweiterungen/localstorage/chrome.storage/etc beschäftigt haben, gibt es ein "bester" Weg, dies zu tun?

2) Wie können die Variablennamen/Werte am effizientesten eingestellt werden? Ich würde eine Schleife bevorzugen (wie oben) über das Setzen jedes Feldes mit einer separaten Anfrage. Ich verwende durchschnittlich 10 Felder pro Seite.

(Ich könnte wahrscheinlich eine lange, unordentlich Form http://developer.chrome.com/extensions/messaging.html verwenden, aber ich bin für eine effizientere/ausfahrbaren/elegante Lösung der Hoffnung)

Jede Eingabe geschätzt wird!

+0

Von dem, was ich gelesen habe, Content-Skripte localstorage nicht in der Lage sind für den Zugriff (Sandbox). Fehle ich etwas? –

+1

Na gut, wenn das der Fall ist, könntest du Sachen über [message passing] (http://developer.chrome.com/extensions/messaging.html) zu einem Hintergrundskript bekommen. –

+0

chrome.extension.sendMessage ({ Begrüßung: "hallo" }, Funktion (Antwort) { console.log (response.farewell); }); –

Antwort

8

Eine Lösung besteht darin, Messaging Passing zu verwenden, das Sie erwähnt haben.

Eine andere (besser, denke ich) Lösung ist chrome.storage API (siehe http://developer.chrome.com/extensions/storage.html für weitere Informationen). Die Speicher-API kann direkt in Hintergrundseiten und Inhaltsskripten verwendet werden. Chrome wird automatisch synchronisiert, wenn Sie Werte unter chrome.storage.sync speichern. Der einzige wesentliche Unterschied von localstorage ist, dass diese API asynchron ist, so dass Sie Sie Code schreiben müssen, wie

chrome.storage.sync.get(['first_name', 'last_name'], function(items){ 
    document.getElementById('first_name').value = items['first_name']; 
    document.getElementById('last_name').value = items['last_name']; 
}); 
Verwandte Themen