为 Chrome 和 Edge 构建真实浏览器扩展
浏览器扩展让你修改网页、自动化浏览器行为、拦截网络请求,并通过 Chrome Web Store 和 Edge Add-ons 应用市场直接向用户发布自定义工具。此学习路线教你 Manifest V3 — 当前必需的扩展格式 — 从你的第一个 manifest.json 开始,贯穿跨浏览器分发和生产安全。每个概念都扎根于 Chrome 和 Edge 实际暴露的 API。
你将学到什么
你将学习 Manifest V3 如何结构化权限、service worker 和组件生命周期。从这里开始,你用弹窗和选项页面构建真实 UI,注入读取和改写页面 DOM 的 content script,以及接入浏览器 UI 表面,如上下文菜单和地址栏。在数据方面,你掌握扩展消息、存储 API 和 declarativeNetRequest 来修改网络请求而无需广泛的主机权限。你还将学习程序化浏览器控制、调试和性能分析,以及关注安全的高级权限模型。此学习路线以跨浏览器兼容性技巧和将现代 JavaScript 框架集成到扩展构建管道作为收尾。
学习路径
十二门课程涵盖 A1 至 C1。第一门课程免费,介绍 Manifest V3 基础知识。A1–A2 建立清单结构和核心权限模型。B1 课程构建实用技能:UI 构造、content script 注入、浏览器 UI 集成,以及发布到 Chrome Web Store 和 Edge 应用市场。四门 B2 课程深入讲解 — 消息传递和持久化、声明式网络请求修改、浏览器自动化,以及包含性能优化的调试。最后两门 C1 课程涵盖高级权限、安全加固,以及在现代框架使用基础上实现真正的跨浏览器兼容性。
工作原理
每门课程分为短小、实践性的课时,你在内置编辑器中完成,实时反馈和遇到问题时可用的 AI 辅导。你编写实际扩展代码 — 清单文件、后台 service worker、content script 和选项页面 — 因此每节课都产生你可以直接加载到 Chrome 或 Edge 中作为工作扩展的内容。