使用 Quasar bex 将 Vue 组件注入网页答案

【问题标题】：Inject Vue Component into web page using Quasar bex使用 Quasar bex 将 Vue 组件注入网页
【发布时间】：2021-11-30 11:11:48
【问题描述】：

我正在使用 quasar bex 和我想在加载的网页中显示一个vue组件

我已经尝试使用内容脚本挂钩在网页中添加原始 html 和 css

但我想从我的 src/components 文件夹中添加一个组件，该文件夹也使用 q-btn 等类星体组件。

有什么办法可以做到这一点！

谢谢！

【问题讨论】：

标签： javascript vue.js quasar-framework browser-extension

【解决方案1】：

好的，我已经设法解决了我正在写解决方案，所以其他人可能会发现它有用我使用iframe 将我的组件 OR 页面注入到加载的网页中

首先我在 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());

我们来了！ :)

【讨论】：