Soy nuevo en el desarrollo de extensiones de Chrome. Estoy tratando de crear una extensión simple y quiero que esa extensión cambie entre los estados activado y desactivado a través del icono.
Aquí está el código que estoy usando hasta ahora para lograr esto:
(fondo.js)
var enabled = 1; chrome.action.onClicked.addListener(function () { console.log(enabled); if (enabled == 0) { enabled = 1; chrome.action.setIcon({ path: "images/on.png" }); } else { enabled = 0; chrome.action.setIcon({ path: "images/off.png" }); } });Y luego, en el mismo archivo, estoy haciendo lo que quiero hacer. Esto funciona hasta ahora, pero el problema es que sí, funciona con una declaración if:
if(enabled == 1){ do this...}Pero después de un tiempo debido a una razón que no pude entender (he hecho depuraciones de registro de la consola con la variable "habilitado", funciona bien), la extensión sigue funcionando ya que está en estado deshabilitado y el ícono muestra que está deshabilitado ...
La secuencia de comandos en segundo plano finaliza después de 30 segundos desde el último evento, como onClicked, por lo que no puede confiar en las variables globales, ya que se restablecerán cuando la secuencia de comandos en segundo plano comience nuevamente para un nuevo evento después de que finalice.
Una solución es cambiar la parte hash del nombre de archivo de la ventana emergente, lo que significa que se mostrará el mismo archivo emergente, sin embargo, su location.hash será diferente:
guión de fondo:
chrome.action.onClicked.addListener(async () => { const popup = await chrome.action.getPopup({}); const enabled = popup.includes('#off'); // new value of `enabled` const newPopup = popup.split('#')[0] + (enabled ? '' : '#off'); chrome.action.setIcon({path: `images/${enabled ? 'on' : 'off'}.png`}); await chrome.action.setPopup({popup: newPopup}); });guión emergente:
const enabled = !location.hash.includes('#off'); //document.body.prepend('Enabled: ' + enabled);Otra solución es almacenar el estado en chrome.storage.local:
chrome.action.onClicked.addListener(async () => { const enabled = !(await chrome.storage.local.get('enabled')).enabled; const path = `images/${enabled ? 'on' : 'off'}.png`; chrome.action.setIcon({path}); await chrome.storage.local.set({enabled}); });manifiesto.json:
"permissions": ["storage"]