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

, см. здесь для получения дополнительной информации об этом кодеинъекция.

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 при использовании не реагирующих на разработку библиотек.

См. здесь , чтобы узнать о других попытках поменять компоненты React в расширении Chrome.

3) Тем не менее, сейчас я пытаюсь применить наложение текста к фактическим текстовым узлам в приложении React, используя библиотеку TextOverlay , но, несмотря на некоторый успех и исправление ошибок, которые я имел наэта библиотека, я не могу избавиться от этого.См. здесь для получения дополнительной информации об этой конкретной проблеме интеграции.

Этот является примером кода.Учитывая приложение React с некоторым текстом, я пытаюсь применить наложение текста на это, как здесь: