gpt4 book ai didi

javascript - 使用 Quasar bex 将 Vue 组件注入(inject)网页

转载 作者:行者123 更新时间:2023-12-04 14:48:24 24 4
gpt4 key购买 nike

我正在使用 Quasar BEX 构建一个浏览器扩展,我想在加载的网页中显示一个 Vue 组件。我已经尝试使用内容脚本 Hook 在网页中添加原始 html 和 css,但我想从我的 src/components 文件夹中添加一个组件,该文件夹也使用类似 q 的 Quasar 组件-btn

有什么办法可以实现吗?

最佳答案

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

首先我创建了一个新的路由,比如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 宽度和高度以及您可能需要的其他东西然后你可以将它作为一个元素来注入(inject)到任何地方,比如

document.body.prepend(createIframe());

我们来了! :)

关于javascript - 使用 Quasar bex 将 Vue 组件注入(inject)网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69530647/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com