es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo usar jsdom para manipular el DOM en una extensión de Chrome V3 desde un trabajador de servicio (script de fondo)?

Cómo usar jsdom para manipular el DOM en una extensión de Chrome V3 desde un trabajador de servicio (script de fondo)?

15 Jun, 2023 Programación

Estoy tratando de manipular una cadena HTML en el script de fondo, que en la extensión de Chrome V3 está utilizando un trabajador de servicio.

En la documentación de migración se menciona el uso de jsdom para acceder al DOMParser: https://developer.chrome.com/docs/extensions/mv3/migrating-to-service_workers/#documents

El problema es que cuando intento agregar jsdom, recibo el siguiente error:

La sección del manifest donde se define el script de fondo es:

“background”: {
“service_worker”: “background.js”
},
“manifest_version”: 3,
….

El script de fondo contiene el siguiente código:

const jsdom = require(“jsdom”);
const dom = new jsdom.JSDOM(<!DOCTYPE html><p>Hello world</p>);
console.log(“textContent”, dom.window.document.querySelector(“p”).textContent); // ‘Hello world’

Mi pregunta es: ¿Cómo se accede al DOMParser en la extensión de Chrome V3 dentro del trabajador de servicio?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener acceso a DOMParser en una extensión de Chrome V3 dentro del service worker, debes seguir las instrucciones proporcionadas en la documentación de migración. Esto recomienda utilizar jsdom para crear un DOM virtual que puedas manipular. Sin embargo, parece que cuando intentaste agregar jsdom, recibiste un error.

    El error mostrado en la captura de pantalla sugiere que la declaración de require no está definida, lo que significa que la biblioteca jsdom no se está cargando correctamente. Una posible solución es modificar tu código para usar una declaración de import en lugar de una declaración de require, de la siguiente manera:

    import { JSDOM } from 'jsdom';
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log("textContent", dom.window.document.querySelector("p").textContent); // 'Hello world'

    Alternativamente, podrías intentar agregar la siguiente configuración a tu archivo webpack.config.js para decirle a Webpack que haga que jsdom esté disponible para el script de fondo:

    module.exports = {
  // ...
  resolve: {
    fallback: {
      "jsdom": require.resolve("jsdom"),
    }
  }
  // ...
};

    Una vez que hayas resuelto el problema con la carga de jsdom, puedes usar DOMParser para manipular cadenas HTML creando una nueva instancia de DOMParser y utilizando sus métodos, como lo harías en una página web normal:

    const parser = new DOMParser();
const htmlString = "<!DOCTYPE html><p>Hello world</p>";
const doc = parser.parseFromString(htmlString, "text/html");
console.log(doc.querySelector("p").textContent); // "Hello world"

    Ten en cuenta que algunos métodos pueden no estar disponibles dentro de un service worker debido a restricciones de seguridad, por lo que deberás probar cuidadosamente tu código para asegurarte de que funcione como se espera.

Comments are closed.