En la extensión de Firefox, quiero implementar un interruptor de palanca simple que habilitará/deshabilitará una extensión. Una idea básica es que el cambio de estado se guardará como un valor booleano en el almacenamiento (sincronizado) del navegador. El estado debe leerse cada vez, por lo que una extensión sabrá si debería funcionar o no. Pero, mi conocimiento de Javascript es tan pobre que me metí en problemas.
Aquí hay HTML simple:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="styles.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <form id="form" class="ps-3 mt-3"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitch"> <label class="form-check-label" for="flexSwitch">Plugin ON/OFF</label> </div> </form> <label id="test"></label> <br> <script src="options.js"></script> </body> </html>Y aquí hay un archivo JS simple:
function CheckAndSave() { var state = document.getElementById("flexSwitch"); if(state.checked) { document.getElementById('test').innerHTML = 'ON'; browser.storage.sync.set({ delovanje: 1 }); } else { document.getElementById('test').innerHTML = 'OFF'; browser.storage.sync.set({ delovanje: 0 }); } restoreState(); } function restoreState() { //browser.storage.sync.get("delovanje", function(items) { console.log(items)}); let getting4 = browser.storage.sync.get("delovanje"); getting4.then(setCurrentChoice, onError); function onError(error) { console.log(`Error: ${error}`); } function setCurrentChoice() { var toggle = document.getElementsByName("flexSwitch"); if (result.delovanje === 1) toggle.checked = true; else toggle.checked = false; } } document.addEventListener("DOMContentLoaded", restoreState); document.getElementById("flexSwitch").addEventListener('change', CheckAndSave);¿Qué está mal con mi código? ¿Está bien mi forma de guardar booleanos? Traté de escribir en la consola para "depurar", pero no sé cómo hacerlo; esta es una ventana emergente después de que un usuario presiona un ícono y no se muestra nada en la consola.
Sobre todo cometiste un error aquí:
function setCurrentChoice(result) { var toggle = document.getElementsByName("flexSwitch"); if (result.delovanje === 1) toggle.checked = true; else toggle.checked = false; } En este caso, alternar será un objeto similar a una matriz, pero no el elemento que espera. Debe utilizar document.getElementById("flexSwitch") como anteriormente.
Otro problema es que te perdiste un argumento en la función setCurrentChoice . Debería tomar configuraciones como esta:
function setCurrentChoice(result){...}También sugeriría ocultar la lógica de obtener un elemento detrás de la escena envolviéndolo en la función:
const getToggle = () => document.getElementById("flexSwitch")O incluso muévalo a la clase separada y encapsule toda la lógica allí:
class Toggle { constructor() { this._el = document.getElementById("flexSwitch"); } setCheck(value) { this._el.checked = value; } }Aquí está la muestra de trabajo:
function CheckAndSave() { var state = document.getElementById("flexSwitch"); if(state.checked) { document.getElementById('test').innerHTML = 'ON'; chrome.storage.sync.set({ delovanje: 1 }); } else { document.getElementById('test').innerHTML = 'OFF'; chrome.storage.sync.set({ delovanje: 0 }); } } function restoreState() { chrome.storage.sync.get("delovanje",setCurrentChoice ); function setCurrentChoice(result) { var toggle = document.getElementById("flexSwitch"); if (result.delovanje === 1) toggle.checked = true; else toggle.checked = false; } } document.addEventListener("DOMContentLoaded", restoreState); document.getElementById("flexSwitch").addEventListener('change', CheckAndSave);Este enfoque lo ayudará a reducir el código y los errores accidentales.
Creo que el problema es que el evento de change no se activa cuando se configura toggle.checked con JavaScript. Simplemente llame a CheckAndSave(); desde el final de setCurrentChoice .
El código parece estar bien, aunque hay algunas cosas que cambiaría (para fines de refactorización para que coincidan con mi estilo), creo que debería funcionar sin muchos problemas.
En cualquier caso verifique lo siguiente.
browser.storage.sync solo está disponible a partir de extensiones, por lo tanto, verifique que el HTML y el JS que está publicando sean realmente parte de la extensión que está utilizando.manifest.json es lo que le dice al navegador a qué recursos puede acceder su extensión, verifique que haya agregado el permiso de "storage" aquí. Puede leer más sobre Chrome, aunque será lo mismo para otros navegadores.debugger allí donde sienta que hay algo que no funciona como se esperaba. Y luego con la consola comience a buscar las propiedades que no está encontrando.console.log('XXX') y debería mostrar lo que desea