扩展的整体架构

2-1 清单文件是总指挥

所有扩展都有一个叫 manifest.json 的文件，中文叫清单文件。它是扩展的身份证，也是总指挥。浏览器靠它知道：这个扩展叫什么、版本多少、要用哪些权限、有哪些部件。

你可以把清单想成一份”项目说明书”。没有它，浏览器连扩展都认不出来。后面我们会专门用一整章讲清单的字段，这里你只需知道它的地位：它是入口，一切从它开始。

2-2 服务工作者：随叫随到的后台

在 MV3 里，后台跑的是一个叫”服务工作者”的东西（Service Worker）。它不像老式后台那样一直赖在内存里，而是事件来了才被唤醒，干完活就休眠。这也让扩展更省电、更轻。

服务工作者负责监听浏览器事件。比如扩展被安装、有定时器到点、收到别的部件发来的消息，都归它管。它不能直接碰网页的 DOM，但它能调度一切。

2-3 内容脚本：网页里的内应

内容脚本运行在网页内部，能读写页面的 DOM。它就像派进网页里的”内应”，替扩展去改页面、读页面。但它和网页自己的脚本是隔离的，互相看不见变量，安全上有这道墙。

内容脚本通常由清单里的 content_scripts 字段声明：指定匹配哪些网址、注入哪些 js、在页面什么时候注入。它可以直接操作页面，也可以通过消息把数据传给服务工作者。

2-4 弹出页、选项页与侧边栏：给用户的界面

扩展也要有人用的界面。最常见的几类是：

弹出页（popup），点工具栏图标弹出的那块小窗。它本质是一个 HTML 页面，可以带脚本和样式，适合放快捷操作。

选项页（options），扩展的设置中心。用户在这里配置偏好，配置通常存进 storage，别的部件再读出来用。

侧边栏（side panel），从浏览器侧边拉开的一块常驻面板，适合做信息流、对话类界面，是 MV3 新增的好东西。

2-5 开发者工具面板

如果你做的是给程序员用的工具，还可以往浏览器自带的开发者工具里塞一个自定义面板。比如展示网络请求、分析 DOM、可视化性能数据，都靠这一块。

这块属于进阶能力，初学先知道有它即可，等基础扎实了再碰。本教程后面会有专门章节讲如何扩展开发者工具。

2-6 各部件的权限边界

光认识部件不够，还得知道它们各自的”活动范围”。这点初学容易混淆，我直接点破：

服务工作者权限最大，能调用绝大多数 chrome.* 接口，但碰不到页面 DOM。内容脚本能碰页面 DOM，却只能直接调用少数扩展 API（storage、i18n、runtime 消息等），想用 tabs、cookies、downloads 这类接口，得发消息让服务工作者代办。弹出页、选项页是扩展页面，接口调用基本不受限。

简单记：想改页面，找内容脚本；想调浏览器能力，找服务工作者或弹出页；想在两个世界之间传话，用消息通信。

2-7 它们怎么连起来：数据流向

关键看它们怎么配合。我画一张简化的关系图：

flowchart LR
    A[清单 manifest.json] -->|声明| B[服务工作者]
    A -->|声明| C[内容脚本]
    A -->|声明| D[弹出页]
    A -->|声明| E[选项页]
    A -->|声明| F[侧边栏]
    A -->|声明| G[开发者工具面板]

    D -->|消息| B
    E -->|读写| H[(storage 存储)]
    C -->|消息| B
    B -->|调度脚本| C
    B -->|调用接口| I[浏览器能力]

一句话串起来：清单告诉浏览器有哪些部件；内容脚本在网页里干活，把需要的事通过消息交给服务工作者；服务工作者统筹逻辑、调浏览器接口；弹出页、选项页、侧边栏给用户操作；storage 让各部件共享数据。

理解了这张图，你再看任何一个扩展都会顺手拆件：它用没用内容脚本？后台逻辑放在服务工作者了吗？界面是弹出页还是侧边栏？拆清楚了，自己写也就有了章法。下一章我们聊一个根本问题：为什么这一整套要以 MV3 为准。

下一章我们聊一个根本问题：为什么这一整套要以 MV3 为准，而不是别的。理解了动机，你写代码时会更踏实。