4.4 项目实战：Chrome 浏览器插件

难度：⭐⭐⭐ | 预计时间：2 小时 | 技术栈：JS + Chrome Extension API

学习目标

• 让 AI 理解 Chrome Extension 的 manifest 格式
• 分模块开发：popup、content script、background
• 掌握调试技巧：遇到问题怎么描述给 AI

---

项目需求

一个实用的浏览器插件，支持：

• 一键翻译选中文本
• 网页内容摘要生成
• 书签快速管理

实施步骤

1. 项目初始化

/plan 创建一个 Chrome 浏览器插件，功能包括：
1. 右键菜单翻译选中文本
2. 一键生成当前网页摘要
3. 快速添加/管理书签

请设计项目结构，包括 manifest.json v3 配置、popup 页面、content script、background service worker。

2. 分模块开发

先做 popup 界面，再实现 content script 交互，最后添加 background 逻辑。

3. 调试技巧

遇到插件不生效时，把 Chrome 开发者工具的错误信息复制给 Claude Code：

我的 Chrome 插件加载后，点击图标没有反应。
控制台报错信息如下：
[粘贴错误信息]
请帮我排查问题。

学到了什么

• [x] Chrome Extension Manifest V3 格式
• [x] popup / content script / background 分工
• [x] AI 辅助调试浏览器插件
• [x] 向 AI 描述问题的技巧