javascriptgoogle-chrome-extensionvite

CSP error with @crxjs/vite-plugin content scripts

I am using @crxjs/vite-plugin v1.x. Everything works perfectly with it, but when using content_scripts, the browser throws a CSP error despite the correct configuration:

Refused to load the script 'chrome-extension://.../src/content.ts' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback

I am experiencing the issue in Chrome 131 and Edge 131 as well.

manifest.config.ts

export default defineManifest(async (env) => ({
  content_scripts: [{
    js: [
      'src/content.ts',
    ],
    matches: [
      'https://stackoverflow.com/*',
    ],
  }],
})

vite.config.ts

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.config'

export default defineConfig({
  plugins: [
    crx({ manifest }),
  ],
})
Solution

  • The error occurs in v1.x starting from Chrome 130+. This fix has only been added in the v2.x, which is still in beta. Using v2.0.0-beta.26 or higher resolves the issue on Chrome 130+.

    npm install --save-dev @crxjs/vite-plugin@beta
pnpm i -D @crxjs/vite-plugin@beta