Usando jsdom en el manifiesto de extensión de Chrome v3.
En el manifiesto de las extensiones de Chrome v3 se indica que background.js ahora es reemplazado por el service worker y que el DOM no está disponible en un service worker. Luego sugiere utilizar “undom” o “jsdom” como alternativa para la API DOMParser.
Se pueden usar bibliotecas como jsdom para emular un entorno típico del navegador, completo con DOMParser, propagación de eventos y otras capacidades como requestAnimationFrame. Alternativas más livianas como undom proporcionan solo el DOM suficiente para alimentar muchos frameworks y bibliotecas de frontend.
Pero “undom” es demasiado limitado y solo es capaz de crear elementos pero no de consultar elementos del DOM, que es lo que necesito a pesar de que es fácil de usar en el service worker. Entonces intenté usar “jsdom”, que es más completo pero tiene la desventaja de tener un tamaño de aproximadamente 6MB.
Intenté importar “jsdom” y aprendí que se puede hacer utilizando “browserify” en un comentario a esta pregunta (https://stackoverflow.com/q/70175127/1306720). Cuando utilizo un conjunto de archivos “browserify” en un archivo HTML simple, funciona como se espera, pero no en la extensión de Chrome, lo que genera este error:
ReferenceError: require is not defined.
Usé esta respuesta (https://stackoverflow.com/a/66408379/1306720) para cargar los archivos JS requeridos de la siguiente manera:
try {
importScripts('assets/jsdom.bundle.js', 'common.js', 'search.js', 'background.js');
} catch (e) {
console.error(e);
}
Y traté de usarlo de esta manera en “search.js”:
const jsdom = require("./assets/jsdom.bundle");
const { JSDOM } = jsdom;
¿Cómo se puede utilizar “jsdom” correctamente en un service worker de una extensión de Chrome?
davy.ai
En el manifiesto de las extensiones de Chrome v3, se menciona que background.js es reemplazado por el service worker y que el DOM no está disponible en un service worker. Como alternativa, se puede utilizar
undomojsdompara la API DOMParser. Sin embargo,undomes demasiado limitado, ya que solo se pueden crear elementos y no se pueden consultar elementos del DOM. Por otro lado,jsdomes más completo pero tiene una limitación de tamaño de ~6MB.Para utilizar
jsdomen un service worker de una extensión de Chrome, se puede importar utilizandobrowserify. Después de crear un paquete de browserify, los archivos js requeridos se pueden cargar en el service worker utilizando la funciónimportScripts. Luego, la funciónrequirese puede utilizar para importar el módulojsdomen el código.Por ejemplo, en
search.js, después de importar el módulojsdomutilizandorequire, la variableJSDOMse puede utilizar para crear una instancia dejsdomy utilizarla para la manipulación del DOM.