Chrome extension manifest v3 with React-CodePudding

I'm looking to add create a chrome extension with manifest v3 to use the scripting permission. I've created a React ui using v2 where I could copy over the dodgy SHA key from the Chrome error and make it allow it to run in my browser. Now in v3 the content_security_policy has changed to an object and with this version I can't get Chrome to allow my extension to show up. Have you got any idea how to get the chrome extension to play ball with my react app?

Getting an error:

Failed to load extension
File
\\wsl$\Ubuntu\home\peterpoliwoda\Develop\git\react-plugin-typescript\build
Error
'content_security_policy.extension_pages': Insecure CSP value "'sha256-m1InakbNccQ3GMWQxjDkpe3xtz7EYSSUcfxN6JYBtDk='" in directive 'script-src'.
Could not load manifest.

CodePudding user response：

Thank you @Neea for helping with this. The problem is indeed with the inline script that React places in the index.html file at build stage. The fix is to place it inside of a separate script file. Sounds a little counter intuitive tbh but it works!

In index.html I needed to replace this:

<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script>!function(e){function t(t){for(var n,i,a=t[0], 
...
</script>

<script src="/static/js/2.828ba7e0.chunk.js"></script>
...

with a simple script file, placed for example in the static/js/inline.js file together with the rest of the dynamically generated chunks:

<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script src="/static/js/inline.js"></script>

<script src="/static/js/2.828ba7e0.chunk.js"></script>
...

That's it! I will need to write a post-build script that will do this automatically now because doing it every time seems like a bit of a hassle.

EDIT:
You can use the INLINE_RUNTIME_CHUNK option in Create React App to remove the inline script directly. This fixes everything automagically! Run your build script with an environment variable:

export INLINE_RUNTIME_CHUNK=false; yarn build

That was the main problem. The error was actually related to the fact that I left the CSR value inside of the manifest.yml file:

...
"content_security_policy": {
  "extension_pages": "script-src 'self' 'sha256-m1InakbNccQ3GMWQxjDkpe3xtz7EYSSUcfxN6JYBtDk='; object-src 'self'"
  },
},
...