Vite启动器

VExt — Vite 启动器模板

作者 waahah

VExt 是一个基于 Vite 的 Web 扩展启动器模板，用于编写一次代码并构建到 Chrome、Firefox、Opera、Edge 等浏览器，附带自动打包与商店发布脚本。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

基于 Vite 的开发服务器与 HMR 热重载，代码更改时自动构建

02

针对 Firefox 和 Chrome 分别提供 watch、生产构建、本地启动与 ZIP 打包命令

03

浏览器定制清单生成，支持跨浏览器 Web 扩展 API

04

内置签名发布脚本，可上传至 Firefox 与 Chrome 扩展商店

05

附带 GitHub Actions 工作流，支持 tag 触发或手动触发自动发布

06

与前端框架无关，支持 SASS 样式与 ES6 模块

模板详细介绍

VExt 是面向 WebExtension 开发的启动器模板，核心目标是让同一份扩展代码适配多个浏览器。它基于 Vite 提供开发服务器与热更新，并针对 Firefox、Chrome 分别提供 watch 与生产构建命令，构建产物默认输出到 /dist 目录。模板包含浏览器定制清单生成、SASS 样式和 ES6 模块支持，并声明与前端框架无关。

在发布环节，项目提供 ZIP 打包、CRX 打包以及 Firefox 和 Chrome 的签名发布脚本，签名后的 .XPI 输出到 web-ext-artifacts/ 目录。仓库内包含 GitHub Actions 工作流，可在新 tag 提交或手动触发时构建扩展并部署到 Chrome Web Store 与 Mozilla Addons。使用签名和自动发布功能需要在 package.json 或 GitHub Actions secrets 中配置对应商店的 API 凭据。

项目通过独立的 vext-cli 工具（create-vext）创建新项目，前置要求为 Node 18 及以上、npm 9.x 及以上。浏览器支持方面，README 列出 Chrome 79+、Firefox 52+、Opera 36+、Edge 79+，以及 Yandex、Brave、Vivaldi 的最新版本。

Vite启动器

适合你的项目吗？

适用场景

  • 需要同一份代码同时构建 Chrome 和 Firefox 扩展的项目
  • 希望用 Vite 热更新开发 WebExtension 的团队
  • 需要将扩展签名并自动发布到 Chrome Web Store 与 Mozilla Addons 的流程
  • 在 GitHub Actions 中按 tag 或手动触发扩展构建与部署

适合人群

  • 有 WebExtension 开发经验并熟悉 Node 与 npm 的开发者
  • 需要跨浏览器扩展构建与发布流程的前端工程师
  • 希望以模板方式快速初始化扩展项目的个人或团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    前置要求：Node >= 18，npm 9.x+。

  2. 2

    可通过 create-vext 全局安装后运行 vext create <project-name> 创建新项目，或克隆仓库后执行 npm install。

  3. 3

    开发使用 npm run dev，Firefox/Chrome 热更新构建使用 npm run watch:firefox 或 npm run watch:chrome。

  4. 4

    生产构建使用 npm run build:firefox 或 npm run build:chrome，产物默认输出到 /dist 目录。

  5. 5

    签名发布需在 package.json 中配置 Firefox 的 JWT issuer/secret 或 Chrome 的 client id、client secret、refresh token、extension id，CI 发布需在 GitHub Actions 中配置对应 secrets。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • Firefox 签名发布功能需要自行配置 Mozilla 的 JWT issuer 与 secret 等 API 密钥，未配置则无法使用该发布流程。
  • Chrome 签名发布功能需要自行配置 Chrome Web Store 的 client id、client secret、refresh token 与 extension id 等凭据。
  • 自动发布到 Chrome Web Store 与 Mozilla Addons 需在 GitHub Actions 中配置对应商店的 secrets（CLIENT_ID、CLIENT_SECRET、REFRESH_TOKEN、EXTENSION-ID、WEB_EXT_API_KEY、WEB_EXT_API_SECRET）。
  • CRX 打包功能需要先自行配置 scripts/crx-pack.js 脚本，否则无法生成 .crx 扩展包。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

签名发布Firefox扩展（需配置API密钥）

README 原文

签名发布Chrome扩展（需配置Web Store凭据）

README 原文

可以通过在 GitHub Actions 中添加以下 secrets 来同时自动发布到 Chrome Web Store 和 Mozilla Addons

README 原文

生成.crx扩展包（需配置scripts/crx-pack.js）

README 原文
https://github.com/waahah/VExt/blob/main/LICENSEhttps://github.com/waahah/VExt/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 69 / 100
技术栈
Vite
网站类型
启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2025-04-26
截图检查日期
2026-10-03

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 57e09fcdad058d06e22697376ea4f9f4357d159a445240aecdc7e4367be554b0

2026-10-03T18:57:57.596Z

