|
🖥构建”一次编写，在任何浏览器上运行“的 Web 扩展启动器🔋
特性
- ✅ 跨浏览器支持 （ Web 扩展 API ）
- 🌈 代码更改时自动构建和 HMR 热重载
- 📦 自动打包特定于浏览器的构建文件
- 📄 浏览器定制清单生成
- 🎨 与前端框架无关
- 🤖 自动发布
- ✨ 持续集成
- 🥢 SASS 样式
- 🎯 ES6 模块支持
- 📊 智能重新加载
- 🥡 开箱即用
浏览器支持
 |
 |
 |
 |
 |
 |
 |
| 49 & 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>
📦 前置要求
🔧 安装依赖
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>
firefox获取 API 密钥请查看此指南chrome获取 API 密钥请查看此指南
持续集成
可以通过在 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”
立即开始构建跨浏览器扩展项目！ ✨
🧹使用此项目构建的扩展
| 
