技术 - DevOps

浏览器插件开发

📚 官方文档和教程

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. 开发辅助工具

Extension Developer Tools
CRX Viewer

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
2
3
4
5
6
7
# 1. 克隆一个简单项目
git clone https://github.com/GoogleChrome/chrome-extensions-samples

# 2. 重点研究这些示例：
- examples/hello-world/
- examples/page-redder/
- examples/tabs-manager/

第二步：动手修改

选一个简单示例
逐行理解代码
尝试添加新功能
调试和测试

第三步：自己从头创建

1
2
3
# 使用Plasmo脚手架
npm create plasmo@latest
# 选择TypeScript + React

🔍 代码学习技巧

阅读开源项目时关注：

目录结构 - 如何组织代码
manifest.json - 权限配置
消息传递流程 - content ↔ background ↔ popup
错误处理 - 如何优雅处理异常
安全性 - 如何保护用户数据

特别推荐的代码阅读清单：

JSON Viewer - 学习内容脚本最佳实践
Dark Reader - 学习性能优化
1Password - 学习企业级架构

💡 快速上手练习

练习1：修改页面样式

创建一个改变所有网站背景色的插件

继续阅读