1. 摘要
作为一名产品经理，我用 TRAE SOLO 在 30 分钟内从零开发了一款 Chrome 新标签页管理扩展——Tab Manager Pro。它将浏览器新标签页替换为一个功能丰富的仪表板，支持标签页按域名自动分组、4 种主题切换、关闭标签页时的爆炸特效（音效 + 彩色纸屑）、浏览历史记录、常用网站快捷访问以及集成 Google 搜索。整个过程无需手动编写一行代码，SOLO 完成了从架构设计到前端实现的全部工作。
2. 背景
我是一名产品经理，日常工作中需要同时打开大量浏览器标签页——竞品分析、文档协作、数据看板、即时通讯……标签页经常堆积到几十个甚至上百个，找页面全靠肉眼翻，效率极低。
市面上的标签管理工具要么功能过于简陋，要么界面丑陋且臃肿。我希望有一个既好看又好用的新标签页管理工具，能按网站自动分组、快速定位和关闭标签页，同时还要有个性化的主题和有趣的交互体验。
但问题来了——我不是开发人员，写不了 Chrome 扩展的代码。于是我想到了用 TRAE SOLO 来帮我实现这个想法。
3. 实践过程
第一步：拆解任务
我把整个开发任务拆解为以下几个子任务：
- Chrome 扩展基础架构：manifest.json 配置、background service worker、新标签页覆盖
- 标签页管理核心逻辑：获取所有打开的标签页、按域名分组、支持单个/批量关闭
- UI 界面设计：仪表板布局、标签页分组卡片、设置弹窗
- 主题系统：浅色/深色/森林/海洋 4 种主题，CSS 变量实现
- 交互特效：关闭标签页时的音效（Web Audio API 合成）和彩色纸屑粒子动画
- 辅助功能：浏览历史记录、常用网站管理、Google 搜索集成
第二步：使用 SOLO 的能力
我主要使用了 SOLO 的以下能力：
- 代码生成：通过自然语言描述需求，SOLO 自动生成了完整的 HTML/CSS/JS 代码
- 多文件协作：SOLO 同时管理了 manifest.json、background.js、app.js、index.html、style.css 五个文件
- 代码调试：生成过程中遇到 Chrome API 兼容性问题，SOLO 自动修复
第三步：关键 Prompt
我的核心 Prompt 大致如下：
"帮我开发一个 Chrome 扩展，替换新标签页为一个标签页管理仪表板。功能需求：
- 按域名自动分组显示所有打开的标签页
- 支持 4 种主题切换（浅色、深色、森林、海洋）
- 关闭标签页时有爆炸特效（音效 + 彩色纸屑动画）
- 浏览历史记录功能
- 常用网站快捷方式（可自定义添加/编辑/删除）
- 集成 Google 搜索框
- 所有数据本地存储，保护隐私
- 使用 Chrome Manifest V3"
第四步：踩过的坑
- Chrome Storage 格式兼容问题：SOLO 最初保存主题时使用了对象格式
{ name: 'light' }，但读取时按字符串处理导致主题加载失败。通过让 SOLO 添加格式兼容逻辑解决——同时支持对象和字符串两种格式。 - 标签页关闭动画与数据同步：关闭标签页后有动画效果，但如果立即重新渲染会导致动画被中断。通过设置延迟重渲染（500ms）让动画先完成再更新数据。
- 历史记录重复写入：每次打开新标签页都会触发渲染，导致同一条历史被反复写入。通过引入
knownHistoryUrls集合来追踪已记录的 URL，避免重复。
4. 成果展示
最终产出
- 完整的 Chrome 扩展：基于 Manifest V3，包含 5 个核心文件
- GitHub 仓库：https://github.com/liangfeiiiii/tab-manager-pro
核心功能截图说明
| 功能 | 说明 |
|---|---|
| 标签页分组 | 按域名自动分组，显示每个网站的标签数量，支持单个关闭和批量关闭 |
| 主题切换 | 浅色、深色、森林、海洋 4 种主题，通过 CSS 变量实现丝滑切换 |
| 爆炸特效 | 关闭标签页时触发 Web Audio API 合成音效 + JS 彩色纸屑粒子动画 |
| 浏览历史 | 自动记录最近 20 条访问记录，支持单条删除和一键清空 |
| 常用网站 | 预置 Google/GitHub/YouTube/Gmail，支持自定义添加、编辑、删除 |
| Google 搜索 | 集成搜索框，直接在新标签页发起搜索 |
技术亮点
- 零外部依赖：不依赖任何第三方 JS/CSS 库，纯原生实现
- Web Audio API 合成音效：关闭音效通过代码实时合成，无需加载音频文件
- CSS 变量主题系统：4 种主题仅通过切换 CSS 变量实现，性能极佳
- XSS 防护：所有用户输入通过
escapeHtml()函数转义，防止注入攻击 - 响应式设计：适配桌面和移动端不同屏幕尺寸
5. 效果与总结
提效数据
| 对比项 | 传统方式 | 使用 SOLO |
|---|---|---|
| 开发时间 | 需要找开发资源，排期 1-2 周 | 30 分钟内完成 |
| 代码量 | 约 2000+ 行（手动编写） | SOLO 自动生成，零手动编码 |
| 调试时间 | 预估 2-3 小时 | SOLO 自动排查修复 |
SOLO 在流程中做了什么
- 架构设计：根据我的需求描述，SOLO 自动规划了 Chrome Manifest V3 扩展的文件结构和技术方案
- 全栈代码生成：一次性生成了 HTML 结构、CSS 样式（含 4 套主题变量）、JS 业务逻辑、后台脚本和配置文件
- 问题排查：自动发现并修复了存储格式兼容、动画时序、数据去重等多个问题
可复用的方法
- 自然语言即开发：只要能清晰描述需求，非技术人员也能用 SOLO 开发完整的浏览器扩展
- 分步迭代：先描述核心功能让 SOLO 生成初版，再逐步补充细节（主题、特效、历史记录等），比一次性描述所有需求效果更好
- 善用"踩坑反馈"：遇到问题时把错误信息反馈给 SOLO，它能快速定位并修复，比自己查文档高效得多
个人思考
这次体验让我深刻感受到 AI 编程工具对非技术人员的赋能。以前"我有一个想法但不会写代码"是最大的瓶颈，现在只要能把需求说清楚，SOLO 就能帮你把它变成现实。30 分钟从想法到可用产品，这种效率是前所未有的。对于产品经理来说，SOLO 不只是一个编码工具，更是一个快速验证想法的原型引擎——想到什么，立刻就能做出来看效果。