Vibe Coding 协作开发 Chrome 扩展插件学习笔记

引言：从“写代码”到“定义上下文”

在 AI 编程助手（如 Trae）日益成熟的今天，软件开发的范式正在悄然转变。过去我们强调“动手写代码”，如今更关键的是“清晰地描述需求、提供上下文、构建文档体系”。这种以“氛围感”（Vibe）为核心的协作方式，我称之为 Vibe Coding。

本文将以一个具体的实践项目——开发名为 Hulk 的 Chrome 扩展程序为例，记录我在 Vibe Coding 模式下与 AI 编程助手协作的全过程，探索如何通过高质量文档驱动高效开发。

---

一、什么是 Vibe Coding？

Vibe Coding 并非放弃编码，而是将重心从“实现细节”转移到“意图表达”。开发者不再需要逐行敲代码，而是：

• 编写清晰的需求文档；
• 提供设计稿或线框图；
• 定义接口与交互逻辑；
• 组织项目结构与技术选型说明；
• 编写测试用例与验收标准。

AI 编程助手（如 Trae）基于这些上下文自动生成可运行代码。人类开发者则专注于监督、验证与迭代优化——这正是人机协作的最佳分工。

---

二、项目背景：Hulk 扩展程序

本次实践目标是开发一个极简但功能完整的 Chrome 扩展：Hulk。其核心功能如下：

1. 点击扩展图标，弹出 popup 窗口；
2. 窗口中显示提示文字：“改变背景颜色”、“点击下方按钮将当前页面背景改为绿色”；
3. 提供一个“改变颜色”按钮；
4. 点击按钮后，当前网页背景变为绿色；
5. 使用 icons/ 文件夹中的图标作为扩展图标。

这个项目虽小，却完整覆盖了 Chrome 扩展的核心组件：popup、content script、manifest 配置、权限声明等，非常适合作为 Vibe Coding 的练手案例。

---

三、Vibe Coding 实践步骤

Step 1：构建上下文文档

我没有直接写代码，而是先整理了一份结构化文档，包含以下内容：

• 需求文档：明确功能点与用户交互流程；

• UX 设计参考：附上 UX.png（即使只是手绘线框图）；

• 技术约束：

  • 使用 Manifest V3；
  • 图标路径为 icons/icon-48.png；
  • 仅需修改 document.body.style.backgroundColor；

• 目录结构建议：

  Hulk/
  ├── icons/
  │   └── icon-48.png
  ├── popup.html
  ├── popup.js
  ├── content.js
  └── manifest.json
  

这份文档成为我与 Trae 协作的“共同语言”。

Step 2：向 Trae 提交 Prompt

我给出的 Prompt 如下：

你是一个经验丰富的 Chrome 扩展程序开发者，请帮我开发一个名为 Hulk 的扩展程序。
UX 设计图参考 UX.png。
具体交互步骤：
Step1：点击图标打开弹出窗口，默认提示：“改变背景颜色”、“点击下方按钮将当前页面背景改为绿色”，并有一个“改变颜色”按钮。
Step2：点击按钮，网页背景变为绿色。
要求：使用 icons 文件夹下的图标作为应用图标，使用 Manifest V3。

这个 Prompt 包含了角色设定、功能描述、交互流程、技术约束，构成了完整的上下文。

Step 3：Trae 生成代码

基于上述上下文，Trae 迅速生成了以下文件：

• manifest.json：正确声明了 action、content_scripts、permissions（activeTab）；
• popup.html：简洁的 HTML 结构，包含提示文本和按钮；
• popup.js：监听按钮点击，通过 chrome.tabs.sendMessage 发送指令；
• content.js：接收消息并修改 document.body.style.backgroundColor = 'green'；
• 图标路径正确引用。

整个过程不到 2 分钟，且代码结构清晰、符合最佳实践。

Step 4：人工验证与微调

我加载扩展到 Chrome 中测试，发现一个小问题：点击按钮后，若页面有 iframe 或复杂样式，绿色可能被覆盖。于是我在文档中补充一条边界条件说明：

若页面 body 被其他元素遮挡，应确保背景色强制生效（例如使用 !important）。

Trae 根据新上下文更新了 content.js：

document.body.style.setProperty('background-color', 'green', 'important');

一次快速迭代完成。

---

四、Vibe Coding 的核心优势

1. 降低编码门槛：非专业开发者也能通过描述需求产出可用产品；
2. 提升沟通效率：文档即契约，减少歧义；
3. 聚焦产品本质：开发者更多思考“做什么”而非“怎么做”；
4. 加速原型验证：从想法到可运行 Demo 仅需几分钟。

---

五、反思与展望

当然，Vibe Coding 并非万能。对于复杂状态管理、性能优化、安全边界等问题，仍需人类深度介入。但正如本项目所示：80% 的常规功能，完全可以通过高质量上下文由 AI 自动生成。

未来，我会继续完善自己的“文档工程”能力：

• 使用 Markdown + Mermaid 绘制交互流程图；
• 建立标准化的 Prompt 模板；
• 构建个人知识库，让 Trae 更了解我的编码风格。

---

结语

Hulk 扩展虽小，却是 Vibe Coding 理念的一次成功实践。当 coding 不再是瓶颈，创造力便成为新的核心竞争力。我们不再是“码农”，而是“产品架构师”与“AI 协作者”。

正如那句流行语所说： “未来的程序员，不是会写代码的人，而是会提问的人。”

而 Vibe Coding，正是这场变革的起点。