rsbuild-tailwind-chrome-extension-boilerplate

这是一个基于 rsbuild 和 tailwindcss 构建的 Chrome 扩展程序开发模板项目。本项目旨在为开发者提供一个开箱即用的现代化 Chrome 扩展解决方案，内置 React 与 TypeScript 支持，并集成了高效的构建工具、代码质量工具及自动化发布工作流。

特性

• 快速构建与开发
  采用 rsbuild 实现高效的打包构建和开发服务器支持。

• 响应式 UI 与现代样式
  使用 tailwindcss 快速构建美观、响应式的用户界面，同时配合 prettier-plugin-tailwindcss 保持类排序一致性。

• React 与 TypeScript 支持
  基于 React 构建扩展界面，并采用 TypeScript 实现严格的类型检查，保证代码安全与可维护性。

• 严谨的代码质量控制
  内置 ESLint、Stylelint 和 Prettier 等工具，确保代码风格统一，并通过 Husky 与 lint-staged 实现提交前自动格式化与校验。

• 自动化发布
  借助 Semantic Release 自动管理版本及生成更新日志，简化发布流程。

快速开始

确保你的开发环境中已安装 pnpm。

install

pnpm install

development

pnpm dev

build

pnpm run build

目录结构

.
├── .vscode/                  // VS Code 配置
├── extensions/               // 浏览器扩展相关资源
├── src/                      // 源码目录
│   ├── [app.tsx]              // 主应用入口
│   ├── index.tsx            // React 渲染入口
│   ├── app.css              // 全局样式文件
│   └── assets/              // 静态资源
├── [package.json]              // 项目配置文件
├── [tsconfig.json]             // TypeScript 配置文件
└── ...                     // 其他配置文件（如 ESLint、Prettier、Stylelint 等）

配置说明

Chrome 扩展配置

查看 extensions/manifest.json 文件，配置 Chrome 扩展的相关信息。

Release 配置

查看 .github/workflows/release.yaml 文件，将on.push部分取消注释，在推送代码到main分支以后即可触发自动发布。 发布后，会自动在 GitHub Releases 中创建一个新的发布版本，版本号会根据 Semantic Release 规范自动生成。 发布版本的名称会包含变更日志，变更日志会根据 Conventional Commits 规范自动生成。 发布版本的描述会包含变更日志，变更日志会根据 Conventional Commits 规范自动生成。