1. 什么是 Service Worker？
Service Worker 是一种运行在后台的 JavaScript 线程，与网页主线程独立。它的主要作用是拦截网络请求、缓存资源、提供离线支持，并执行后台任务，如推送通知和后台同步。在 Chrome 扩展（Extensions） 中，Service Worker 取代了传统的 background.js，成为 Manifest V3（MV3） 规范的核心组件。
Service Worker 的关键特性：
- 独立线程 ：运行在浏览器后台，不受网页刷新影响。
- 事件驱动 ：仅在需要时被唤醒，降低资源消耗。
- 拦截网络请求 ：使用
fetch事件优化缓存策略，提高加载性能。 - 后台推送 ：支持
pushAPI，即使扩展未打开，也能接收消息。 - 无法直接访问 DOM ：需要通过
postMessage与content script进行通信。
2. Chrome 扩展的加载机制
Chrome 扩展（Extension）本质上是一个由 HTML、JavaScript 和 JSON 配置文件组成的 Web 应用 ，但它比普通 Web 应用拥有更高的权限，可以访问浏览器 API、拦截网络请求、修改网页内容等。
扩展的核心组件
Chrome 扩展由多个进程协同工作，包括：
- 浏览器进程（Browser Process）：管理扩展的权限、生命周期。
- 扩展进程（Extension Process）：运行扩展的 Service Worker，处理后台任务。
- 渲染进程（Renderer Process） ：渲染扩展 UI，如
popup.html或options.html。 - 内容脚本进程（Content Script Process）：注入到网页中，执行 DOM 操作。
扩展 Service Worker 的引入（MV3 变化）
在 Manifest V2（MV2） 时代，扩展的 background.js 始终在后台运行，这可能导致：
- 长期占用系统资源，即使扩展没有执行任务。
- 安全性较低，可能导致恶意扩展滥用权限。
因此，MV3 强制使用 Service Worker 作为后台脚本，它的特点是：
- 按需唤醒，只有在有任务时才执行代码。
- 提升安全性，防止长期驻留后台消耗系统资源。
- 增强 Web 兼容性，更符合渐进式 Web 应用（PWA）的设计思路。
3. Service Worker 在 Chrome 扩展中的应用
(1) 哪些扩展使用 Service Worker？
并非所有扩展都需要 Service Worker，通常具有以下功能的扩展会使用 Service Worker：
- 后台运行任务（如定期同步数据、监听消息）。
- 拦截网络请求（如广告拦截、请求重定向）。
- 推送通知（如 Gmail 未读邮件提醒）。
- 离线缓存（如保存页面资源，支持离线访问）。
不需要 Service Worker 的扩展：
- 仅修改网页 UI 的扩展（如修改网页 CSS）。
- 不需要后台处理的扩展（如仅提供一个弹出窗口）。
(2) 典型应用场景
| 应用场景 | 使用的 Service Worker 事件 | 作用 |
|---|---|---|
| 拦截网络请求 | fetch |
劫持 HTTP 请求，修改或缓存资源 |
| 广告拦截 | chrome.declarativeNetRequest |
屏蔽广告、跟踪脚本 |
| 消息通信 | chrome.runtime.onMessage |
处理前端与后台的通信 |
| 推送通知 | push |
在扩展关闭时仍能接收消息 |
| 定时任务 | chrome.alarms.onAlarm |
代替 setInterval 进行周期性任务 |
| 数据缓存 | Cache API |
离线存储 Web 资源 |
(3) 代码示例
1️⃣ 注册 Service Worker
在 manifest.json 中，定义扩展的 Service Worker：
{ "name": "My Extension", "version": "1.0", "manifest_version": 3, "background": { "service_worker": "background.js" }, "permissions": ["storage", "alarms", "notifications"] }
2️⃣ 拦截网络请求
self.addEventListener("fetch", (event) => { console.log("拦截到请求:", event.request.url); event.respondWith(fetch(event.request)); });
3️⃣ 处理消息通信
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { console.log("收到消息:", message); sendResponse({ reply: "Service Worker 已处理" }); });
4️⃣ 发送推送通知
self.addEventListener("push", (event) => { self.registration.showNotification("新消息", { body: "你有一条新通知", icon: "/icon.png", }); });
4. Service Worker 的限制
(1) 不能直接操作 DOM
由于 Service Worker 运行在独立线程中，它无法直接修改网页 DOM ，需要 content script 作为桥梁：
// content_script.js chrome.runtime.sendMessage({ action: "updateDOM" });
// background.js (Service Worker) chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.action === "updateDOM") { console.log("通知 Content Script 更新 DOM"); } });
(2) 可能被浏览器回收
- Service Worker 不是永久运行的，如果一段时间内没有事件触发，它可能会被 Chrome 回收。
- 解决方法：可以使用
chrome.alarms设置周期性任务：
chrome.alarms.create("keepAlive", { periodInMinutes: 5 }); chrome.alarms.onAlarm.addListener((alarm) => { if (alarm.name === "keepAlive") { console.log("Service Worker 被唤醒"); } });
5. 结论
✅ 为什么 Chrome 扩展要用 Service Worker？
- 取代旧版
background.js，提高性能。 - 降低扩展的资源占用，减少后台运行。
- 增强安全性，防止恶意扩展滥用权限。
- 适配 PWA 生态，提高扩展的可扩展性。
⚠️ Service Worker 的挑战
- 不能直接操作 DOM ，需要
content script进行桥接。 - 可能被 Chrome 回收 ，需要
alarms等方法保持唤醒。 - 部分 API 需要新的
declarativeNetRequest替代（如广告拦截）。
6. 未来展望
- Manifest V3 成为 Chrome 扩展的唯一标准，所有旧版扩展必须迁移到 MV3。
- Service Worker 与 WebAssembly 结合，提供更强大的计算能力。
- 与 Web Push、PWA 进一步整合，让 Web 应用更具 App 体验。
Service Worker 是 Chrome 扩展的新核心组件，未来会更加广泛应用。如果你正在开发 Chrome 扩展，赶紧适配 MV3，体验更流畅的浏览器交互吧！🚀🚀🚀