在 Chrome 扩展中修改 React App

Question

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

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'));

有关此代码注入的更多信息，请参见此处。

2）我使用了HTMLReactParser 将 HTML 转换为 React 组件，以获取我的 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 组件的其他尝试，请参见此处。

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

这是示例代码。给定带有一些文本的 React 应用程序，我尝试在其上应用文本覆盖，如下所示：

目前的结果不是预期的，因为部分应用了覆盖：

示例代码仓库：chrome-extension-react-app