使用@crxjs/vite-plugin v1.x配置content_scripts时遭遇CSP错误

问题原因 #

你的配置存在两个核心问题：

1. manifest.config.ts存在语法错误，导致CRXJS无法正确解析并处理content脚本的打包路径，浏览器尝试加载未编译的源码文件触发CSP限制。
2. 开发环境下默认CSP配置可能不允许加载dev server提供的脚本资源。

解决方案 #

1. 修复Manifest语法错误 #

你的manifest.config.ts末尾缺少闭合括号，导致manifest无法被正确生成。修改后的代码如下：

export default defineManifest(async (env) => ({
  content_scripts: [{
    js: [
      'src/content.ts',
    ],
    matches: [
      'https://stackoverflow.com/*',
    ],
  }],
})) // 补全外层函数的闭合括号

2. 适配开发/生产环境的CSP配置 #

根据环境调整content_security_policy，确保开发环境允许加载dev server的脚本，生产环境保持严格的安全策略：

export default defineManifest(async (env) => ({
  content_scripts: [{
    js: ['src/content.ts'],
    matches: ['https://stackoverflow.com/*'],
  }],
  content_security_policy: {
    extension_pages: env.mode === 'development'
      ? "script-src 'self' 'unsafe-eval' http://localhost:5173; object-src 'self'"
      : "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
  },
}))

3. 验证Vite配置 #

确保vite.config.ts中CRXJS插件正确引入manifest，无需额外配置即可自动处理content脚本的打包：

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

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

完成以上修改后，重启Vite开发服务器，content脚本应该能正常注入，不再触发CSP错误。

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