5.2 做一个浏览器插件

目标：了解 Chrome 扩展的基本结构（Manifest V3）、学会在浏览器环境调试，并有一个可以装在自己 Chrome 里的小工具。

浏览器插件是离用户最近的工具之一，可以解决浏览网页时的各种痛点。这个项目将帮你理解浏览器插件的权限模型、事件机制，并掌握前端调试技巧。

什么是 Manifest V3？ Manifest 是插件的「身份证」，告诉浏览器这个插件叫什么、需要什么权限、包含哪些文件。V3 是 Chrome 最新的插件标准（2021年推出），比 V2 更安全、更省电。现在开发新插件必须用 V3。

🎯 成品要求

• 插件至少包含 popup（或快捷入口）和一个核心功能
• 在 chrome://extensions 中加载无报错，可正常运行
• 有 README 文档说明使用方式与权限申请原因

名词解释：Popup 是点击插件图标后弹出的小窗口，用来展示界面和操作按钮。Service Worker（以前叫 Background Script）是在后台运行的脚本，用来处理定时任务、消息通信等。Content Script 是注入到网页中的脚本，可以读取和修改网页内容。

🧰 准备工作

1. 工具选择

• Cursor/Trae + Claude Code：方便生成多文件结构
• 本地 Chrome 浏览器：用于加载和调试插件

2. 参考资源

官方示例库（强烈推荐）：

git clone https://github.com/GoogleChrome/chrome-extensions-samples

这个仓库包含 100+ 官方示例，遇到不懂的模块可以随时参考。

3. 浏览器配置

1. 打开 Chrome 浏览器
2. 地址栏输入 chrome://extensions
3. 打开右上角的「开发者模式」开关

🛠️ 实践步骤

步骤 1：明确使用场景

先写下具体的痛点和触发方式，这决定了插件的技术架构。

场景示例：

练习用场景（选一个）：

• 番茄钟提醒器：25 分钟工作 + 5 分钟休息
• 网页截图工具：截取当前可见区域
• 快捷笔记：快速保存选中文字到本地

步骤 2：用 Prompt 生成骨架