Vibe Coding 时代：用 AI 协作开发一个 Chrome 扩展 —— Hulk 背景变色器
🌟 引言：什么是 Vibe Coding？
在 2025 年，“Vibe Coding” 正成为一种新的开发范式 —— 它不再强调“手敲每一行代码”，而是强调人机协作的节奏感与上下文对齐。你提供清晰的需求文档、设计稿、接口规范，AI（如 Trae）负责生成可运行的代码；你专注在“定义问题”和“验证结果”，而非“实现细节”。
今天，我们就用这种 Vibe Coding 方式，和 Trae 协作开发一个极简但完整的 Chrome 扩展程序：Hulk —— 点击按钮，将当前网页背景变为绿色！
🧠 第一步：明确上下文（Context is King）
在 Vibe Coding 中，文档即代码。我们先为 Trae 准备以下上下文：
✅ 需求文档
- 扩展名称：Hulk
- 功能：点击扩展图标 → 弹出 popup → 点击“改变颜色”按钮 → 当前页面背景变为绿色
- 图标：使用
icons/文件夹中的图标（16x16, 48x48, 128x128）
✅ UX 设计（参考 ux.png）
-
Popup 窗口简洁明了：
- 标题提示：“改变背景颜色”
- 副标题：“点击下方按钮将当前页面背景色改为绿色”
- 一个主按钮：“改变颜色”
✅ 技术栈
- 纯 HTML + CSS + JavaScript（无框架）
- 使用 Manifest V3（Chrome 推荐标准）
- 通过
chrome.scripting.executeScript注入内容脚本
🛠️ 第二步：目录结构（由人设计，AI 实现）
我们先手动规划项目结构，这是 Vibe Coding 中“人类主导”的关键一步：
hulk-extension/
├── icons/
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
├── popup/
│ ├── index.html
│ ├── style.css
│ └── script.js
├── content/
│ └── change-bg.js
└── manifest.json
💡 为什么这样设计？
- 分离关注点：popup 负责 UI，content 负责 DOM 操作
- 符合 Manifest V3 的安全模型（不能内联脚本）
📄 第三步：核心文件实现（Trae 生成，人类校验）
1. instruction.txt (prompt的输入)
你是一个经验丰富的Chrome 扩展程序开发者，请帮我开发一个名为Hulk的扩展程序。
UX 设计图参考ux.png
具体交互步骤如下：
Step1：点击程序图标打开弹出窗口，在窗口中默认提示：“改变背景颜色”，"点击下方按钮将当前页面背景色改为绿色"
和一个"改变颜色"按钮
Step2：点击按钮，网页背景改变为绿色
注意以下：
请使用icons文件夹的图标作为应用程序的图标
以下皆为Trae生成
2. manifest.json
{
"manifest_version": 3,
"name": "Hulk",
"version": "1.0",
"description": "一个可以将网页背景改为绿色的Chrome扩展",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"scripting"
]
}
🔒 注意：
scripting权限 +activeTab是动态注入脚本的关键。
3. popup/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hulk扩展</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="container">
<h3>改变背景颜色</h3>
<p>点击下方按钮将当前页面背景色改为绿色</p>
<button id="changeColorBtn">改变颜色</button>
</div>
<script src="popup.js"></script>
</body>
</html>
4. popup/style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 15px;
width: 250px;
background-color: #f9f9f9;
}
.container {
text-align: center;
}
h3 {
margin-top: 0;
color: #333;
font-size: 16px;
}
p {
color: #666;
font-size: 14px;
margin-bottom: 20px;
line-height: 1.4;
}
#changeColorBtn {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
#changeColorBtn:hover {
background-color: #45a049;
}
#changeColorBtn:active {
transform: translateY(1px);
}
5. popup/script.js
document.addEventListener('DOMContentLoaded', function() {
const changeColorBtn = document.getElementById('changeColorBtn');
changeColorBtn.addEventListener('click', function() {
// 获取当前活动标签页
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
const activeTab = tabs[0];
// 向content script注入代码来改变背景颜色
chrome.scripting.executeScript({
target: { tabId: activeTab.id },
function: setBackgroundColorToGreen
});
});
});
// 用于注入到页面的函数
function setBackgroundColorToGreen() {
// 改变页面根元素的背景色
document.documentElement.style.backgroundColor = 'green';
// 改变body的背景色以确保兼容性
document.body.style.backgroundColor = 'green';
// 尝试处理一些常见的内容容器
const containers = ['.main', '#main', '.content', '#content', '.container', '#container'];
containers.forEach(selector => {
const elements = document.querySelectorAll(selector);
elements.forEach(el => {
if (window.getComputedStyle(el).backgroundColor === 'rgba(0, 0, 0, 0)' ||
window.getComputedStyle(el).backgroundColor === 'transparent') {
el.style.backgroundColor = 'green';
}
});
});
}
});
🚀 第四步：本地测试 & 发布
- 打开 Chrome →
chrome://extensions/ - 开启“开发者模式”
- 点击“加载已解压的扩展程序”，选择
hulk-extension文件夹 - 访问任意网页，点击 Hulk 图标 → 点击按钮 → 背景变绿！
💡 Vibe Coding 的启示
通过这次实践，我们验证了 Vibe Coding 的核心逻辑：
| 人类职责 | AI（Trae）职责 |
|---|---|
| 定义需求、画线框图、设计架构 | 生成标准化代码 |
| 提供上下文（文档/规范） | 遵循上下文输出 |
| 验证逻辑、调试边界情况 | 快速迭代实现 |
| 关注用户体验 | 关注语法正确性 |
Coding 不再是瓶颈，思考才是。
