浏览器插件是什么：会网页就会插件

💡 一句话总结：浏览器插件是跑在 Chrome 里的迷你程序——用写网页的那套 HTML/CSS/JS 就能做，能改界面、改网页、拦请求；开发者这边，AI 写代码，你负责想法和验收。

搜「浏览器插件开发」，前排教程第一屏就甩出 manifest_version、MV3、service worker、content script，零基础看两段就退出。这一课不写一行代码，先把最要紧的事讲清楚：浏览器插件到底是什么、能做什么、为什么「会网页就会插件」、从想法到上架要过几关。

这是场景实战 C 路线（做浏览器插件）的第 1 课，也是整条路线的地基——后面六课的每个操作，都建立在这一课的概念上。

• 还没选定路线？回 4.0 场景实战：选你的路线
• 想做的其实是「有个公开网址的网站」？看 A1 用 AI 做网站
• 想做「在微信里传播」的服务？看 B1 微信小程序是什么

学完你能做什么

• 用 Chrome 官方定义说清楚「浏览器插件是什么」：自定义界面、监听浏览器事件、修改网页
• 列出插件的五类核心能力：工具栏弹窗、侧边栏、拦截网络请求、往网页注入脚本、后台监听事件
• 说清为什么「会网页就会插件」：技术栈就是 HTML/CSS/JS，外加一份 manifest.json
• 记住上架 Chrome 应用商店的三条底线：单一目的、遵守政策、代码全打包
• 画出 C 路线七课的地图，知道每个概念在哪一课展开

你现在的困境

• 「翻译、截图、广告过滤……我每天在用的这些插件，到底是怎么做出来的？」
• 「搜 chrome 插件开发，教程第一屏就是 manifest、MV3、service worker，一个词都不认识」
• 「我能让 AI 写网页，但插件感觉是另一个世界——AI 写插件靠谱吗？」

什么时候用这一招

当你需要：

• 改造浏览器本身：在任意网页上加按钮、屏蔽元素、改样式、抓内容
• 一个常驻浏览器的工具——点一下工具栏图标就用，不用先打开某个网站
• 做「自己就是第一个用户」的效率工具：划词翻译、标签管理、自动填表

而且不想：

• 学一门新语言——插件用的就是网页那套 HTML/CSS/JS
• 从零搭工程——一个插件最小就是一个文件夹加几个文件
• 伺候服务器——插件跑在浏览器里，本地加载就能用，不用部署

做出来的东西更想「谁都能用网址访问」？那是 A 路线的事，回 A1 用 AI 做网站。

🎒 开始前的准备

• 走完 4.0 场景实战：选你的路线，确定你要的是「浏览器里的工具」
• 电脑上装着 Chrome 浏览器（C 路线以 Chrome 为准，本课只看不动手）
• 8 分钟阅读时间，本课不需要写任何代码

核心思路

先对个名字：官方文档里的 Chrome extensions，中文圈习惯叫「浏览器插件」「Chrome 插件」，本课程两个名字混用。

Chrome 官方文档给插件下过一句话定义：

Chrome extensions enhance the browsing experience by customizing the user interface, observing browser events, and modifying the web. （Chrome 扩展通过自定义界面、监听浏览器事件、修改网页，来增强浏览体验。）

翻译成人话：插件就是「浏览器官方允许你改造浏览器」的迷你程序，干三件事：

#	官方定义里的	人话
1	customizing the user interface	给浏览器加自己的界面（按钮、弹窗、侧边栏）
2	observing browser events	监听浏览器的一举一动（开标签、关标签、删书签）
3	modifying the web	修改你正在看的网页（加元素、改样式、拦请求）

对小白最关键的是这句官方原话：

You can build extensions using the same web technologies that are used to create web applications: HTML, CSS, and JavaScript. （你可以用和写网页一样的技术来做插件：HTML、CSS 和 JavaScript。）

这就是本课标题的出处——会网页就会插件。网页三件套你已经能让 AI 写了，插件只是多一份 manifest.json「说明书」文件，告诉 Chrome 你的插件叫什么、要哪些权限。

💡 为什么说 AI 写插件靠谱

插件的全部代码就是 HTML/CSS/JS 加一份 JSON 配置——没有编译、没有框架门槛。Chrome 官方文档成体系，从入门、manifest、调试到发布一条龙，C 路线每一课的事实都出自这套文档，你照着喂给 AI 就行。

