什么是浏览器扩展

1-1 一句话理解扩展

浏览器扩展，是一种跑在浏览器内部的小程序。它和网页不一样，网页是你打开一个网址才加载；扩展是装进浏览器之后，随时能在后台或工具栏里发挥作用。

你可以把它想成给浏览器装的一个”外挂模块”。比如你嫌广告烦，装个去广告扩展；你想一键翻译网页，装个翻译扩展。这些都不是浏览器自带的功能，而是开发者写出来的扩展。

扩展最特别的地方，是它能同时触摸”浏览器本身”和”网页内容”。普通网页只能管自己那一页；扩展却能跨页面、跨网站，甚至修改浏览器的行为。也正因如此，扩展能做的事，比单个网页多得多。

1-2 扩展能做什么

扩展的能力可以分成三大类。理解这三类，你就明白它到底能替你干多少活。

第一类是改页面。扩展可以往网页里注入自己的脚本，增删改页面的元素。比如给所有图片加一键下载按钮，或者把网页的配色改成护眼模式。这种能力来自”内容脚本”，它运行在网页的环境里，能读写页面的 DOM。

第二类是拦请求。扩展能在网络请求发出去之前、或者回来之前动动手脚。比如拦截某个追踪器、自动给请求加请求头、或把请求重定向到别的地址。在 Manifest V3 里，这件事主要靠 declarativeNetRequest 来做——它能拦截、重定向、升级协议、改请求和响应头，但改不了接口返回的内容本身。

第三类是工具集成。扩展可以调用浏览器提供的大量接口，去做标签页管理、书签整理、通知提醒、剪贴板读写等事。你几乎可以把日常重复的浏览器操作，全交给一个扩展自动完成。

1-3 我们身边的扩展产品

扩展不是实验室里的概念，它早就渗透进了日常。举几个你大概率见过或用过的例子。

密码管理器，比如把账号密码自动填进登录框，背后就是内容脚本在读页面表单、再往里写内容。

翻译工具，选中一段外文就弹出翻译，这是监听了你的鼠标选择，再调用翻译接口。

网页截图与标注，它能截取整个长页面，靠的是扩展对标签页的控制权限。

广告拦截，它维护一份过滤规则，在网络层把广告请求挡在门外，这正是 declarativeNetRequest 的用武之地。

还有购物比价、视频倍速、稍后读、护眼模式、开发者调试面板等等。你会发现，凡是”浏览器默认没给、但你很想要”的便利，基本都有对应的扩展。整个扩展生态已经非常庞大，商店里的数量以十万计。

1-4 扩展和普通网页、App 的区别

很多人会问：扩展和书签、和网页脚本、和独立 App 有啥不一样？

和网页比，扩展有更高的权限。网页受同源策略严格限制，跨站读写很难；扩展经过用户授权后，可以访问多个站点、读取浏览器状态。网页关掉就没了，扩展能常驻在工具栏。

和手机 App 比，扩展更轻、更聚焦。它不追求大而全，而是解决浏览器场景里的一个具体痛点。安装只要点一下，卸载也不留痕迹。

和书签比，书签只是指向一个网址；扩展是一整套逻辑加界面，能主动做事，而不只是”跳过去”。

1-5 扩展做不到的事

说完了能做的，也得泼点冷水。扩展不是万能的，它有明显的边界。

它不能直接读取你操作系统里的任意文件，也不能突破网站的登录鉴权去偷数据。涉及银行、支付等敏感页面的操作，浏览器和网站都会重点防护，扩展插不进去。

它的能力上限，取决于你向浏览器申请的权限大小。而权限越大，商店审核越严，用户也越警惕。所以好的扩展设计，都遵循”最小权限”——只拿刚好够用的那点权限。

1-6 学扩展需要什么基础

好消息是，门槛不高。扩展的技术底座就是前端三件套：HTML 写结构、CSS 管样式、JavaScript 写逻辑。你会这三样的基础，就能写出扩展。

不用先学框架。Vue、React 这类框架是锦上添花，初学完全可以不碰，用原生 JS 足够。等后面想做复杂界面了，再考虑引入也不迟。

心态上，建议边写边跑。扩展是”写了马上能在浏览器看到”的东西，比很多后端项目反馈更快。每学一个部件就加载一次，成就感拉满，也不容易半途而废。

1-7 本教程的边界：只讲 MV3

扩展技术已经演进了好几代，旧标准早已退出历史舞台。本教程不讲旧标准，从第一章到最后一章，全部基于 Manifest V3（简称 MV3）。

选 MV3 不是赶时髦。它是 Chrome、Edge 等主流浏览器现在唯一支持的标准，新扩展必须按它来写，商店也只收 MV3 的包。跟着旧写法学，只会写出上不了架的东西。

所以你在本教程里看到的每一个例子、每一段代码，都是 MV3 口径。比如后台用的是”服务工作者”而不是常驻页面，网络修改用的是 declarativeNetRequest 而不是老接口。

接下来的第二章，我们会拆开扩展的”五脏六腑”，看清一个扩展到底由哪些部件组成、它们之间怎么配合。先把这一章的定义记牢，后面学架构会轻松很多。