使用Quasar bex將Vue組件注入web頁面

Question

我正在使用 Quasar BEX 構建瀏覽器擴展，我想在加載的 web 頁面中顯示一個 Vue 組件。 我已經嘗試使用內容腳本掛鈎在 web 頁面中添加原始 html 和 css，但我想從我的src/components文件夾中添加一個組件，該文件夾也使用 Quasar 組件，如q-btn等。

有什么辦法可以做到這一點？

Answer 1

好的，我已經設法解決了我正在編寫解決方案，所以可能其他人會發現它有用我使用iframe將我的組件或頁面注入加載的 web 頁面

首先我創建了一條新路線，比如在routes.js中test

{
  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());

我們在這里 go::)