跟我做

第 1 步：盘点你每天在用的插件（入门从「用过」开始）

为什么：先当用户，再当开发者。看一眼「成品」长什么样，比背十个名词有用。

操作：打开 Chrome，地址栏输入 chrome://extensions 回车（也可以点工具栏的拼图按钮 → Manage Extensions）。

你应该看到：一份已安装插件列表。翻译、截图、广告过滤……每一个你叫得出名字的插件，本质上都是「一个文件夹 + manifest.json + HTML/CSS/JS」做出来的迷你程序。

• 小检查：挑一个你常用的插件，想想它干的是「改界面」「监听事件」还是「改网页」

第 2 步：用官方能力清单回答「插件能做什么」

为什么：给 AI 提需求时，说得出「我要的是弹窗，还是往页面里注入脚本」，AI 一次写对的概率会高不少。这张表就是插件的「零件目录」。

能力	官方说明	典型用途
工具栏按钮（Action）	点工具栏图标执行代码，或弹出一个小窗口（popup）	一键启动功能：翻译、截图、摘要
侧边栏（Side Panel）	在浏览器侧边栏显示自定义界面	常驻词典、笔记、AI 对话栏
网络请求拦截（DeclarativeNetRequest）	拦截、屏蔽或修改网络请求	广告过滤、屏蔽追踪脚本
内容脚本（Content scripts）	在网页的环境里运行 JavaScript	往页面加按钮、改样式、读页面内容
后台服务（Service workers）	在后台运行，处理浏览器事件（比如删书签、关标签）	监听标签变化、发通知

除了这五类，插件还能用常规 Web API 和一整套 Chrome 扩展 API——能力边界以官方文档为准。

你应该看到：再冒出「划词翻译」「屏蔽弹窗」这类点子，你能对号入座——比如翻译要点选中文字，得靠内容脚本进网页；屏蔽广告靠的是拦截网络请求。

第 3 步：认清技术栈——为什么「会网页就会插件」

为什么：技术栈决定学习成本。要是插件得先学一门新语言，它就不该出现在零基础路线里。

好消息：这套东西你在 A 路线全见过。

技术	在网页里（A 路线）	在插件里
HTML	页面结构	弹窗、侧边栏、设置页的页面结构
CSS	页面样式	同一套写法
JavaScript	页面逻辑	同一门语言，按需调用 Chrome 扩展 API

新东西只有一样：manifest.json——一份放在插件根目录的 JSON 配置文件，告诉 Chrome 插件叫什么、版本多少、要哪些权限。它是插件的「身份证 + 说明书」，C3 会逐字段拆解。

还有一条现在就记住：开发插件只写 Manifest V3（MV3）。manifest 里 manifest_version 只支持 3；网上老教程很多还是 MV2，照抄会白干——MV2 插件已被 Chrome 全面禁用（2025 年 7 月 Chrome 138 起，所有渠道的用户都无法再开启）。

你应该看到：心里有底了——没有新语言，只有一个新文件和几组按需查的 API。

第 4 步：记住浏览器插件开发的上架三底线

为什么：这三条是 Chrome 官方给「什么插件能上架」划的线。动手前就知道，能省一整轮返工；做完才发现，改起来最疼。

官方对上架插件的三条要求：

1. 单一目的（single purpose）：插件必须只有一个定义清晰、易懂的目的——「什么都能干」的工具箱过不了审
2. 遵守开发者计划政策（developer program policies）：内容、行为、隐私都有规范
3. 代码全打进包里：官方原话——「all logic must be included in the extension package. This means no additional JavaScript code may be downloaded at runtime.」（所有逻辑必须包含在插件包里，不许在运行时下载额外的 JavaScript 代码）

第 3 条对 vibe coding 尤其要紧：想让插件「从服务器拉最新逻辑」绕过更新？此路不通，官方明文禁止。

你应该看到：选品时多了一道自检——我的插件能用一句话说清单一目的吗？所有代码都在包里吗？

第 5 步：画出 C 路线的七课地图

为什么：地图记住了，后面六课就只是在填空——每一课解决一格。

C 路线共七课，本课（C1）是地基，剩下六格：

