如何在网页内注入基于反应应用程序的 chrome 扩展？

Question

我正在开发一个基于反应应用程序的 chrome 扩展，它使用谷歌的材料设计并有几个带导航的页面。

当从浏览器地址工具栏启动扩展程序时，我想在浏览器选项卡中注入扩展程序。 我已经看到多个扩展通过注入一个包含 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);
      });
  }
}

参见错误注射图像

任何帮助或指导将不胜感激。 谢谢！