How to launch React App in content.js of Chrome Extension - reactjs

Question

I have a very simple React Application that I want to load into the DOM of a page from a Chrome extension.
I'm using NPM to build the React app which runs fine under NPM.
Must tutorials show how to do this by invoking "index.html" in chrome_url_overrides => newtab.. like this:
chrome_url_overrides": {
"newtab": "index.html"
}
I have found a few tutorials showing how to do it as a content script (which is the requirement).
e.g. https://medium.com/#yosevu/how-to-inject-a-react-app-into-a-chrome-extension-as-a-content-script-3a038f611067
As described in this tutorial, I have amended my NPM build to output the js and css files in the "static" directory of the build with consistent names so that they can be referenced in the chrome manifest.
And I have added this section to my index.js file
// Add a root node to the DOM
const rt = document.createElement('div');
rt.setAttribute("id", "my-root");
document.body.appendChild(rt);
ReactDOM.render(<App />, rt);
So far, so good.
When I build the code with npm and load the unpacked directory as a chrome extension all appears well but nothing happens on the page that is loaded (which definitely matches the manifests "match" criteria).
I noticed that when it works using the index.html file, the version of that file that is built by npm includes 3 new sets of elements:
1.) The required div in the html that I'm injecting above:
<div id="loop-root"/>
2.) the following scripts:
<script src="/static/js/2.chunk.js"/> <script src="/static/js/main.chunk.js"/>
3.) between 1 and 2 some inline javascript that looks like this:
<script>!function(f){function e(e){for(var r,t,n=e[0],
.....
;var r=window["webpackJsonploop-messenger"]=window["webpackJsonploop-messenger"]||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;i()}([])</script>
Now, If I include the scripts in "2" above AND I include the inline javascript in "3" in a new js file that I reference as a content-script in the chrone manifest, then the app launches when I reloaded the given page.
Hooray!
... but there are errors in the console like this:
Uncaught (in promise) DOMException
and the app doesn't run correctly.
So, my question is:
a.) What is this inline javascript doing and why is it required in index.html?
b.) Why is it not mentioned in any of the tutorials that are doing this kind of thing?
c.) Is there a simpler way to get this working (surely there is)?