Блог

Я создаю расширение для браузера с помощью quasar bex и хочу показать компонент vue на загруженной веб — странице

Я уже пытался использовать хук скрипта контента для добавления необработанного html и css на веб-страницу

Но я хочу добавить компонент из моей папки src/components, который также использует компоненты quasar, такие как q-btn и т. Д.

Есть ли какой-нибудь способ достичь этого !

Спасибо!

Хорошо , мне удалось решить эту проблему, я пишу решение, так что, возможно, кто-то еще может найти его полезным, я использовал iframe , чтобы внедрить свой компонент ИЛИ страницу в загруженную веб-страницу

Сначала я создал новый маршрут, скажем test , в routes.js как

 {
  name: "test",
  path: "/test",
  component: () => import("pages/test.vue"),
},
 

Затем я создал iframe и загрузил этот конкретный маршрут
в content-script.js как

 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;
}
 

Вы можете установить ширину и высоту iframe и другие вещи, которые вам могут понадобиться
Затем вы можете использовать его в качестве элемента для инъекции в любом месте, например

 document.body.prepend(createIframe());
 

Поехали ! 🙂