mcpField
C
chrome-extension-multiple-entry-points

chrome-extension-multiple-entry-points

github.com/gkwa开发088 次安装5 天前更新
代码仓库

关于 chrome-extension-multiple-entry-points

为含 background、content 和 popup 入口的 Chrome 扩展提供构建方案。每个入口使用独立的 Vite 配置，生成无共享代码块的独立 IIFE 包。

主要功能

  1. 01每个入口使用独立 Vite 配置
  2. 02生成独立 IIFE 输出
  3. 03内联动态导入
  4. 04构建结果追加到 dist/
  5. 05跨平台资源复制命令

适用场景

  1. 01打包 background、content 和 popup 脚本
  2. 02避免扩展上下文之间共享代码块
  3. 03将扩展资源构建到 dist/

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gkwa/volcanicviper --skill chrome-extension-multiple-entry-points

安装后在 Claude Code 中输入/chrome-extension-multiple-entry-points确认已加载。

附带文件tile.json

详细介绍

问题

Chrome 扩展需要多个入口点（background、content、popup），但现代打包工具会创建共享代码块，而 Chrome 无法在相互隔离的执行上下文中加载这些代码块。

解决方案

为每个入口点使用单独的 Vite 配置文件。每次构建都会生成一个独立的 IIFE 文件，不包含共享代码块。

项目结构

my-extension/
├── src/
│   ├── background/background.ts
│   ├── content/content.ts
│   ├── popup/
│   │   ├── popup.ts
│   │   ├── popup.html
│   │   └── popup.css
│   └── manifest.json
├── vite.background.config.ts
├── vite.content.config.ts
├── vite.popup.config.ts
└── package.json

package.json 脚本

{
  "scripts": {
    "build": "shx rm -rf dist && shx mkdir -p dist && pnpm run build:all && pnpm run copy:assets",
    "build:all": "pnpm run build:background && pnpm run build:content && pnpm run build:popup",
    "build:background": "vite build --config vite.background.config.ts",
    "build:content": "vite build --config vite.content.config.ts",
    "build:popup": "vite build --config vite.popup.config.ts",
    "copy:assets": "shx cp src/manifest.json src/popup/popup.html src/popup/popup.css dist/",
    "dev": "pnpm run build && pnpm run build --watch"
  },
  "devDependencies": {
    "@types/chrome": "^0.0.323",
    "typescript": "^5.8.3",
    "vite": "^6.3.5",
    "shx": "^0.3.4"
  }
}

Vite 配置模式

每个配置都遵循相同的模式——只有输入文件和输出文件名不同：

import { defineConfig } from "vite"
import { resolve } from "path"

export default defineConfig({
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: resolve(__dirname, "src/background/background.ts"),
      output: {
        entryFileNames: "background.js",
        dir: "dist",
        format: "iife",
        inlineDynamicImports: true,
      },
    },
    target: "es2020",
  },
  define: {
    'process.env': {},
    'global': 'globalThis'
  },
})

关键规则

  • 使用 format: "iife"——不要使用 ES 模块
  • 设置 inlineDynamicImports: true——不生成共享代码块
  • 使用 emptyOutDir: false——每次构建都会追加到 dist/，而不是覆盖
  • 使用 shx 执行跨平台的复制／删除命令
  • 接受依赖会在多个打包文件中重复——这是有意为之

评论

支持 Markdown