如何解决如何在网页中注入基于反应应用程序的 chrome 扩展?
我正在开发一个基于 React 应用的 chrome 扩展,它使用 Google 的材料设计并有几个带导航的页面。
当从浏览器地址工具栏启动扩展程序时,我想将扩展程序注入到浏览器选项卡中。我已经看到多个扩展通过注入一个包含 iframe 的 div(在网页正文内)来实现,其中 src 等于扩展的弹出 HTML 页面。
我在扩展程序启动时执行以下功能。这基本上是将扩展程序注入目标网页正文,但它在目标网页中多次出现。
function main() {
const extensionorigin = "chrome-extension://" + chrome.runtime.id;
if (!location.ancestorOrigins.contains(extensionorigin)) {
// Fetch the local React index.html page
fetch(chrome.runtime.getURL("index.html") /*,options */)
.then((response) => response.text())
.then((html) => {
const styleStashHTML = html.replace(
/\/static\//g,`${extensionorigin}/static/`
);
const body = document.getElementsByTagName("body")[0];
$(styleStashHTML).appendTo(body);
})
.catch((error) => {
console.warn(error);
});
}
}
See Image of Incorrect Injection
任何帮助或指导将不胜感激。谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。