浏览器扩展是什么：从去广告到自动填表，它能改变什么

你每天在浏览器里花掉的时间，可能超过任何一款桌面软件。但浏览器出厂时是「一视同仁」的：它不知道你想屏蔽哪些广告、不知道你在哪个网站总要重复登录、更不知道你希望某段网页字体大一点。浏览器扩展就是弥补这一切的手段——它是一组由 HTML、CSS 和 JavaScript 组成的小程序，安装在浏览器内部，能够读取页面、修改页面、监听事件、调用浏览器本身提供的能力。

一个扩展能做的事，比你想的多

把扩展想象成给浏览器追加的「插件式器官」。按功能划分，常见的扩展大致落在四类：

这张表里的每一行，背后都对应着一组真实的浏览器 API。扩展之所以强大，是因为它站在一个普通网页脚本无法企及的位置：它可以知道你开了哪些标签页、可以在页面加载前就注入代码、可以把设置同步到你登录的所有设备。

它和普通网页脚本差在哪

一个跑在网页里的脚本，活动范围被限制在这个页面自己的世界里：它看不到别的标签页，改不了浏览器设置，跨域请求会被同源策略拦住。扩展则不同，它在获得授权后可以：

• 通过 chrome.tabs 查询、创建、移动标签页，甚至读取标签页的 URL 和标题；
• 通过 content scripts 把代码注入进任意匹配的网页，与页面共享同一个 DOM；
• 通过 chrome.storage 在本地或云端同步存储数据，不受「清除浏览记录」影响；
• 通过 host permissions 获得的授权，向指定站点发起跨域请求。

用一句话概括：网页脚本的边界是「这个页面」，扩展的边界是「你授权的范围」。授权越小越安全，这也是 Manifest V3 时代整个扩展体系的设计基调。

你可能已经在用它们

即使从没写过扩展，你大概率也是用户：密码管理器往登录框里自动填充表单，那是扩展在工作；网盘页面右上角多出来的「下载」按钮，多半也是扩展注入的；视频网站的去广告、倍速播放，同样是扩展在页面加载时插了一手。这些产品共同的特点是：它们都「寄生」在你原本的使用流程里，而不是让你切换到一个新应用。这种低摩擦、随手可得的形态，正是扩展生态十几年来长盛不衰的原因。

为什么现在值得学

2021 年起，Chrome 全面转向 Manifest V3：后台从常驻页面换成了按需唤醒的 Service Worker，网络拦截从可编程的 webRequest 换成了声明式的 declarativeNetRequest，远程代码被明令禁止。变化带来两件事：一是大量老扩展被迫重写或退出，生态出现空档；二是新规范更安全、更规整，学习成本反而比混乱年代更低。对开发者来说，这是一个入场窗口期。

学习路径上，本教材按「先油猴、后插件」的顺序推进。如果你写过用户脚本，第一章的油猴部分能让你十分钟内见效；如果你直接奔着正式扩展来，第三章的 Manifest V3 世界观是绕不开的地基。写扩展免不了和页面里的各种文本、URL 规则打交道，正则匹配写法可参考本站《正则表达式从入门到精通》：正则实战，它会在 match 模式、URL 过滤等多个章节反复用到。

阅读前的准备

你只需要会一点 JavaScript：变量、函数、事件监听、Promise。HTML 和 CSS 达到能看懂、能微调的程度即可。工具方面，装一个 Chrome 或 Edge 浏览器，再加一个顺手的编辑器。用 HBuilderX 写前端的话，工程组织和语法提示都够用，不熟悉的话可以看看 HBuilderX 效率技巧。

官方文档是唯一权威的事实来源，本书所有 API 行为都以它为准，重点章节会附上对应的 developer.chrome.com 链接，方便你交叉核对。地址是 https://developer.chrome.com/docs/extensions 。

下一章我们先分清三个容易混淆的概念：扩展、用户脚本、浏览器自带能力，它们各自适合做什么、边界在哪里。

一个扩展的技术构成

抛开具体功能，任何一个扩展都由固定几类文件组成。把它们认全，后面所有章节都是在讲其中某一类怎么写好：

