使用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::)