Cannot run Create-React-App in chrome extension with manifest v3 due to security issues

Question

I'm making a chrome extension that will create an iframe, inject it into the page, and then run a react app inside that iframe. I'm making the react app with Create React App and one of the <script/>s in build/index.html will not be executed due to security issues.

The index.html has three <script/>s in it:

<script>!function(e){function r...<LONG CHUNK OF BUNDLED CODE></script>
<script src="/static/js/2.f6218dca.chunk.js"></script>
<script src="/static/js/main.c335a43f.chunk.js"></script>

The first script listed above is a large bundled script that I mainly cut out here. The second two seem to load and run fine, but I get the following error message for the first one.

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx='), or a nonce ('nonce-...') is required to enable inline execution.

I have encountered this error before when working with manifest v2 and know there are a bunch of answers showing how to get around it, but they don't seem to work with manifest v3. As stated here about the new v3 security policies:

"The script-src, object-src, and worker-src directives may only have the following values:

• self
• none
• Any localhost source, (http://localhost, http://127.0.0.1, or any port on those domains)"

therefore the error message above seems to be outdated. If I add 'unsafe-inline' or 'sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx=' to my content security policy I can't load the extension into Chrome - it's rejected with a message like "'content_security_policy.extension_pages': Insecure CSP value "'unsafe-inline'" in directive 'script-src'."

Also it seems I have the right v3 security policy set for the other two scripts - I can verify this by changing it and getting three of the above error messages, one for each script.

"content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
},

Is there anyway to load the first script of bundled js code? Or would I have to put it in another file and load it with <script src="/path/to/new_file.js"...?

Also here is the code in my content script that creates the iframe and injects the react app into it, in case it's relevant:

const modal = document.createElement('dialog');
modal.setAttribute("style", "height:40%");
modal.innerHTML =
       `<iframe id="headlineFetcher" style="height:100%"></iframe>
        <div style="position:absolute; top:0px; left:5px;">  
            <button>x</button>
        </div>`;
document.body.appendChild(modal);
const dialog = document.querySelector("dialog");
dialog.showModal();

const iframe = document.getElementById("headlineFetcher");  
iframe.src = chrome.runtime.getURL("index.html");
iframe.frameBorder = 0;

Answer 1

You'll need to set an environment variable to tell it to not use an inline script:

INLINE_RUNTIME_CHUNK=false

Add this to your .env file and when you rebuild the offending bit of React is placed into a file.