I'm building a browser extension using quasar bex and I want to show a vue component in the loaded web page
I already tried to use content script hook to add raw html and css in the web page
But i want to add a component from my src/components folder which is also using quasar components like q-btn etc.
Is there any way to achieve this !
Thank you !
Ok i've managed to solve it
I'm writing the solution , so may be someone else can found it useful
I used iframe to inject my component OR page into the loaded web page
First i created a new route, say test in routes.js like
{
name: "test",
path: "/test",
component: () => import("pages/test.vue"),
},
Then i created an iframe and loaded that specific route in content-script.js like
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;
}
You can set your iframe width and height and other things you may need Then you can use it as an element to inject anywhere like
document.body.prepend(createIframe());
Here we go ! :)