如何在网页中注入基于反应应用程序的 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 (将#修改为@）

browser-extension google-chrome-extension