Chrome-Erweiterung Content-Skript für den Zugriff auf chrome.storage

Question

Ich habe ein benutzerdefiniertes Menü erstellt, das mithilfe von Chrome Extensions Content Script an eine Seite angehängt wird. Die Erweiterung funktioniert super und das Menü erscheint genau so, wie ich es wollte.

Ich möchte ein wenig weiter gehen und eine Optionsseite mit einem Ein/Aus-Schalter hinzufügen, um die var menuToggle entweder 1 oder 0 definiert wird, und dass var wird auf eine IF-Bedingung gebunden sein:

IF menuToggle == 1 // Do something 
ELSE // console.log("var is 0, menu not loaded"); 

Ich konnte dies in der Erweiterungsumgebung mit "localstorage.menuToggle = 1;", aber ich verstehe, dass dies nur für die Instanz innerhalb meiner Erweiterung funktioniert und dass das Content Script nicht auf diese Variable zugreifen kann.

Ich ging durch die official docs für die chrome.storage API, aber ehrlich gesagt, ich habe nicht viel verstanden, da ich in einem frühen Stadium der Programmierung bin.

Von dem, was ich gesehen habe, sollte ich die chrome.storage.sync.set dafür verwenden, aber ich habe nicht ganz, wie man dies richtig einstellen und entweder wie Sie die Daten einmal innerhalb des Inhaltsskript abrufen. Ich habe versucht, so etwas wie unten, aber es hat nicht funktioniert:

chrome.storage.sync.set({'menuToggle': '1'}, function(){}); 

Frage hier: Muss ich eine Funktion nach der sync.set definieren? Ist es möglich, die Daten einfach ohne jede Funktion zu speichern?

Bellow ist der Code, den ich mit dem localstorage verwendet:

var varMenuToggleDefault = 1; 
localStorage.varMenuToggle = 1; 

$("input:checkbox[name=onoffswitch]").change(function() { 
    if ($(this).is(':checked')) { 
    localStorage.varMenuToggle = varMenuToggleDefault; 
    console.log('Switch is ON'); 
    console.log("Var is: " + localStorage.varMenuToggle); 
    } else { 
    localStorage.varMenuToggle = "0"; 
    console.log('Switch is OFF'); 
    console.log("Var is: " + localStorage.varMenuToggle); 
    } 

if (localStorage.varMenuToggle == 1) { 
// Load the menu 
} else { 
// console.log("varMenuToggle is 0. Menu NOT loaded"); 
}; 

Was falsch/fehlt ich tue?

Answer 1

chrome.storage Funktionen sind asynchron. Die Funktion nach den Klammern wird als Rückruffunktion bezeichnet und wird ausgelöst, wenn der Vorgang abgeschlossen ist. Sie müssen keine Rückruffunktion haben.

Ihre Daten zurück zu bekommen ist ein bisschen anders. Sie können Ihre Daten auf diese Weise zugreifen:

chrome.storage.sync.get("menuToggle", function(data) { 
    var menuToggle = data.menuToggle; 
} 

Da die Funktionen asynchron sind, wenn Sie Daten wollen zurück zu bekommen, Sie muss haben eine Callback-Funktion. Die Callback-Funktion empfängt ein Objekt mit einer menuToggle-Eigenschaft, die den von Ihnen festgelegten Wert enthält.