Svelte+Vite构建Chrome扩展时，Content Script引入Svelte Store报错

核心原因 #

Chrome 扩展的 Content Script 运行在网页上下文，不支持 CommonJS 的 require 语法。你当前将输出格式设为 CJS，导致打包后的代码包含浏览器无法识别的 require 调用，尤其是引入 Svelte Store 相关依赖时触发错误。

可行配置方案 #

方案1：将 Content Script 打包为 IIFE 格式（无需修改 Manifest）

调整 Rollup/Vite 配置，将 Content Script 的输出格式改为 IIFE（立即执行函数），所有依赖会被打包进一个自包含的脚本，无需 require 即可运行。

示例 Vite 配置（针对 Content Script 单独构建）：

// vite.content.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  build: {
    outDir: 'dist/content',
    lib: {
      entry: 'src/content/main.js', // 你的 Content Script 入口文件
      name: 'CustomContentBundle',
      formats: ['iife'],
      fileName: () => 'customBundle.js'
    },
    rollupOptions: {
      // 强制打包所有依赖，不保留外部 require 引用
      external: [],
      output: {
        globals: {}
      }
    }
  }
});

运行构建命令：vite build --config vite.content.config.js

方案2：将 Content Script 打包为 ESM 格式（需修改 Manifest）

Manifest V3 支持 Content Script 使用 ES 模块，需同时调整打包配置和 Manifest 文件。

1. Vite 配置调整：

// vite.content.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  build: {
    outDir: 'dist/content',
    lib: {
      entry: 'src/content/main.js',
      formats: ['es'],
      fileName: () => 'customBundle.js'
    },
    rollupOptions: {
      external: [],
    }
  }
});

2. 修改 manifest.json 中的 Content Script 配置，添加 "type": "module"：

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

额外注意事项 #

• 确保 Svelte Store 使用 ES 模块语法导入：import { writable } from 'svelte/store';
• 避免在 Content Script 中使用 Node.js 专属模块（如 fs、path），这类模块无法在浏览器环境运行
• 若有多个 Content Script 入口，可在 Rollup 的 input 字段中指定多个文件，打包为单个 IIFE/ESM 文件

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