01
浏览器工具概览
前端开发工具生态、DevTools核心功能、为什么需要构建自己的浏览器工具
生态DevTools
02
Chrome扩展基础
Manifest V3介绍、扩展文件结构、Hello World扩展实战
Manifest入门
03
扩展核心API (上)
chrome.runtime, chrome.tabs, chrome.storage API详解与实战
API存储
04
扩展核心API (下)
chrome.contextMenus, notifications, commands API详解与实战
菜单通知
05
Content Script深入
运行机制、DOM交互、消息传递 (runtime.sendMessage)
DOM通信
06
Popup与Options页面
Popup UI设计、Options配置、数据持久化与同步
UI配置
07
Background Service Worker
生命周期、事件驱动模型、后台任务调度
SW后台
08
消息传递机制
一次性消息、长连接、跨扩展消息、端口通信
消息端口
09
安全与权限
权限模型、CSP策略、XSS防护、数据安全最佳实践
安全CSP
10
调试与发布
扩展调试技巧、Chrome Web Store发布、版本更新策略
调试发布
11
Bookmarklet原理
Bookmarklet是什么、与扩展的区别、编写第一个Bookmarklet
书签轻量
12
Bookmarklet实战
DOM操作、AJAX请求、第三方库注入、跨域处理
DOM跨域
13
用户脚本管理器
Tampermonkey/Violentmonkey介绍、脚本结构、@match规则
脚本管理器
14
用户脚本API
GM_* API详解 (GM_setValue, GM_xmlhttpRequest, GM_addStyle等)
GM_API存储
15
用户脚本实战
页面增强、数据抓取、自动化操作、UI注入
自动化抓取
16
DevTools扩展基础
chrome.devtools API、面板创建、与页面通信
DevTools面板
17
DevTools扩展实战
自定义面板、网络请求分析、元素审查增强、性能分析
网络性能
18
React/Chrome扩展结合
React构建Popup/Options、Webpack配置、热更新
ReactWebpack
19
Vue/Chrome扩展结合
Vue构建扩展UI、Vite配置、状态管理
VueVite
20
TypeScript在扩展中的应用
类型定义、接口设计、编译配置、代码质量提升
TS类型
21
浏览器自动化工具 (上)
Puppeteer基础、页面操作、截图与PDF生成
Puppeteer截图
22
浏览器自动化工具 (下)
Puppeteer进阶、网络拦截、性能监控、CI/CD集成
拦截CI/CD
23
Playwright实战
跨浏览器测试、组件测试、API测试、录制与回放
Playwright测试
24
WebSocket调试工具
WebSocket协议基础、调试面板构建、消息拦截与修改
WebSocket拦截
25
网络请求拦截工具
Service Worker拦截、Fetch API拦截、请求修改与重放
SWFetch
26
性能分析工具
Performance API、Lighthouse集成、自定义面板、数据可视化
性能Lighthouse
27
无障碍检测工具
ARIA规范、自动检测规则、aXe核心集成、报告生成
a11yaXe
28
国际化与多语言
i18n方案、Chrome i18n API、语言包管理、动态切换
i18n多语言
29
扩展测试
单元测试(Jest)、集成测试(Puppeteer)、E2E测试、模拟环境
JestE2E
30
综合项目实战
构建完整开发者工具箱扩展：页面检查、网络监控、性能分析、无障碍检测
项目全栈