修改Chrome扩展程序中的React App

Question

我构建了一个Chrome扩展程序，用于修改React应用程序客户端。到目前为止，我能够

1）从开发分支注入React和ReactDom

let injc=(src,cbk) => { let script = document.createElement('script');script.src = src;document.getElementsByTagName('head')[0].appendChild(script);script.onload=()=>cbk() }
injc("https://unpkg.com/react@16/umd/react.development.js",() => injc("https://unpkg.com/react-dom@16/umd/react-dom.development.js",() => { console.log("Hello")}))
ReactDOM.render('<Hello name="World" />', document.getElementById('container'));

有关此代码注入的详细信息，请参阅here。

2）我使用了HTMLReactParser将HTML转换为React Component以获取我的html外部html节点内容并转换为React元素：

 var reactObj=HTMLReactParser(node.outerHTML);
 ReactDOM.render(reactObj, this.textarea);

这似乎工作正常，防止和任何React渲染问题由于React代码的变异，即它实际编辑React组件。当使用非开发反应库时，它还可以防止错误Uncaught Error: Minified exception occurred; use the non-minified dev environment。

有关在Chrome扩展程序中改变React组件的其他尝试，请参阅here。

3）也就是说，现在我正在尝试使用库TextOverlay将文本覆盖应用于React应用中的实际文本节点，但尽管取得了一些成功，我在那个库上的错误修复，我无法摆脱这个。有关此特定集成问题的详细信息，请参阅here。

This是示例代码。给定带有一些文本的React应用程序，我尝试在此处应用文本覆盖：

目前结果不符合预期，因为叠加部分应用：

示例代码回购：chrome-extension-react-app