Chrome Extension React + Vite 脚手架

一个用于快速开发 Chrome Extension 的脚手架，使用 React + Vite 构建，支持热重载。

功能特性

• ⚡️ 纯 Vite + React，无额外插件依赖
• ⚛️ React 18 支持
• 🔥 开发模式支持热重载（文件变化自动重建）
• 📦 TypeScript 支持
• 🎨 现代化 UI 模板
• 🧭 支持 New Tab / History / Bookmarks 页面
• 🛠️ 完全可自定义的构建配置

项目结构

.
├── src/
│   ├── manifest.json      # Chrome Extension 配置文件
│   ├── popup.html         # Popup 页面 HTML
│   ├── popup.tsx          # Popup 页面 React 组件
│   ├── popup.css          # Popup 页面样式
│   ├── background.ts      # Service Worker 后台脚本
│   └── content.ts         # Content Script 内容脚本
├── scripts/
│   └── dev.js             # 开发模式脚本（支持热重载）
├── vite.config.ts         # Vite 配置文件
├── tsconfig.json          # TypeScript 配置
└── package.json

快速开始

使用脚手架创建项目

npx create-extension-react my-extension

安装时会提示选择 newtab / history / bookmarks 三选一，并只生成对应模板。

也可以通过参数直接指定类型：

npx create-extension-react my-extension --type newtab

安装依赖

npm install

开发模式（支持热重载）

npm run dev

开发模式会：

1. 自动监听文件变化并重新构建
2. 自动复制 manifest.json 到 dist 目录
3. 在 Chrome 中加载扩展后，修改代码会自动重建，刷新扩展即可看到更新

在 Chrome 中加载扩展：

1. 打开 Chrome 浏览器
2. 访问 chrome://extensions/
3. 开启"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择项目的 dist 目录
6. 开发时，修改代码后点击扩展的刷新按钮即可看到更新

构建生产版本

npm run build

构建完成后，dist 目录就是可以打包的扩展文件。

注意：

• npm run dev - 开发模式，代码不压缩，构建速度快，便于调试
• npm run build - 生产模式，代码会压缩，文件体积小，适合发布

开发说明

热重载

在开发模式下（npm run dev），修改代码后：

1. Vite 会自动监听文件变化并重新构建到 dist 目录
2. manifest.json 也会自动同步到 dist 目录
3. 在 Chrome 扩展管理页面点击扩展的刷新按钮即可看到更新

自定义配置

这是一个纯 Vite + React 的配置，你可以完全自定义：

• 修改构建配置：编辑 vite.config.ts
• 添加新页面：在 src 目录创建文件，然后在 vite.config.ts 的 rollupOptions.input 中添加入口点
• 修改开发脚本：编辑 scripts/dev.js

页面覆盖

项目内置了 3 个可用页面：

• newtab：新标签页
• history：历史记录页
• bookmarks：书签页

对应入口文件：

• src/newtab.html → src/newtab/index.tsx
• src/history.html → src/history/index.tsx
• src/bookmarks.html → src/bookmarks/index.tsx

如果只需要其中某一类页面，请在 src/manifest.json 的 chrome_url_overrides 中保留对应条目，并同步删除 vite.config.ts 的 rollupOptions.input 入口。

使用 Chrome API

项目已配置 TypeScript 类型支持，可以直接使用 Chrome API：

chrome.tabs.query({ active: true }, (tabs) => {
  console.log(tabs);
});

许可证

MIT