1. Demo 简介
是什么： 一个 Web 应用（网站），用户用自然语言描述想要的 Chrome 扩展功能，AI 自动生成完整可运行的 Manifest V3 扩展代码，支持实时代码预览、Popup 实时预览、一键导出 ZIP 包直接加载到 Chrome。
面向谁： 前端开发者、产品经理、学生、独立开发者、Chrome 插件爱好者，以及任何有扩展想法但不想从零写配置的人。
主要功能：
-
自然语言描述生成：用中文说清楚你想要什么扩展（比如"做一个网页截图工具"、“做一个番茄钟提醒”），AI 一键生成完整代码 -
Popup 实时预览：生成的扩展弹窗界面可以实时预览，默认全屏模式查看效果，支持小/中/大/宽/全屏多种尺寸切换 -
多文件代码编辑：自动生成 manifest.json、popup.html/css/js、content.js、background.js 等所有必要文件，支持语法高亮和 diff 对比 -
对话式修改：对生成结果不满意？直接在对话框里说"把按钮改成橙色"、“增加一个设置页面”，AI 基于上下文修改代码 -
一键导出 ZIP：点击下载直接得到可以加载到 Chrome 的扩展包，无需任何额外配置 -
用户系统：支持 Google 登录，API Key 云端存储，Token 使用统计
2. Demo 创作思路
灵感来源： 作为开发者，每次想做个小 Chrome 扩展都要重复写 Manifest V3 配置、处理 popup/content/background 之间的通信、配置图标，这些机械劳动既繁琐又容易出错。我发现很多人有很好的扩展创意，但被这些技术细节挡在了门外。
想解决的问题：
-
Chrome 扩展开发学习曲线陡峭，Manifest V3 配置复杂
-
每次新建扩展都要重复编写基础框架代码，效率低下
-
非技术背景的产品/运营/学生有好想法，但无法实现
-
想快速验证一个扩展创意，但不想花几小时搭架子
为什么做这个方向： Chrome 扩展是离用户最近的产品形态之一，它可以直接增强浏览器能力，但开发门槛劝退了很多人。用 AI 把这个门槛降到零，让"人人都能做扩展"，这本身就是一件很有价值的事。而且这个工具是"自我强化"的——我用 TRAE 开发它，它又能帮助更多人开发扩展，形成正向循环。
3. Demo 体验地址
在线体验： https://chrome-extension-builder-chi.vercel.app
体验方式：
-
打开链接，用 Google 账号登录
-
在对话框里描述你想要的扩展，比如：“做一个可以在网页上高亮选中文字并做笔记的工具”
-
等待 AI 生成代码，实时查看预览效果
-
点击右上角下载按钮，得到 ZIP 包
-
打开 Chrome → 扩展程序 → 加载已解压的扩展程序，选择解压后的文件夹即可使用
4. TRAE 实践过程
整个项目从 0 到 1 完全使用 TRAE IDE 开发，从项目初始化、UI 设计、AI 服务对接、Supabase 集成到部署上线，全程和 AI 结对编程。
技术栈选择：
-
React 18 + TypeScript + Vite 6
-
TailwindCSS 3
-
Zustand（状态管理）
-
DeepSeek API（v4-pro/v4-flash 模型，SSE 流式输出）
-
Supabase（认证 + 数据库）
-
JSZip（打包导出）
-
Prism.js（代码高亮）
开发流程关键节点：
- 项目初始化与 PRD 生成：用 TRAE 先生成了详细的 PRD 文档和技术架构设计，明确了功能边界和技术选型
-
UI 界面搭建：搭建了三栏工作区布局（对话面板/代码面板/预览面板），实现了导航栏、设置面板、模板画廊等组件
-
AI 服务对接：实现了和 DeepSeek API 的 SSE 流式对接，支持多轮对话上下文传递，AI 能够理解代词（比如"把它改成橙色"）并正确修改代码
-
代码编辑与 Diff 展示：实现了 compact diff 展示逻辑，只显示修改的行和前后 3 行上下文，中间用省略号折叠，代码修改一目了然
-
Popup 实时预览：最有意思的功能！把生成的 HTML/CSS/JS 注入到 iframe 中，支持多种预览尺寸，默认全屏模式让用户能完整体验扩展效果
-
用户系统集成：接入 Supabase Google OAuth 登录，用户可以保存自己的 API Key 和历史记录
- 部署上线：一键部署到 Vercel，配置环境变量，支持 HTTPS 访问
关键任务 Session ID：
-
Session ID 1: 2566711737331924:fd3721ba4357ed1b7486666ad2b8dfc7_6a5629bd97e417aaca2288b0.6a5629bd97e417aaca2288b3.6a5629bd97e417aaca2288b1:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/14 20:21:17)
-
Session ID 2: 2566711737331924:0cb27b61889adc36273e67767f0c0b21_6a54ccace178fae6724a2fa2.6a56168e97e417aaca228812.6a56168e97e417aaca228810:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/14 18:59:26)
-
Session ID 3: 2566711737331924:4975311787392d9b0c2f1dd06ef61eac_6a54c955e178fae6724a2e84.6a54cb12e178fae6724a2f7a.6a54cb12e178fae6724a2f78:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/13 19:25:06)
开发心得与踩坑：
-
一开始导航栏用
left/transform做动画会有跳动，后来改用width和maxWidth配合cubic-bezier缓动解决了 -
DeepSeek API 模型名更新了，从旧的
deepseek-chat改成了deepseek-v4-pro，reasoning_effort要设为max -
AI 修改代码时一定要把完整的对话历史传过去（至少最近20条），这样它才能理解上下文里的代词指的是什么
-
图片模糊和渐变遮罩容易让 UI 显得"重"，改用输入框的微妙阴影层级感更好
-
koa-connect 包装 Express 中间件会有 ctx 泄漏问题，最后直接重写成原生 Koa 更稳定
通过的报名帖链接： （请填入你之前发布的报名帖链接）
做这个项目最大的感受是：TRAE 真的能让开发效率提升一个量级。从想法到上线只用了很短的时间，很多原本需要查半天文档的细节（比如 Supabase RLS 配置、Manifest V3 的各种坑），AI 都能直接给出正确方案。希望这个工具能帮助更多人把自己的扩展创意变成现实！
谢谢大家 