使用React+Vite开发Chrome扩展时Content Script的ES6 Import报错求助

核心原因 #

Chrome扩展的Content Script默认以非模块模式执行，直接使用ES6 import 语句会触发语法错误。需结合Manifest配置与Vite打包规则，让脚本以模块模式运行或把依赖打包成无import的自执行代码。

方案一：Manifest V3（推荐） #

Chrome 91+支持将Content Script声明为ES模块，配合Vite打包成ES模块格式即可解决问题。

1. 修正Manifest配置 #

在manifest.json中为content_scripts添加"type": "module"，并指定Vite打包后的脚本路径：

{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你的目标站点匹配规则
      "js": ["./dist/content.js"], // Vite打包后的Content Script文件
      "type": "module"
    }
  ],
  // 其他扩展配置（如权限、名称等）
}

2. 配置Vite多入口打包 #

修改vite.config.js，指定Content Script为单独入口，并输出ES模块格式：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        // 若有Popup页面可保留，无则删除
        popup: './src/popup.html',
        // Content Script入口文件
        content: './src/content-script.tsx'
      },
      output: {
        entryFileNames: '[name].js',
        chunkFileNames: '[name].js'
      }
    },
    lib: {
      formats: ['es'] // 强制输出ES模块
    }
  }
})

3. 编写Content Script代码 #

直接使用正常React语法，Vite会自动打包所有依赖：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

// 创建根节点并注入页面
const rootDiv = document.createElement('div')
rootDiv.id = 'my-chrome-extension-root'
document.body.appendChild(rootDiv)

// React 18+ 初始化方式
const root = ReactDOM.createRoot(rootDiv)
root.render(<App />)

4. 打包并测试 #

运行vite build生成打包文件，在Chrome扩展管理页面加载dist目录即可。

方案二：Manifest V2（兼容旧版本） #

Manifest V2不支持Content Script模块模式，需让Vite将代码打包成自执行函数（IIFE），消除所有import语句。

1. 修正Manifest配置 #

无需type字段，直接指定打包后的脚本：

{
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["./dist/content.js"]
    }
  ]
}

2. 修改Vite打包配置 #

将输出格式改为IIFE：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        content: './src/content-script.tsx'
      },
      output: {
        entryFileNames: '[name].js',
        format: 'iife' // 打包成自执行函数
      }
    }
  }
})

3. 代码与测试 #

Content Script代码同方案一，运行vite build后加载扩展即可。

关键注意事项 #

• 确认Chrome版本：Manifest V3的模块支持需要Chrome 91及以上。
• 路径校验：确保manifest.json中js字段的路径与Vite打包后的文件路径完全匹配。
• React版本：React 18+需使用createRoot替代旧版render API。

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