📚 官方文档和教程
1. 核心官方文档
- Chrome Extensions Developer Guide - 必读起点
- 最权威、最完整的官方文档
- 包含Manifest V3的完整迁移指南
- Chrome Extensions API Reference - API查询手册
- MDN WebExtensions Guide - 跨浏览器标准
2. 官方教程和示例
- Getting Started Tutorial - 5分钟创建第一个插件
- Extension Samples GitHub - 黄金资源！
- 100+个官方示例项目
- 按功能分类，代码质量高
- 适合直接学习复制
🚀 学习路径推荐
阶段1：基础入门（1-2周）
- 官方Hello World - 了解基础结构
- 阅读Manifest V3文档 - 理解新版变化
- 尝试简单插件：如页面背景色修改器
阶段2：核心概念（2-3周）
- 内容脚本 vs 后台脚本
- 消息传递机制
- 存储API使用
- 权限系统实践
阶段3：实战项目（1-2个月）
从简单到复杂逐步实践
🌟 优秀开源项目推荐
A. 初学者友好型
| 项目 | 简介 | 学习重点 |
|---|---|---|
| Reading Time | 显示文章阅读时间 | 内容脚本、DOM操作 |
| Tab Manager | 简单的标签页管理 | tabs API、弹出页面 |
| Markdown Viewer | 查看Markdown文件 | 文件访问、内容渲染 |
B. 中级项目（推荐重点学习）
| 项目 | 简介 | 技术栈 | 学习价值 |
|---|---|---|---|
| JSON Viewer | JSON格式化查看器 | Content Script、样式隔离 | ⭐⭐⭐⭐⭐ |
| Web Clipper | 网页剪辑工具 | 复杂DOM操作、截图 | ⭐⭐⭐⭐ |
| Dark Reader | 黑暗模式插件 | 高性能CSS注入、主题系统 | ⭐⭐⭐⭐⭐ |
| Octotree | GitHub文件树 | 复杂UI、API调用 | ⭐⭐⭐⭐ |
C. 大型完整项目
| 项目 | 简介 | 技术栈 | 特色 |
|---|---|---|---|
| 1Password | 密码管理器 | React、TypeScript、加密 | 企业级代码质量 |
| uBlock Origin | 广告拦截器 | 高性能过滤、规则引擎 | 性能优化典范 |
| Tampermonkey | 用户脚本管理器 | 沙箱、脚本执行 | 插件中的插件 |
| Bitwarden | 开源密码管理器 | 跨平台、加密 | 完整产品体验 |
🛠️ 开发工具和框架
1. 脚手架工具
- chrome-extensions-cli - 快速创建项目
- plasmo - 现代化框架（推荐！）
- 支持React、TypeScript
- 热重载、自动构建
2. 开发辅助工具
3. 实用库
- webextension-polyfill - 跨浏览器兼容
- chrome-extension-async - Promise化API
📖 优质学习资源
1. 视频教程
- Chrome Extensions Crash Course - Traversy Media
- Build a Chrome Extension - Fireship
2. 博客和文章
- Chrome Extensions 开发全攻略 - 中文详细教程
- Manifest V3 迁移指南 - 必读
3. 社区
🎯 实战学习建议
第一步：分析简单项目
# 1. 克隆一个简单项目
git clone https://github.com/GoogleChrome/chrome-extensions-samples
# 2. 重点研究这些示例：
- examples/hello-world/
- examples/page-redder/
- examples/tabs-manager/
第二步：动手修改
- 选一个简单示例
- 逐行理解代码
- 尝试添加新功能
- 调试和测试
第三步：自己从头创建
# 使用Plasmo脚手架
npm create plasmo@latest
# 选择TypeScript + React
🔍 代码学习技巧
阅读开源项目时关注：
- 目录结构 - 如何组织代码
- manifest.json - 权限配置
- 消息传递流程 - content ↔ background ↔ popup
- 错误处理 - 如何优雅处理异常
- 安全性 - 如何保护用户数据
特别推荐的代码阅读清单：
- JSON Viewer - 学习内容脚本最佳实践
- Dark Reader - 学习性能优化
- 1Password - 学习企业级架构
💡 快速上手练习
练习1：修改页面样式
创建一个改变所有网站背景色的插件
练习2：标签页管理
创建一个显示所有标签页并可以快速切换的插件
练习3：API调用
创建一个调用GitHub API显示用户信息的插件
⚠️ 常见陷阱和注意
- 权限过度申请 - 只申请必要的权限
- 内容脚本性能 - 避免阻塞页面
- Manifest V3限制 - 注意service worker的生命周期
- 跨域请求 - 需要正确的host_permissions
📈 进阶学习方向
- TypeScript - 提升代码质量
- React/Vue - 构建复杂UI
- 自动化测试 - jest + puppeteer
- 发布流程 - Chrome Web Store发布
建议学习路线：先看官方文档 → 尝试简单示例 → 阅读中等项目源码 → 自己动手做一个实用插件 → 学习大型项目架构。
最重要的是动手实践，从解决自己的实际需求开始！