课	解决什么
C2 第一个 Chrome 插件	15 分钟跑通 Hello World：manifest 最小示例 + 本地加载三步
C3 manifest.json 详解	每个字段什么意思、上架还要填哪些
C4 Content Script 与 Service Worker	插件的「手脚」和「大脑」各管什么、什么时候用谁
C5 插件调不出来怎么办	日志去哪找、报错怎么读
C6 上架 Chrome 应用商店	开发者注册、打包 zip、提审全流程
C7 商店审核与发布策略	多数 3 天内审完、灰度发布与回滚

💡 中国开发者能注册吗

能。Chrome Web Store 支持注册的国家与地区名单里有 China（中国大陆）。注册要交一次性注册费，金额以开发者后台实付页为准——C6 详解。

你应该看到：七课地图在心里，下一课就是动手写 Hello World。

检查点 ✅

• 能复述官方定义的三件事：自定义界面、监听浏览器事件、修改网页
• 能说出五类能力里的三类：工具栏弹窗、侧边栏、拦截请求、内容脚本、后台服务
• 知道插件技术栈就是 HTML/CSS/JS + 一份 manifest.json，没有新语言
• 能说出上架三底线：单一目的、遵守政策、代码全打包（不许远程加载 JS）
• 知道现在只写 MV3，网上 MV2 老教程不能照抄

踩坑提醒

❌ 以为插件开发要学一门新技术

一听到「开发」就先去啃书？不用。官方明说插件用的就是 HTML/CSS/JS，新东西只有一份 manifest.json 和按需查的 Chrome API。

正确做法：把 A 路线攒下的网页经验直接带过来，缺什么查什么，别从头学。

❌ 照抄网上老教程的 MV2 代码

很多热门教程写于 MV2 时代。现在 manifest 里 manifest_version 只支持 3，MV2 插件也已被 Chrome 全面禁用——照抄老代码等于白干。

正确做法：看到教程里出现 "manifest_version": 2 直接关掉，以官方文档和 C3 的字段速查为准。

❌ 想靠「运行时从服务器下载代码」做动态逻辑

官方明文：所有逻辑必须打进插件包，不许在运行时下载额外 JavaScript。这么设计的插件过不了审。

正确做法：功能更新走正路——改代码、提高版本号、重新提交（节奏在 C6/C7 讲）。

❌ 什么功能都往一个插件里塞

「又翻译又截图又管标签」的瑞士军刀式插件，违反单一目的要求，上架时说不清用途。

正确做法：一个插件解决一件事。第二个点子？做第二个插件。

进阶技巧（可选）

🚀 官方教程清单就是现成的进阶路线。Chrome 官方给初学者排了一条教程链：Hello World → Run scripts on every page（自动往指定网站加元素）→ Inject scripts into the active tab（点工具栏图标改当前页样式）→ Create a tab manager（标签管理弹窗）→ Handle events with service workers → Debug your extension。C 路线后面几课就沿着这条链展开，走完七课，你就有能力接着刷完官方全部教程。

用 TypeScript 写插件的话，可以装 npm 包 chrome-types 获得 Chrome API 的自动补全——这个包随 Chromium 源码自动更新，记得经常升级。

本课小结

✅ 浏览器插件开发的第一课，你拿到了这张地图：

• 浏览器插件 = 官方允许你改造浏览器的迷你程序：自定义界面、监听浏览器事件、修改网页
• 能力五件套：工具栏弹窗（Action）、侧边栏、拦截请求（DeclarativeNetRequest）、内容脚本、后台服务
• 技术栈零新增：HTML/CSS/JS + manifest.json；现在只写 MV3
• 上架三底线：单一目的、遵守政策、代码全打包
• C 路线七课：本课（地基）→ Hello World → manifest → 双脚本 → 调试 → 上架 → 审核策略

关键概念	一句话记忆	哪一课展开
manifest.json	插件的身份证 + 说明书	C3
MV3	现在唯一的版本，MV2 老教程别抄	C2
content script / service worker	插件的手脚和大脑	C4
本地加载与调试	chrome://extensions + 日志位置	C5
上架与审核	一次性注册费、多数 3 天内审完	C6 · C7

下一课预告

下一课 C2 第一个 Chrome 插件：15 分钟跑通 Hello World。你会学到：

• manifest.json 最小可用示例长什么样（官方示例逐字给）
• chrome://extensions 里打开开发者模式，Load unpacked 三步本地加载
• 改完代码，哪些文件要刷新插件、哪些不用
• 插件怎么固定（Pin）到工具栏，随点随用

准备好了就进 C2 →