使用CSXJS、Vite和React创建Chrome扩展新项目时遇MIME类型错误

DevOps 小满

2026-7-27

解决CSXJS创建Chrome扩展时的MIME类型错误

报错信息：

main.jsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

问题核心

Chrome扩展对ES模块的MIME类型校验严格，.jsx文件被识别为text/plain而非正确的application/javascript，导致模块加载失败。

修复步骤

调整Manifest配置
在manifest.json中，确保脚本入口指向CSXJS构建后的JS文件（而非原始.jsx），同时正确声明type: "module"：

{
  "background": {
    "service_worker": "dist/background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["dist/content.js"],
      "type": "module"
    }
  ]
}

修正CSXJS开发服务器MIME类型
如果是开发模式下的问题，在CSXJS配置文件中添加MIME类型映射，确保.jsx文件以正确类型返回：
```
// csxjs.config.js
export default {
  server: {
    headers: {
      'Content-Type': 'application/javascript'
    }
  }
}
```

配置Web可访问资源
若仍无效，在manifest.json中明确指定.jsx文件的MIME类型：

{
  "web_accessible_resources": [
    {
      "resources": ["*.jsx"],
      "matches": ["<all_urls>"],
      "content_type": "application/javascript"
    }
  ]
}