本文介绍在基于 Vite + CRXJS 构建浏览器扩展时，如何让 manifest.json 中 web_accessible_resources 引用的 JS 文件（如 src/injection.js）也参与 Vite 的压缩与哈希处理，而非被直接复制到输出目录。
本文介绍在基于 vite + crxjs 构建浏览器扩展时，如何让 `manifest.json` 中 `web_accessible_resources` 引用的 js 文件（如 `src/injection.js`）也参与 vite 的压缩与哈希处理，而非被直接复制到输出目录。
默认情况下，Vite 仅对入口文件（如 main.ts、background.ts 或 content.ts）执行打包、转译与压缩；而 web_accessible_resources 中声明的资源（例如 src/injection.js）若未显式纳入构建图谱，CRXJS 插件会将其作为静态资产直接拷贝至输出目录，跳过所有构建优化流程。
要解决此问题，核心思路是：将这些 JS 资源显式注册为 Rollup 的输入（build.rollupOptions.input），使其进入 Vite 的构建管线，从而触发 TypeScript 编译、Tree-shaking、代码压缩及哈希命名等标准构建行为。
✅ 正确配置方式（推荐自动化提取）
修改 vite.config.ts，动态解析 manifest.web_accessible_resources 中所有 .js 路径，并将其映射为 public/ 下的可构建入口（注意：CRXJS 要求 web_accessible_resources 中路径需为构建后相对路径，因此建议将 injection.js 移至 public/ 目录下，或通过别名+重写路径确保一致性）：
// vite.config.ts
import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './src/manifest'
// 自动提取所有 web_accessible_resources 中的 .js 文件（假设它们位于 public/ 下）
const jsFilesToInclude = manifest.web_accessible_resources
.flatMap(item => item.resources)
.filter(path => path.endsWith('.js'))
.map(path => {
// 若原始路径为 "src/injection.js"，需确保该文件实际存在于 public/ 目录
// 推荐做法：将 injection.js 放入 public/injection.js，manifest 中也改为 "injection.js"
return `public/${path.replace('src/', '')}`
})
export default defineConfig(({ mode }) => {
const isProduction = mode === 'production'
return {
build: {
minify: isProduction,
emptyOutDir: true,
outDir: 'build',
rollupOptions: {
input: jsFilesToInclude.length > 0 ? jsFilesToInclude : undefined, // 避免空数组导致警告
output: {
entryFileNames: 'assets/[name]-[hash].js',
chunkFileNames: 'assets/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash][extname]'
}
}
},
plugins: [
crx({ manifest })
],
// ⚠️ 重要：确保 public/ 下存在对应文件（如 public/injection.js）
// 若仍想保留 src/injection.js，可通过 copy plugin + build.rollupOptions.plugins 手动复制并处理，但更推荐统一放 public/
}
})
? 注意事项与最佳实践
- 路径一致性：web_accessible_resources.resources 中列出的路径必须与最终构建产物路径匹配。强烈建议将注入脚本（如 injection.js）置于 public/ 目录下，并在 manifest.ts 中直接引用 "injection.js"，避免 src/ 路径引发构建定位歧义。
- 无入口依赖：injection.js 通常为纯逻辑脚本（无 ES 模块导入），Vite 仍可压缩它；若含 import 语句，请确保其模块解析正常（如配置 resolve.alias 或使用 @rollup/plugin-inject）。
- 避免重复打包：确保该文件不被其他插件（如 @vitejs/plugin-react）意外识别为组件入口，否则可能引发双重打包。
- 开发调试友好：生产环境启用 minify: true，开发时可设为 false 并配合 sourcemap: true 方便调试。
✅ 验证是否生效
构建完成后检查 build/ 目录：
- 原始 injection.js 应已消失；
- 出现类似 assets/injection-abc123.js 的哈希化、压缩后文件；
- manifest.json 中 web_accessible_resources.resources 仍为 "injection.js" —— 因 CRXJS 会在打包后自动重写资源路径（前提是 injection.js 在 public/ 下且未被排除）。
通过此配置，你既能保持注入脚本的独立性与运行时灵活性，又可享受现代构建工具链带来的体积优化与缓存优势。
