Ich habe die Hauptfunktionen einer Chrome-Erweiterung fertiggestellt, aber ich habe Mühe, die Benutzereinstellungen in der Datei popup.html beizubehalten. Also, ich habe eine Schaltfläche in der Popup.html-Datei, die eine Benutzereinstellung sein soll, aber ich kann die Benutzereinstellung nicht beibehalten, wenn ich die Seite neu lade und erneut auf die Erweiterung klicke.Speichern von Benutzereinstellungen in popup.html Chrome-Erweiterung
Ich habe versucht, die Chrome Storage API zu verwenden, aber ich konnte nicht erreichen, was ich wollte. Hier ist ein Bild von popup.html:
Ich möchte ein Benutzerpräferenz der Lage sein, zu speichern, wenn sie zwischen ein- und auszuschalten wählen. Aber von dem, was ich jetzt habe, wenn der Benutzer es schiebt (wie in dem Bild gezeigt), beim Klicken weg von dem Popup und erneutem Klicken auf das Symbol, setzt die Taste immer auf die "Aus" -Position.
Ich habe versucht, eine Kombination aus localStorage und der Chrome Storage API zu verwenden, um die Benutzereinstellungen zu laden, aber ich konnte dies nicht tun.
Hier ist meine popup.js Datei:
function saveChanges() {
// Get a value.
if ($('#myonoffswitch').is(':checked')) {
localStorage.mydata = 'y';
} else {
localStorage.mydata = 'n';
}
// Save it using the Chrome extension storage API.
chrome.storage.sync.set({
'value': localStorage.mydata
}, function() {
});
}
$(document).ready(function() {
if (localStorage.getItem('mydata')) {
if (localStorage.mydata == 'n') {
$('myonoffswitch').attr('checked', false);
} else {
$('myonoffswitch').attr('checked', true);
}
} else {
if ($('#myonoffswitch').is(':checked')) {
localStorage.setItem('mydata', 'y');
} else {
localStorage.setItem('mydata', 'n');
}
}
$('#myonoffswitch').click(function() {
saveChanges();
});
});
Hier ist meine popup.html Datei:
<html>
<head>
<title>Replace some text</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script type='text/javascript' src='jquery-1.12.3.js'></script>
<script type="text/javascript" src="options.js"></script>
</head>
<body>
<div>
<div class='logo'>
</div>
<div class='main-text'>
</div>
<div class='buttons-area'>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
<div class='block-spoilers-message'>
On Off Button
</div>
</div>
</div>
</body>
</html>
Und schließlich ist hier ein relevanter Teil meines Content-Skript:
$(document).ready(function() {
var on_off_pref = true;
chrome.storage.onChanged.addListener(function (changes, namespace) {
for (key in changes) {
var storageChange = changes[key];
on_off_pref = storageChange.newValue;
console.log('Storage key "%s" in namespace "%s" changed. ' +
'Old value was "%s", new value is "%s".',
key,
namespace,
storageChange.oldValue,
storageChange.newValue);
}
});
if (on_off_pref === 'y') {
//Execute main functionality here only if the button in popup.html is on.
}
});
Kurz gesagt, ich muss die Einstellungen auf popup.html beibehalten und diese Einstellungen im Inhaltsskript verwenden, um whet zu bestimmen Sie oder nicht, um den Hauptteil zu führen. Ich habe mir die anderen StackOverflow-Lösungen angeschaut, aber ich konnte keine von ihnen zur Arbeit bringen. Jede Hilfe zur Lösung dieses Problems wäre sehr willkommen!
Abstimmung zum Schließen als Tippfehler. Du hast gerade '#' in '$ ('myonoffswitch') vergessen. Attr ('checked', true);' – Xan