Inject Vue Component into web page using Quasar bex

user_10222728 0
Viewed 395

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 !

browser-extension quasar-framework vue.js javascript
1 Answers

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 ! :)

user_102227280
Related