title: Modify React App in Chrome Extension
body: <p>I have built a Chrome extension that modifies a React app client side. So far I was able to</p>
  
  <p><strong>1)</strong> inject React and ReactDom from development branch</p>
  
  <pre><code>let injc=(src,cbk) =&gt; { let script = document.createElement('script');script.src = src;document.getElementsByTagName('head')[0].appendChild(script);script.onload=()=&gt;cbk() }
  injc("https://unpkg.com/react@16/umd/react.development.js",() =&gt; injc("https://unpkg.com/react-dom@16/umd/react-dom.development.js",() =&gt; { console.log("Hello")}))
  ReactDOM.render('&lt;Hello name="World" /&gt;', document.getElementById('container'));
  </code></pre>
  
  <p>see <a href="https://gist.github.com/loretoparisi/a5cd7ab92d221578cc540f530a777b56" rel="noreferrer">here</a> for more info about this code injection.</p>
  
  <p><strong>2)</strong> I have used the <a href="https://github.com/remarkablemark/html-react-parser/issues" rel="noreferrer">HTMLReactParser</a>  that transforms HTML to React Component in order to get my html outer html node contents and turn into a React Element:</p>
  
  <pre><code> var reactObj=HTMLReactParser(node.outerHTML);
   ReactDOM.render(reactObj, this.textarea);
  </code></pre>
  
  <p>This seems to work fine, preventing and any React rendering issues due to the mutation of the React code i.e. it actually edit the React components. It also prevents the error <code>Uncaught Error: Minified exception occurred; use the non-minified dev environment</code> when using non development react libraries.</p>
  
  <p>See <a href="https://stackoverflow.com/questions/36825895/chrome-extension-mutating-running-react-application?utm_medium=organic&amp;utm_source=google_rich_qa&amp;utm_campaign=google_rich_qa">here</a> for other attempts about mutating React components in a Chrome Extension.</p>
  
  <p><strong>3)</strong> That said, now I'm trying to apply a text overlay to the actual text nodes in the React app using the library <a href="https://github.com/yuku/textoverlay" rel="noreferrer">TextOverlay</a>, but despite of some success and some bug fix I had on that library, I cannot get rid of this. See <a href="https://github.com/yuku/textoverlay/issues/20" rel="noreferrer">here</a> for more details about this specific integration issue.</p>
  
  <p><a href="https://github.com/loretoparisi/chrome-extension-react-app" rel="noreferrer">This</a> is the example code. Given a React app with some text, I try to apply a text overlay on that like here:</p>
  
  <p><a href="https://i.stack.imgur.com/ONueY.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ONueY.jpg" alt="enter image description here"></a></p>
  
  <p>Currently the results is not what is expected, since the overlay is partially applied:</p>
  
  <p><a href="https://i.stack.imgur.com/Z0Tcf.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Z0Tcf.jpg" alt="enter image description here"></a></p>
  
  <p>Example Code Repo: <a href="https://github.com/loretoparisi/chrome-extension-react-app" rel="noreferrer">chrome-extension-react-app</a></p>