Estoy tratando de hacer un interruptor de palanca basado en una casilla de verificación. La casilla de verificación solo debe cambiar cuando el usuario cambia el interruptor.
Aquí está mi código JavaScript:
var toggle = false; document.getElementById("toggle").onclick = function () { if (this.checked == true) { toggle = true; document.getElementById("toggleText").textContent = "ENABLED"; browser.browserAction.setIcon({ path: "/icons/icon.png" }); } else { document.getElementById("toggleText").textContent = "DISABLED"; browser.browserAction.setIcon({ path: "/icons/icon-inactive.png" }); } };Sin embargo, el estado de la casilla de verificación siempre está desactivado cuando vuelvo a abrir la ventana emergente. ¿Alguna idea sobre cómo puedo lograr hacer esto?
Guarde el estado en el almacenamiento local. He aquí un ejemplo simplificado:
manifiesto.json:
{ "manifest_version": 2, "name": "Save states", "version": "1.0.0", "browser_action": { "default_title": "States", "default_popup": "index.html" } }índice.html:
<html> <head> </head> <input type="checkbox" id="checkbox"> checkbox <script src="index.js"></script> </html>índice.js:
const checkboxStorageState = JSON.parse(localStorage.getItem("checkboxStorageState")); const check = document.getElementById("checkbox"); let currentState = false; if(checkboxStorageState) { currentState = checkboxStorageState; check.checked = currentState; } check.onclick = function() { if(this.checked) { currentState = true; } else { currentState = false; } localStorage.setItem("checkboxStorageState", JSON.stringify(currentState)); }