Hola a todos,

Así que estoy creando mi primera extensión para Firefox/Chrome (¡comenzando con Firefox bc go Firefox!) y tengo problemas con el estilo. Esencialmente, quiero poder resaltar una palabra, obtener un resumen de wikipedia y luego mostrar el resumen en una pequeña ventana emergente. Tengo todo eso funcionando, mi problema es que, a menos que esté en un sitio súper básico, mi ventana emergente se empuja por todos lados (generalmente en la parte inferior de la pantalla).

Aquí hay algunas fotos:

Laboral:

No funciona:

Mi código: código fuente completo

Así que siempre tengo una variable para una tarjeta en mi js. Cuando quiero agregar la tarjeta, actualizo el texto de mi llamada API de Wikipedia y lo agrego al html y cuando quiero eliminarlo, lo elimino del HTML. Suficientemente fácil.

Anteriormente tuve problemas con los estilos que anulaban mis propios estilos, así que puse mi tarjeta en un DOM oculto. Básicamente, creo un div de marcador de posición, lo agrego al cuerpo del documento y le adjunto un shadow dom. Luego solo agrego mi tarjeta en el shadow dom:

 const shadowHost = document.createElement("div"); shadowHost.className = "wikiclick"; shadowHost.style.position = "absolute"; shadowHost.style.zindex = "2147483647"; document.body.insertBefore(shadowHost, document.body.firstChild); let shadow = shadowHost.attachShadow({ mode: "open" });

Cuando resalto algo, obtengo la posición x e y del resalte para saber dónde colocar mi tarjeta. Estoy tratando de usar eso y el posicionamiento absoluto para mi div "shadowHost" para mostrar mi tarjeta en el lugar correcto, pero obviamente no parece funcionar. Curiosamente, en el ejemplo de trabajo, puede ver que las posiciones x e y se agregan a los estilos en línea, pero en el ejemplo que no funciona, no lo hacen. Creo que tiene algo que ver con el sitio web que anula mis estilos/se fuerza a sí mismo en mi componente.

Laboral:

No funciona:

Estoy súper completamente confundido. ¡Cualquier consejo sobre cómo colocar mi ventana emergente en el lugar correcto sería muy apreciado!