来源文件 / 仓库
<h1 align="center">🚀 VExt</h1>
<p align="center">🖥构建”一次编写，在任何浏览器上运行“的 Web 扩展启动器🔋</p>
<div align="center">
  <a href="https://github.com/waahah/VExt/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/waahah/VExt.svg" alt="LICENSE" />
  </a>
  <a href="https://github.com/waahah">
     <img src="https://img.shields.io/static/v1?label=%20&message=Github&style=flat-square&labelColor=black&color=4258dd&logo=github" alt="github" />
  </a>
  <a href="README_EN.md">English</a>
  <a href="README.md">简体中文</a>
</div>
<h3 align="center">🙋‍♂️ Made by <a href="https://www.waahah.xyz/about">@waahah</a></h3>
<hr />

![](https://s2.loli.net/2025/04/01/naCU38g5qI9wANK.png)

### 特性
- ✅ 跨浏览器支持 （Web 扩展 API）

- 🌈 代码更改时自动构建和 HMR 热重载

- 📦 自动打包特定于浏览器的构建文件

- 📄 浏览器定制清单生成

- 🎨 与前端框架无关

- 🤖 自动发布

- ✨ 持续集成

- 🥢 SASS 样式

- 🎯 ES6 模块支持

- 📊 智能重新加载
  

### 浏览器支持

| [![Chrome](https://s2.loli.net/2025/03/31/rAg93eNCOj8P54y.png)](/) | [![Firefox](https://s2.loli.net/2025/03/31/yJiWdqaP6Y5ozsr.png)](/) | [![Opera](https://s2.loli.net/2025/03/31/qKPSGrilQvmgy9p.png)](/) | [![Edge](https://s2.loli.net/2025/03/31/KTsyfa3QDZ6o9dn.png)](/) | [![Yandex](https://s2.loli.net/2025/03/31/arqyo6B2w7VeAld.png)](/) | [![Brave](https://s2.loli.net/2025/03/31/YlTZOBo5AsWqSia.png)](/) | [![vivaldi](https://s2.loli.net/2025/03/31/a9OmnPAipo6F7Yz.png)](/) |
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 79 & later ✔                                                 | 52 & later ✔                                                 | 36 & later ✔                                                 | 79 & later ✔                                                 | Latest ✔                                                     | Latest ✔                                                     | Latest ✔                                                     |

### 🚀 快速开始

使用 [vext-cli](https://github.com/waahah/vext-cli) 创建一个新的项目非常简单，只需运行以下命令：

```bash
npm install -g create-vext
# 或者使用 yarn
yarn global add create-vext
# 创建新项目
vext create <project-name>
```


### 📦 前置要求

- `node >= 18` 
- `npm 9.x+`


### 🔧 安装依赖

```bash
git clone https://gitee.com/waahah/VExt.git
cd VExt
npm install
```


### 开发模式

```bash
npm run dev           # 启动开发服务器（HMR）
npm run watch:firefox # Firefox热更新构建
npm run watch:chrome  # Chrome热更新构建
```


### 生产构建

```bash
npm run build:firefox  # Firefox生产构建
npm run build:chrome   # Chrome生产构建
```


### 本地运行

```bash
npm run start:firefox  # 启动Firefox测试实例
npm run start:chrome   # 启动Chrome测试实例
```
运行后会启动对应浏览器，并自动加载运行项目。


### 代码质量

```bash
npm run lint  # 执行构建并代码校验
```


### 打包ZIP
```bash
npm run pack:firefox  # Firefox打包
npm run pack:chrome   # Chrome打包
```
打包后的文件会输出到 `web-ext-artifacts/` 目录。


### CRX打包
```bash
npm run pack:crx  # 生成.crx扩展包（需配置scripts/crx-pack.js）
```


### 签名发布
```bash
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密钥请查看[此指南](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#web-ext-sign)
- `chrome`获取API密钥请查看[此指南](https://github.com/fregante/chrome-webstore-upload-keys)


### 持续集成

可以通过在 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](https://github.com/waahah/VExt/actions) 工作流，CI可以：

- 在有新的 tag 提交时触发
- 手动触发，只需点击 Actions 标签页中的 “Run workflow”


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

### 🧹使用此项目构建的扩展
- [Meow](https://github.com/waahah/Meow)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

react-starter-kit

react-starter-kit

Modern React starter kit with Bun, TypeScript, Tailwind CSS, tRPC, Stripe, and Cloudflare Workers. Production-…

Vite · SaaS

cove

cove

The Cove Stack: 🏝️ minimal TanStack Start template with Vite+, Better Auth, Drizzle ORM, shadcn/ui

Vite · SaaS

vite-react-boilerplate

vite-react-boilerplate

A production ready, scalable starter template for Vite + React

Vite · 启动器

react-vite-admin

react-vite-admin

This Starter utilizes React, Recoil, React Query, React Hooks, Typescript, Axios And Vite. 全新技术栈的后台管理系统

Vite · 后台

typescript-react_best_practices-vite_template

typescript-react_best_practices-vite_template

<⚡⚛️> Start your React project with Vite following code best practices (TypeScript, Linting, testing, CI/CD…)

Vite · 启动器

cloudflare-starter-kit

cloudflare-starter-kit

Template (boilerplate) repository for scaffolding Cloudflare Workers projects

Vite · 启动器