Estoy creando una extensión de navegador usando quasar bex y quiero mostrar un componente vue en la página web cargada
Ya intenté usar el enlace de script de contenido para agregar html y css sin procesar en la página web
Pero quiero agregar un componente de mi carpeta src/components que también usa componentes de quasar como q-btn, etc.
¿Hay alguna manera de lograr esto?
Gracias !
Ok, logré resolverlo. Estoy escribiendo la solución, por lo que puede ser que alguien más pueda encontrarlo útil. Utilicé iframe
para inyectar mi componente O página en la página web cargada.
Primero creé una nueva ruta, digamos test
en rutas.js como
{ name: "test", path: "/test", component: () => import("pages/test.vue"), },
Luego creé un iframe y cargué esa ruta específica en content-script.js como
function createIframe() { const iframe = document.createElement("iframe"); iframe.width = "220px"; iframe.height = "220px"; Object.assign(iframe.style, { position: "fixed", border: "none", zIndex: "10000", }); // load that specific page iframe.src = chrome.runtime.getURL("www/index.html#test"); return iframe; }
Puede configurar el ancho y la altura de su iframe y otras cosas que pueda necesitar. Luego, puede usarlo como un elemento para inyectar en cualquier lugar como
document.body.prepend(createIframe());
Aquí vamos ! :)