Inject Vue Component into web page using Quasar bex

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?

Answer

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 ! 🙂