[英]Inject Vue Component into web page using Quasar bex
I'm building a browser extension using Quasar BEX and I want to show a Vue component in the loaded web page.我正在使用 Quasar BEX 构建浏览器扩展,我想在加载的 web 页面中显示一个 Vue 组件。 I already tried to use content script hook to add raw html and css in the web page, but I want to add a component from my
src/components
folder which is also using Quasar components like q-btn
etc.我已经尝试使用内容脚本挂钩在 web 页面中添加原始 html 和 css,但我想从我的
src/components
文件夹中添加一个组件,该文件夹也使用 Quasar 组件,如q-btn
等。
Is there any way to achieve this?有什么办法可以做到这一点?
Ok i've managed to solve it I'm writing the solution, so may be someone else can found it useful I used iframe
to inject my component OR page into the loaded web page好的,我已经设法解决了我正在编写解决方案,所以可能其他人会发现它有用我使用
iframe
将我的组件或页面注入加载的 web 页面
First i created a new route, say test
in routes.js like首先我创建了一条新路线,比如在routes.js中
test
{
name: "test",
path: "/test",
component: () => import("pages/test.vue"),
},
Then i created an iframe and loaded that specific route in content-script.js like然后我创建了一个 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;
}
You can set your iframe width and height and other things you may need Then you can use it as an element to inject anywhere like您可以设置您的 iframe 宽度和高度以及您可能需要的其他东西然后您可以将它用作元素来注入任何地方
document.body.prepend(createIframe());
Here we go: :)我们在这里 go::)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.