什么是 Chrome 插件

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

Chrome 插件本质上是一个特殊的网页，在此基础上，我们澄清下标题

插件页面：指插件网页的内容
目标页面：指打开插件的页面，这个页面就是目标页面，比如在百度打开插件，百度就是此时的目标页面
Popup：安装插件时，浏览器右上角会有一个插件图标，点击打开的页面是Popup（弹窗）
Devtools：F12 打开开发者工具并将它们显示在顶部。比如 element 和 network 都是 Devtools。
Tab：每一个底部都是一个单独的Tab，中间高亮部分是当前停留的页面，即 活动标签

Chrome 插件可以做什么

修改请求，包括修改请求和响应头，配置代理等，例如: Ajax Proxy
在运行时将脚本注入页面，例如: [Tampermonkey](<https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo>)（[**Userscript** 油猴脚本](<https://lxb.notion.site/Userscript-3c8e87b4d5f248a1b1e278de4f975379>) ）
翻译、音乐等，例如: **沙拉查词、网易云音乐**
自动化，例如: **Automa 、Distill Web Monitor、Auto Refresh Plus 、Tango: screenshots, training, & documentation**

总之，普通浏览器能做到的，插件基本都能做到

Chrome 插件 vs. Userscript 油猴脚本

<aside> 💡 https://search.arc.net/68USIHuMBTl49i6MV2AG

🔍 功能需求 — 如果需要修改网页内容，优先选择油猴脚本；如果需要操作浏览器功能，选择插件。
🌐 跨平台支持 — 油猴脚本通过Tampermonkey等管理器支持多种浏览器，而插件通常针对特定浏览器。
⚙️ API 访问 — 插件可以访问更多的浏览器API，实现更复杂的功能；油猴脚本则受限于网页环境。
💻 工程化 — 插件有更好的工程化支持和工具链，而油猴脚本在这方面较为简单。
🔒 安全性 — 插件通过官方商店分发，经过安全审核；油猴脚本则依赖社区和用户自我管理。 </aside>

同样一个需求，如果浏览器扩展和油猴脚本都能实现，我们应该如何选择？

一方面，浏览器扩展相比用户脚本诞生的时间其实更晚，各家的浏览器扩展后发制人，的确也有了比油猴脚本强得多的功能实现；

但另一方面，虽然脚本能力有限，但是它们占用的系统资源和内存又更少一点。

另外，从安全性角度上来说，油猴脚本虽然也爆出过不少窃取个人信息、替换返利链接甚至挖矿的负面新闻，但油猴脚本的源代码审查相比浏览器扩展更为直接透明，选择合适的油猴脚本获取渠道、留意脚本的权限请求，有基础的用户也可以多多留意、检查脚本内容，一般就能规避大部分风险。

因此我自己的解决方案是，对于轻量一些的场景，通过用户脚本+用户样式（user style）解决大部分浏览需求，重一些的场景则会选择浏览器扩展。

当然了，如果你的设备对保密性和安全等级有着较高的要求，我还是不建议你安装任何第三方油猴脚本。

Chrome 插件构成

一个 Chrome 扩展其实就是一个配置（入口）文件 manifest.json 和一系列 html、css、js、图片文件 等资源组成的一个.crx后缀的压缩包 。

扩展名包含不同的文件，具体取决于提供的功能。以下是一些最常用的文件：Chrome Extensions 101