用 Claude Code 开发浏览器扩展

可以得到什么

一份可在 Chrome / Edge / Firefox 等浏览器中加载的扩展，包含 manifest、背景脚本、内容脚本与必要的 UI 页面，并附带项目级 CLAUDE.md 规则。

适合哪些情况

• 想做一个轻量级浏览器工具（页面改造、信息提取、自动化操作）。
• 已有网页端想法但不想从零搭建完整后端。
• 适合作为 Claude Code 的第一个真实交付练习。

需要准备什么

• 浏览器扩展的基本结构知识（manifest 版本、权限声明）。
• Claude Code 可访问的项目目录。
• 目标浏览器的扩展发布或加载流程（Chrome Web Store、Edge Add-ons、临时开发者模式加载）。

常见做法

• 用 CLAUDE.md 写明扩展名、目标浏览器、权限范围。
• 进入计划模式让 Agent 给出 manifest、内容脚本、UI 三块的实施计划。
• 用 Subagents 并行处理 UI 与后台逻辑，最后由主 Agent 整合。
• 用 Hooks 在写入前对 manifest.json 做格式校验。

真实案例与教程

• HuaShu《Claude Code 橙皮书》教程摘要 把浏览器扩展列为项目练习之一。
• 仓库 claude-code-orange-book（Claude Code 橙皮书仓库） 提供完整章节与示例。

限制和检查点

• 浏览器扩展商店审核要求与权限边界会影响最终能发布的功能范围。
• 与 用 Claude Code 制作 iOS 应用 相比，扩展的技术栈更轻，但发布链路同样存在合规与上架门槛。

相关任务

• 用 Claude Code 制作 iOS 应用
• 用 Claude Code 建立内容自动化流水线
• 为 Claude Code 项目编写可复用 Slash Commands

来源

• sources/25-08-development-automation--35-src-dev-002-claude-code-orange-book--1m81cqu。