my-extension/
├── manifest.json      # 身份证：声明名称、版本、权限、入口
├── background.js      # 后台：Service Worker，事件中枢
├── content.js         # 内容脚本：注入进网页的代码
├── popup.html/.js     # 弹窗：点击工具栏图标时出现
├── options.html/.js   # 设置页：用户的长期配置
├── icons/             # 图标：16/48/128 三档
└── rules.json         # 静态规则：如网络拦截规则

manifest.json 是唯一必需的文件，其余按需取用。扩展的运行模型可以概括成一句话：manifest 声明「我能做什么、我需要什么」，各上下文各自运行、靠消息协作。这个模型决定了扩展开发与普通前端开发最大的差异——你写的不是一个页面，而是一组分工明确的小程序。

一个真实场景的完整链路

用「划词收藏」走一遍扩展典型的工作流，把抽象模型落到具体动作上：

1. 用户在网页选中一段文字——content script 监听到 mouseup 事件，读到选区内容；
2. 用户点击浮层上的「收藏」按钮——content script 通过 chrome.runtime.sendMessage 把文字发给后台；
3. 后台 Service Worker 被消息唤醒，把文字写进 chrome.storage.local，并更新图标角标；
4. 用户点开 popup——弹窗从 storage 读出收藏列表渲染；
5. 用户在另一台设备打开 popup——因为设置写进了 storage.sync，列表自动同步过来。

五个步骤涉及四个上下文、两个 API 命名空间、一次跨设备同步，而用户感知到的只是「选中、点一下、到处都能看」。扩展开发的所有技术复杂度，都藏在这条链路的实现细节里。

成本与收益的账

学扩展开发的投入产出比值得算一下。投入侧：MV3 的核心概念——manifest、content script、Service Worker、消息、存储、权限——集中学习大约一周可上手；你已有的 HTML/CSS/JS 功底全部直接复用，不需要新语言、新框架。收益侧：扩展是离「真实用户」最近的练手项目，上架商店即可获得安装量、评分、反馈；它也是求职作品集里辨识度很高的一类项目，因为大多数人写不来——不是难，是没系统学过。

还有一条容易被忽视的收益：扩展开发会强迫你理解浏览器本身。同源策略是怎么运作的、页面加载分几个阶段、网络请求走什么管线——这些问题写页面时可以绕开，写扩展时绕不开。理解了这些，你的普通前端功力也会跟着涨。

本书的学习地图

全书五章的推进逻辑如下。第一章（你现在所在）建立全景：扩展是什么、与脚本什么关系、环境怎么搭、第一个扩展怎么跑。第二章写油猴脚本，用最低的成本获得「改网页」的手感。第三章讲透 MV3 的核心机制，这是全书的重心，也是面试与实战的高频考点。第四章逐个过常用 API。第五章解决发布、审核与实战项目。

学习方式建议：每章的代码都亲手跑一遍，跑通了再往下读；卡住就回到对应章节的排错小节。扩展开发的知识密度不高，但细节密度极高，动手是唯一靠谱的检验方式。

三个常见的第一印象误区

新手对扩展通常有三个误解，提前校准能少走弯路。

误区一：扩展很小，所以很简单。 代码量确实可能只有几百行，但它的执行环境横跨多个上下文、生命周期受休眠机制支配、发布要过审核——复杂度藏在环境里而不是代码里。理解这一点后你会明白为什么本书要用一整章讲 Service Worker 的休眠。

误区二：扩展是网页，会前端就行。 DOM 操作、事件、样式这些技能完全复用，但扩展多了一整层「浏览器接口」：权限体系、消息通信、声明式配置。把这层学透，才算会写扩展；这恰好也是本书第三章的主要内容。

误区三：写完就能上架。 技术上没问题，但商店审核有完整的政策体系（权限匹配、隐私披露、代码可读性），第一次提审被拒是常态而非例外。把审核当成开发流程的一部分来准备，而不是最后的惊吓，体验会好得多。

一个最小 manifest 的样子

不用等到下一篇，先睹为快——这确实是完整可加载的扩展：

{
  "manifest_version": 3,
  "name": "我的第一个扩展",
  "version": "0.1"
}

三个字段，没有任何功能，但浏览器已经认识它了。扩展开发的起点低到令人发指，这既是它友好的地方，也是很多人低估它的原因：从「能加载」到「能上架」之间，隔着机制、API、审核三座山。全书就是翻这三座山的路线图。

本章由 WorkBuddy 原创整理，API 行为依据 Chrome 扩展官方文档（Manifest V3）。