Vite构建Manifest V3扩展：让作为Service Worker的background.js支持import语句的实现方法

阿华AIGC实验室

2026-4-14

我之前开发Chrome扩展时也碰到过一模一样的问题——只要在background.js里用了import语句，Service Worker就变成inactive状态，连调试入口都找不到。其实这主要是Manifest V3对Service Worker的模块要求，加上Vite构建配置的适配问题，咱们一步步来解决：

1. 给Manifest里的Background配置添加模块类型

Chrome的Manifest V3有明确规定：如果Service Worker要使用ES模块（也就是用import/export语法），必须在background字段里显式声明type: "module"。你现在的配置里缺了这一项，浏览器没法正确识别模块脚本，加载失败自然就变成inactive了。

修改你vite.config.js里的manifest配置：

background: {
  service_worker: 'src/background.js',
  type: 'module' // 新增这一行，告诉浏览器这是模块脚本
},

2. 调整Node Polyfills配置，避免干扰Service Worker

你的配置里启用了vite-plugin-node-polyfills，给全局环境添加了Buffer、process这些Node.js专属变量，但Service Worker是纯浏览器环境，根本不需要这些东西，反而会导致脚本加载出错。

可以修改插件配置，要么禁用这些全局变量，要么直接排除background.js的polyfill处理：

nodePolyfills({
  globals: {
    Buffer: false, // 禁用不需要的Node全局变量
    global: false,
    process: false
  },
  exclude: ['src/background.js'], // 不让polyfill影响background脚本
  protocolImports: true
}),

3. 确认Rollup构建配置适配Service Worker

你的rollupOptions已经指定了background的入口，但可以额外明确输出格式为ES模块，确保构建产物符合Service Worker的要求：

build: {
  outDir: 'dist',
  rollupOptions: {
    input: {
      background: path.resolve(__dirname, 'src/background.js'),
      contentScript: path.resolve(__dirname, 'src/contentScript.js'),
      provider: path.resolve(__dirname, 'src/provider.js')
    },
    output: {
      entryFileNames: 'src/[name].js',
      format: 'es' // 明确指定输出ES模块格式
    }
  }
}