资源介绍
x 和 Edge 创建现代扩展（第二版）（英文版电子书）
第 1 章：什么是浏览器扩展
定义：浏览器扩展是能在网页上运行但独立于网站和服务器的软件，可查看 / 修改浏览器内容、管理 HTTP 请求、存储账户凭证等。
历史演变：
起源可追溯到 20 世纪 70 年代 UNIVAC 主机的插件
早期网页浏览器通过 HTML、JavaScript 和 DOM 允许自定义
经历了从原生浏览器插件（如 Java applets、Flash）到现代扩展的转变
扩展类型：广告和跟踪拦截器、密码管理器、智能写作工具、无障碍工具、内容聚合器、标签管理工具、屏幕录制工具、软件平台集成、AI 助手、数字货币钱包、开发者工具等。
第 2 章：浏览器扩展的基本元素
浏览器模型：浏览器标签采用沙箱机制，每个标签有独立的 JavaScript 运行时、内存等，相同源的标签可共享资源。
同源策略（SOP）：限制不同源 web 应用之间的数据访问。
浏览器扩展模型：
拥有独立的 JavaScript 页面和运行时
可访问原生 API 和用户界面
有权限控制的标签和域名访问能力
可观察和拦截网络请求
扩展核心元素：
清单文件（Manifest）：扩展的规则手册，包含名称、版本、文件入口、权限等信息。
背景脚本（Background Scripts）：处理浏览器事件，在 Manifest V3 中以服务工作线程形式存在。
扩展 UI 页面：包括弹出页面（Popup Page）、选项页面（Options Page）、侧边栏（Side Panel）等。
内容脚本（Content Scripts）：注入到网页中的脚本，可操作 DOM。
开发者工具面板：集成到浏览器开发者工具中的自定义界面。
第 3 章：浏览器扩展快速入门
清单文件创建：定义扩展的基本信息和配置。
最小可行扩展：仅包含清单文件的简单扩展。
扩展安装与重载：通过浏览器的开发者模式加载和解压扩展，修改后需重载使其生效。
扩展骨架构建：添加背景脚本、弹出页面、选项页面、侧边栏和内容脚本，实现各部分的协同工作。
第 4 章：浏览器扩展架构
架构概述：由背景服务工作线程、扩展 UI、开发者工具页面、内容脚本等组成。
关键组件：
背景服务工作线程：扩展的神经中枢，处理事件、消息传递等。
扩展 UI：包括弹出页面、选项页面等，作为与用户交互的界面。
内容脚本：注入到网页，可操作 DOM 并与扩展其他部分通信。
文件服务器：浏览器将扩展文件通过内置文件服务器提供访问，使用特定协议（如 chrome-extension://）。
沙盒页面：可使用受限功能（如 inline scripts、eval ()），但无法访问 WebExtensions API。
第 5 章：扩展清单
清单文件作用：作为扩展的蓝图，包含名称、版本、入口文件、权限等配置。
核心属性：
基础信息：name、version、manifest_version 等。
功能配置：action（工具栏图标行为）、background（背景脚本）、content_scripts（内容脚本）等。
权限管理：permissions、host_permissions 等。
Manifest V2 与 V3 差异：V3 采用服务工作线程代替持久化背景脚本，引入声明式网络请求 API 等。
第 6 章：背景脚本
作用：处理浏览器事件，如扩展安装 / 卸载、标签导航等。
Web 页面服务工作线程与扩展服务工作线程的异同：
相似：单实例、初始化和生命周期、顶级事件处理、异步消息传递。
不同：注册方式、用途（扩展服务工作线程主要处理事件而非缓存）。
Manifest V3 中的变化：
背景脚本变为服务工作线程，非持久化。
无法访问 DOM 和部分全局 API。
常见模式：事件处理、秘密管理与认证、消息 hub、存储管理、脚本注入、网络流量监控等。
第 7 章：扩展用户界面
扩展 UI 类型：
弹出页面：点击工具栏图标弹出的临时界面，适合快速访问的内容。
选项页面：用于配置扩展设置，可在标签或模态窗口中打开。
侧边栏：持久化的垂直面板，可在浏览时保持打开。
开发者工具页面：集成到浏览器开发者工具中的界面。
管理页面：由扩展提供的 HTML 页面，可访问 WebExtensions API。
UI 状态检测：通过背景脚本广播 "检查" 消息来跟踪所有活动的扩展 UI。
第 8 章：内容脚本
作用：注入到网页中，可修改网页内容和行为。
WebExtensions API 访问限制：仅能访问部分 API，如 chrome.runtime、chrome.storage 等。
注入行为：
CSS 注入需注意特异性以覆盖页面样式。
JavaScript 注入有独立的执行上下文，默认与页面脚本隔离。
特殊属性：
注入时机：document_start、document_end、document_idle。
脚本世界：ISOLATED（默认，与页面脚本隔离）和 MAIN（与页面脚本共享执行上下文）。
匹配规则：通过 URL 模式等控制注入范围。
第 9 章：扩展和浏览器 API
API 命名空间：通过 chrome.* 或 browser.* 访问，Chrome 逐渐支持 browser.* 以提高跨浏览器兼容性。
异步处理：支持回调和 Promise 两种方式，错误处理方式不同。
核心 API：
权限 API：检查和请求权限。
消息传递 API：实现扩展各部分之间、扩展与外部实体之间的通信。
存储 API：提供 local、sync、session 和 managed 四种存储方式。
身份验证 API：管理 OAuth 流程等。
网络请求 API：包括 declarativeNetRequest、webRequest、webNavigation 等，用于拦截和管理网络请求。
国际化 API：处理多语言支持。
AI 相关 API：如 Chrome 中的 Gemini Nano 模型相关接口。
浏览器和系统控制 API：如电源管理、地址栏（Omnibox）、通知、上下文菜单等。
第 10 章：权限
基本概念：类似移动应用权限，需明确请求才能访问强大的 API。
权限类型：
必要权限：在 manifest 中声明，安装时需用户批准。
可选权限：可在运行时请求，用户可选择是否授予。
主机权限：控制扩展可访问的域名。
权限生命周期：一旦授予，在扩展生命周期内有效，用户可通过浏览器界面撤销。
权限警告：某些权限会在安装或请求时向用户显示警告信息。
第 11 章：网络和身份验证
网站与扩展的网络差异：扩展有不同的源、API 访问限制、页面类型限制等。
网络架构：扩展 UI、内容脚本、背景脚本在发送网络请求方面各有特点和限制。
身份验证方式：
无身份验证：利用浏览器原生功能。
欺骗性身份验证：如内容脚本利用页面的 cookie 进行请求。
JWT 认证：适合应用级认证。
OAuth 和 OpenID：通过 chrome.identity API 实现。
网络 API：webNavigation API（观察导航事件）、webRequest API（拦截和修改网络请求）、declarativeNetRequest API（声明式网络请求管理）。
第 12 章：扩展教程
记事本扩展：使用弹出页面、背景脚本、存储 API 和上下文菜单 API，实现文本笔记的创建、保存和管理。
标签管理器：通过侧边栏展示所有打开的标签，支持搜索、激活和关闭标签。
截图捕获工具：利用键盘快捷键触发，捕获当前标签的可见部分并提供下载功能。
密码管理器：检测登录表单提交、存储凭据，并在用户重访网站时自动填充。
广告拦截器：使用 declarativeNetRequest API 拦截已知广告网络域名的请求。
LLM 聊天机器人：在侧边栏嵌入基于 Gemini 的聊天机器人，支持对话历史存储。
本地 AI 摘要器：利用 Chrome 的本地 Summarizer API 生成网页内容摘要。
用户脚本注入器：允许用户输入 JavaScript 并注入到网页中。
开发者工具扩展：创建自定义 DOM 树浏览器，在开发者工具中高亮对应的 DOM 节点。
付费扩展：集成 ExtensionPay 实现扩展的付费功能。
第 13 章：扩展的开发、发布和管理
本地开发：
扩展检查：通过浏览器扩展管理页面查看扩展详情、检查视图等。
文件变更：修改源文件后，部分内容需重载扩展或页面才能生效。
错误监控：通过开发者工具和扩展错误视图跟踪错误。
扩展重载：多种重载方式，适用于不同场景。
自动化测试：单元测试（如使用 Vitest）和集成测试（如使用 Puppeteer）。
发布扩展：
商店列表：准备扩展描述、分类、截图等信息。
隐私实践：说明扩展的行为和权限使用理由。
审核流程：首次提交需人工审核。
beta 测试：通过邮件、Google Group 或直接链接向特定用户分发。
扩展更新：提交包含更新版本号的 zip 文件，新增权限需额外说明，更新存在延迟。
关键技术点
Manifest V3：当前主流的清单版本，采用服务工作线程、声明式网络请求等，安全性和性能更优。
跨浏览器兼容性：不同浏览器对扩展 API 的支持存在差异，需进行适配。
权限管理：合理申请权限，平衡功能需求和用户隐私安全。
消息传递：扩展各部分（背景脚本、内容脚本、UI 页面等）之间通过 API 进行通信。
安全考量：避免敏感信息泄露，正确处理用户数据和认证凭证。
适用人群
希望开发浏览器扩展的 web 开发者
对浏览器扩展原理和架构感兴趣的技术人员
需要针对多浏览器开发扩展的工程师Building Browser Extensions