Hey there! It's totally normal to hit this CSP error when building React-based Chrome extensions—even if you swear you aren't using inline scripts. Let's break down the most likely causes and fixes:

1. React's Development Mode is Injecting Hidden Inline Scripts #

When you run your React app in development mode (like with npm start), tools like Webpack Dev Server or Create React App automatically inject inline scripts for hot reloading, error overlays, and other dev-focused features. These are the "invisible" scripts triggering the CSP violation.

• Quick dev fix: Temporarily add the hash provided in your error message (that long sha256-irwQGzGiWtpl6jTh4akRDdUUXCrtjkPABk5rinXZ5yw= string) to your manifest's CSP. This tells Chrome to trust that specific inline script.
• More reliable dev test: Build a production version of your app with npm run build and load that into Chrome instead. Production builds strip out all those dev-specific inline scripts, so the error should vanish.

2. Your Manifest's CSP is Missing Required Hashes #

Chrome extensions enforce strict Content Security Policies, and even React's production runtime might generate tiny inline scripts (like runtime chunks). The error message gives you the exact hash of the blocked script—you just need to add it to your manifest.

For Manifest V2: #

Update your manifest.json to include the hash in the script-src directive:

{
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-irwQGzGiWtpl6jTh4akRDdUUXCrtjkPABk5rinXZ5yw='; object-src 'self'"
}

For Manifest V3: #

Manifest V3 uses a nested structure for CSP. Make sure you target the extension_pages field:

{
  "manifest_version": 3,
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'unsafe-eval' 'sha256-irwQGzGiWtpl6jTh4akRDdUUXCrtjkPABk5rinXZ5yw=';",
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
  }
}

3. Double-Check for "Accidental" Inline Scripts #

Even if you didn't write inline scripts on purpose, scan your entry HTML file (usually public/index.html):

• Do you have inline event handlers like <button onclick="handleClick()">? Replace these with React's onClick prop instead.
• Do you have <script> tags with code directly inside them (not pointing to an external .js file)? Move that code to a separate React component or JS file.

Final Tips #

• Skip using 'unsafe-inline' unless you have no other option—it weakens your extension's security. The hash from the error is a far safer alternative.
• If you're using Create React App, you might need to eject or use a tool like react-app-rewired if you need more control over build-time scripts that affect CSP.

内容的提问来源于stack exchange，提问作者Ben