Estoy escribiendo una extensión de Chrome que tiene un script de contenido que ejecuta ciertas acciones en el evento de cambio de seclectionchange , pero se desea que estas acciones se ejecuten solo cuando el usuario las haya habilitado en la configuración de extensiones.
Aquí está mi código:
const readOption = async(key) => { return new Promise((resolve, reject) => { chrome.storage.sync.get([key], function(result) { if (result[key] === undefined) { reject(); } else { resolve(result[key]); } }); }); }; async function myAsyncFunction() { let checkVariable = await readOption('mykey'); if (checkVariable === true) { document.addEventListener('selectionchange', function(e) { // Doing stuff }, false); } } myAsyncFunction(); chrome.storage.onChanged.addListener((changes, area) => { if (area === 'sync' && changes.mykey) { myAsyncFunction(); } }); Y aquí esta el problema. Cuando cambio la variable de verdadero a falso, como puedo ver al establecer puntos de interrupción, if (checkVariable === true) se ejecuta activado por el oyente onChanged y luego su cuerpo se omite, porque la variable es falsa.
Pero después de eso, el cambio de selectionchange se ejecuta como si no estuviera en la instrucción if. Tengo que recargar la página para evitar su ejecución.
¿Cómo soluciono este problema? Pensé en eliminar el oyente de cambio de selectionchange en el oyente onchanged solo cuando mykey está configurado en falso, pero ¿cómo puedo hacerlo?
Cuando registra un detector de eventos sin especificar {once: true} , estará activo para siempre en esta página hasta que lo cancele explícitamente usando removeEventListener con la misma referencia de función. Para garantizar la igualdad, simplemente puede mover la función al ámbito externo donde será persistente:
async function myAsyncFunction() { let checkVariable = await readOption('mykey'); let onoff = `${checkVariable ? 'add' : 'remove'}EventListener`; document[onoff]('selectionchange', onSelChange); } function onSelChange(e) { // Doing stuff }