Chrome扩展Manifest V3中default_popup无法加载TSX文件求助

以下是几个常见的原因及对应的解决方法：

• 直接引入未编译的TSX文件
  浏览器本身无法解析TSX语法，Manifest V3也不允许在popup的HTML中直接引入.tsx源文件。你需要先用打包工具（如Vite、Webpack）将React项目编译成浏览器可识别的JS文件，然后在index.html中引入编译后的产物（比如dist/main.js这类文件），而不是直接引用index.tsx。

• 内容安全策略（CSP）限制
  Manifest V3的CSP规则比V2严格很多，默认配置可能会阻止脚本执行或资源加载。检查你的manifest.json中的content_security_policy字段：

  "content_security_policy": {
    "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'"
  }
  

  注意：unsafe-eval仅适用于开发环境（比如React的Fast Refresh需要它），生产环境必须移除该配置，改用完全编译后的静态JS文件。

• React挂载目标元素缺失
  确认你的index.html中存在React挂载的根元素，比如：

  <div id="root"></div>
  

  同时检查index.tsx中的挂载代码是否正确指向这个元素：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root')!);
  root.render(<App />);
  

• 打包路径配置错误
  如果使用打包工具，要确保输出的资源路径为相对路径——因为Chrome扩展的popup是本地文件，绝对路径会导致资源加载失败。以Vite为例，在vite.config.ts中配置相对路径输出：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
      rollupOptions: {
        output: {
          entryFileNames: 'assets/[name].js',
          chunkFileNames: 'assets/[name].js',
          assetFileNames: 'assets/[name].[ext]'
        }
      }
    }
  });
  

• Manifest配置路径错误
  检查manifest.json中default_popup的路径是否正确。比如如果你的index.html在打包后的dist目录下，应该配置：

  "action": {
    "default_popup": "dist/index.html"
  }
  

  同时确保manifest_version已设置为3，且没有Manifest V2的废弃字段（比如background.scripts要替换为background.service_worker）。

• 通过开发者工具排查具体错误
  右键点击扩展图标，选择「检查弹出窗口」，打开开发者工具。查看Console标签页的报错信息（比如语法错误、CSP拦截提示），以及Network标签页的资源加载状态（比如是否有404错误），这些信息能直接帮你定位问题所在。

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