解决Chrome扩展（Vite+React+TS）中内容脚本的模块导入错误

你遇到的报错是因为Chrome Manifest V3中，通过content_scripts字段注入的脚本默认不属于ES模块环境，而Vite默认打包输出的content.js保留了模块语法（比如import），导致浏览器无法识别执行。

修改vite.config.ts的Rollup配置，单独把content入口打包成自执行函数（IIFE），输出的脚本不会包含模块语法，能直接适配Chrome内容脚本环境：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path';
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: 'manifest.json',
          dest: ''
        }
      ]
    })
  ],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        popup: resolve(__dirname, 'index.html'),
        background: resolve(__dirname, "src/background.ts"),
        content: resolve(__dirname, 'src/content.tsx'),
        chat: resolve(__dirname, 'src/chat/Chat.tsx')
      },
      output: [
        // 处理popup、chat、background的ES模块输出
        {
          entryFileNames: '[name].js',
          chunkFileNames: '[name].[hash].js',
          assetFileNames: '[name].[ext]',
          format: 'es',
          dir: 'dist',
          exclude: ['content'] // 排除content入口
        },
        // 单独处理content脚本，打包为IIFE
        {
          entryFileNames: 'content.js',
          format: 'iife',
          dir: 'dist',
          include: ['content'], // 仅处理content入口
          inlineDynamicImports: true // 强制将所有依赖打包进单文件，避免拆分chunk
        }
      ]
    }
  }
})

你的扩展已指定最低Chrome版本为116，完全支持模块类型的内容脚本，可直接在manifest.json中标记：

{
    "name": "My Extension",
    "description": "Extension",
    "version": "1",
    "manifest_version": 3,
    "minimum_chrome_version": "116",
    "action": {
      "default_icon": "icons/icon1.png",
      "default_popup": "index.html"
    },
    "background": {
      "service_worker": "background.js"
    },
    "permissions": ["tabCapture", "offscreen", "scripting"],
    "host_permissions": ["<all_urls>"],
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "type": "module" // 添加该行标记为模块
      }
    ]
  }

注意：若采用此方案，建议在vite.config.ts的Rollup配置中给content入口加上inlineDynamicImports: true，强制将所有依赖打包进单文件，避免chunk路径加载问题。

修改配置后执行npm run build，重新在Chrome中加载扩展，检查内容脚本是否正常运行。

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