实战项目四：用 AI 做一个 Chrome 插件（划词翻译 + AI 总结）

前几个项目都是"大而全"的应用。这篇我们做一个"小而美"的——Chrome 浏览器插件。

你在任何网页上选中一段文字 → 右键 → AI 翻译/总结/解释。 不用切窗口，不用复制粘贴。

---

🎯 这个插件能做什么？

场景 1：读英文文章
  选中一段英文 → 右键"AI 翻译" → 弹出中文翻译

场景 2：读长文章
  选中一段文字 → 右键"AI 总结" → 弹出 3 句话总结

场景 3：读代码
  选中一段代码 → 右键"AI 解释" → 弹出这段代码是干什么的

场景 4：写作辅助
  选中自己写的文字 → 右键"AI 润色" → 弹出润色后的版本

---

🏗️ 技术架构

Chrome 插件结构极其简单：

my-extension/
├── manifest.json       # 插件配置
├── background.js       # 后台脚本（右键菜单、API 调用）
├── popup.html          # 弹出窗口（显示结果）
├── popup.js            # 弹出窗口逻辑
└── icon.png            # 插件图标

总共 5 个文件。 比前面的项目简单得多。

---

💻 用 AI 搭建的完整流程

Step 1：创建插件骨架

帮我创建一个 Chrome 浏览器插件，功能是"AI 划词助手"。

核心功能：
1. 用户在网页上选中文字
2. 右键菜单出现 4 个选项：AI 翻译、AI 总结、AI 解释、AI 润色
3. 点击后调用 Claude API
4. 在弹窗中显示结果

先创建基础文件结构：manifest.json、background.js、popup.html、popup.js

Step 2：实现右键菜单

帮我实现右键菜单功能：

在 background.js 中：
1. 插件安装时创建 4 个右键菜单项
2. 用户点击菜单项时，获取选中的文字
3. 根据菜单项类型，构建不同的 prompt
4. 调用 Claude API
5. 把结果传给 popup 显示

Step 3：实现 AI 功能

帮我实现 4 个 AI 功能：

翻译 prompt：
"请将以下英文翻译成中文，保持原意，语言流畅自然：\n\n{选中的文字}"

总结 prompt：
"请用 3 句话总结以下内容，抓住核心要点：\n\n{选中的文字}"

解释 prompt：
"请用通俗的语言解释以下代码是做什么的，适合编程新手理解：\n\n{选中的文字}"

润色 prompt：
"请润色以下文字，使其更流畅、更有表达力，但保留原意和语气：\n\n{选中的文字}"

Step 4：实现弹窗

帮我实现 popup 弹窗：

1. 弹窗大小：400×300 像素
2. 顶部显示操作类型（翻译/总结/解释/润色）
3. 中间显示原始文字（折叠，可展开）
4. 下方显示 AI 结果（打字机效果逐字显示）
5. 底部有"复制结果"按钮
6. 加载中显示动画
7. 出错显示错误提示
8. 设计简洁现代，面包君风格

Step 5：加上设置页

帮我实现设置页：

1. 点击插件图标 → 打开设置页
2. 设置项：
   - API Key 输入框
   - 模型选择（Haiku 便宜 / Sonnet 均衡 / Opus 最强）
   - 默认操作（选中文字后默认做什么）
3. 设置保存在 chrome.storage 中

---

🔧 关键技术点

API Key 安全

Chrome 插件的 API Key 管理：

1. Key 存在 chrome.storage.local（本地存储）
2. 用户第一次使用时引导输入 Key
3. 提示用户："Key 只存在你的浏览器本地，不会上传到任何服务器"

流式输出

帮我加上流式输出：

1. Claude API 开启 streaming
2. popup 接收流式数据，逐字显示
3. 就像 ChatGPT 那样的打字效果

---

📦 发布到 Chrome 商店

帮我准备 Chrome 商店上架资料：

1. 插件描述（中英文）
2. 截图（4 张，展示 4 个功能）
3. 隐私政策（说明 API Key 存本地、不上传数据）
4. 打包成 .zip

---

💰 成本估算

项目	成本
Chrome 商店开发者注册	一次性 $5
Claude API	用户自带 Key，你不出钱
服务器	不需要（全在浏览器本地运行）
总成本	$5（一次性）

这是一个零运维成本的产品——所有逻辑在浏览器本地运行，API 费用由用户自己承担。

---

🎯 扩展方向

扩展	让 AI 帮你做什么
自定义 Prompt	用户可以自定义操作（"用鲁迅风格改写"）
快捷键	选中文字后按快捷键直接触发
多语言	不只是英文翻译，支持日/韩/法等
历史记录	保存最近的操作记录
接入更多模型	同时支持 GPT、Gemini

---

💡 总结

• Chrome 插件 = 5 个文件，最简单的 AI 产品形态
• 零运维成本——全在浏览器本地运行
• 4 个功能：翻译、总结、解释、润色
• 用户自带 API Key，你不用出 Token 费用
• Chrome 商店上架只需 $5，是练手 + 积累用户的最佳选择

---

下篇预告：实战项目五——用 AI 做一个数据看板

---

面包君 🍞 比你多懂一点的朋友