🚀 VExt

🖥构建”一次编写，在任何浏览器上运行“的 Web 扩展启动器🔋

English 简体中文

🙋‍♂️ 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 >= 18
• npm 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/ 目录。

⚙️ 配置说明

1. 环境模式：更改manifest文件
2. 构建输出：构建产物默认生成至/dist目录
3. 签名配置：需在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”

立即开始构建跨浏览器扩展项目！ ✨

🧹使用此项目构建的扩展

• Meow