Chrome扩展Manifest V3内容脚本导入crc32报模块语法错误

问题核心 #

在Chrome扩展的内容脚本中导入crc包后，编译后的代码保留了import语句，导致浏览器抛出Uncaught SyntaxError: Cannot use import statement outside a module错误；但相同导入在扩展内的页面和Svelte组件中能正常运行，其他依赖（如saveAs）也被正确打包成非模块形式。

原因分析 #

Chrome内容脚本默认不支持ES模块语法，而Vite对内容脚本的打包策略与扩展页面/Svelte组件不同：后者被配置为支持模块，而内容脚本可能被默认输出为ES模块格式，或者crc包未被正确打包进内容脚本文件，导致保留了import语句。

解决方案 #

方案1：将内容脚本标记为模块（Chrome 92+支持） #

在manifest.json中给内容脚本添加"type": "module"声明，让Chrome以模块方式加载内容脚本：

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

注意：需确保Vite打包后的资源相对路径正确，避免模块加载失败。

方案2：配置Vite将内容脚本打包为自执行函数（IIFE） #

修改vite.config.ts，强制内容脚本打包成非模块格式，把所有依赖直接嵌入文件：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  // 强制预打包crc依赖
  optimizeDeps: {
    include: ['crc'],
  },
  build: {
    rollupOptions: {
      input: {
        popup: './src/popup/index.html',
        content: './src/content-script.ts',
      },
      output: {
        // 禁用代码分割，避免生成额外chunk
        manualChunks: undefined,
        // 全局输出格式设为IIFE，所有代码打包成自执行函数
        format: 'iife',
        entryFileNames: '[name].js',
        chunkFileNames: 'assets/[name].[hash].js',
      },
    },
  },
});

如果需要给不同入口设置不同格式（比如页面用ES模块，内容脚本用IIFE），可以用Rollup的多输出配置：

output: [
  {
    // 内容脚本配置
    entryFileNames: 'content.js',
    format: 'iife',
    dir: 'dist',
  },
  {
    // 页面入口配置
    entryFileNames: 'popup/[name].js',
    format: 'es',
    dir: 'dist',
  }
]

验证 #

重新执行打包命令后，查看dist/content.js，确认文件中不再有import语句，crc32函数已被嵌入代码中，此时内容脚本即可正常运行。

内容的提问来源于stack exchange，提问作者Web and Flow