企业官网建设流程全解析

NiceTab 是一款免费开源的浏览器标签页管理器插件，也是 OneTab、Toby、SessionBuddy 等扩展的升级替代品，支持 Chrome、Firefox、Edge 等主流浏览器。想为 NiceTab 提交第一个 PR？这篇教程将带你从零完成本地开发环境搭建、插件调试，到提交 Pull Request 的完整流程，零基础也能照做。

一、动手前的准备工作

开始之前，请先确认本地装好了以下两样东西：

另外建议安装 Git 并配置好账号，后面提交代码要用到。

💡 小技巧：在终端执行node -v和pnpm -v可以快速确认版本是否达标。

二、克隆仓库并安装依赖

1. 先 Fork 仓库到你的账号名下，再克隆到本地：

git clone https://gitcode.com/gh_mirrors/ni/NiceTab cd NiceTab

2. 安装依赖：

pnpm install

安装完成后，postinstall脚本会自动执行wxt prepare完成框架初始化，无需手动操作。

三、启动本地开发服务

执行下面命令即可启动开发服务器，WXT 会自动拉起浏览器并加载插件：

pnpm run dev

启动成功后，你可以打开 NiceTab 的管理后台，体验列表管理、快照、设置、同步等完整功能，效果如下图所示。

常见问题：找不到 Chrome 安装路径

如果启动时看到ERROR No Chrome installations found.报错，说明 WXT 没能自动识别到浏览器，可以在项目根目录的web-ext.config.ts中手动指定浏览器可执行文件路径，详见官方贡献文档 CONTRIBUTING-zh.md。

四、三个新手必知的开发约定

改代码前先了解项目约定，能少踩很多坑：

1. 每个文件必须有默认导出：每个.js、.ts、.tsx文件都需要export default，否则本地启动服务会报错。
2. 使用~路径别名：引用entrypoints目录下的文件统一用~前缀，例如import { something } from '~/entrypoints/common/utils'。
3. 了解代码结构：插件入口按 entrypoints/ 目录划分——background/（后台服务）、popup/（弹出面板）、options/（管理后台）、common/（共享工具），整体架构可参考 ARCHITECTURE.md；用户功能全貌可参考 GUIDE-zh.md。

五、提交前检查：类型与代码规范

提交代码前，强烈建议先跑一遍检查命令：

pnpm compile # TypeScript 类型检查 pnpm lint # ESLint 代码规范检查（自动修复）

两条命令都通过后，再提交修改，能大幅提高 PR 被合并的概率。

六、PR 提交流程六步走

标准的提交流程如下，全程命令都已给出：

① Fork 仓库：将上游仓库 Fork 到你自己的账号。

② 克隆你的 Fork（见第二节）。

③ 基于dev分支创建特性分支：

git checkout -b dev-your-awesome-code origin/dev

④ 提交修改，commit message 建议遵循 Conventional Commits 规范：

pnpm compile git commit -m 'feat: add a new feature'

⑤ 推送分支到远程：

git push -u origin dev-your-awesome-code

⑥ 创建 Pull Request：从你的特性分支向上游的dev分支发起 PR，并简要描述改动内容与测试情况。

更详细的说明可参考官方贡献指南 CONTRIBUTING.md。

七、总结

回顾一下完整路径：

1. 安装 Node.js（≥18.20.0）+ pnpm；
2. git clone仓库后执行pnpm install；
3. pnpm run dev启动调试；
4. 遵守export default与~别名等约定；
5. pnpm compile+pnpm lint检查通过后，按六步流程提交 PR。

第一次贡献不一定要做大功能，从修一个文案、补一段多语言（多语言文案位于 entrypoints/common/locale/）开始就非常好。祝你的第一个 PR 顺利合并！🎉