🚀 VExt
🖥由 Vite 提供支持的跨浏览器和自动发布 web 扩展插件入门模板🔋
🙋♂️ Made by @waahah
特性
- ✅ 跨浏览器支持 （Web 扩展 API）
- 🌈 代码更改时自动构建和 HMR 热重载
- 📦 自动打包特定于浏览器的构建文件
- 📄 浏览器定制清单生成
- 🎨 与前端框架无关
- 🤖 自动发布
- ✨ 持续集成
- 🥢 SASS 样式
- 🎯 ES6 模块支持
- 📊 智能重新加载
浏览器支持
| 79 & later ✔ | 52 & later ✔ | 36 & later ✔ | 79 & later ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
🚀 快速开始
使用 vext-cli 创建一个新的项目非常简单，只需运行以下命令：
npm install -g create-vext
# 或者使用 yarn
yarn global add create-vext
# 创建新项目
vext create <project-name>
📦 前置要求
node >= 18npm 9.x+
🔧 安装依赖
git clone https://gitee.com/waahah/VExt.git
cd VExt
npm install
开发模式
npm run dev # 启动开发服务器（HMR）
npm run watch:firefox # Firefox热更新构建
npm run watch:chrome # Chrome热更新构建
生产构建
npm run build:firefox # Firefox生产构建
npm run build:chrome # Chrome生产构建
本地运行
npm run start:firefox # 启动Firefox测试实例
npm run start:chrome # 启动Chrome测试实例
运行后会启动对应浏览器，并自动加载运行项目。
代码质量
npm run lint # 执行构建并代码校验
打包ZIP
npm run pack:firefox # Firefox打包
npm run pack:chrome # Chrome打包
打包后的文件会输出到 web-ext-artifacts/ 目录。
CRX打包
npm run pack:crx # 生成.crx扩展包（需配置scripts/crx-pack.js）
签名发布
npm run sign:firefox # 签名发布Firefox扩展（需配置API密钥）
npm run sign:chrome # 签名发布Chrome扩展（需配置Web Store凭据）
自动上传扩展商店签名并发布，签名后的.XPI文件会输出到 web-ext-artifacts/ 目录。
⚙️ 配置说明
- 环境模式：更改manifest文件
- 构建输出：构建产物默认生成至/dist目录
- 签名配置：需在package.json中配置以下凭证：
Firefox: <your-jwt-issuer> 和 <your-jwt-secret>
Chrome:
<your-client-id>
<your-client-secret>
<your-refresh-token>
<your-extension-id>
持续集成
可以通过在 GitHub Actions 中添加以下 secrets 来同时自动发布到 Chrome Web Store 和 Mozilla Addons：
- CLIENT_ID 和 CLIENT_SECRET 以及来自 Google APIs 的 **REFRESH_TOKEN **和 EXTENSION-ID
- WEB_EXT_API_KEY 和来自 AMO 的 WEB_EXT_API_SECRET
GitHub Actions 工作流将会：
- 构建扩展
- 将扩展部署到两个商店
借助包含的 GitHub Action 工作流，CI可以：
- 在有新的 tag 提交时触发
- 手动触发，只需点击 Actions 标签页中的 “Run workflow”
立即开始构建跨浏览器扩展项目！ ✨
