关于 Chrome 插件与扩展的误区
Chrome 浏览器自 2008 年诞生以来发生了很多事情，它是目前功能最完备、对新特性支持最充分的 Web 浏览器，Chrome 的出现，在某种意义上扩展了我们对浏览器功能的定义，并且它支持第三方开发人员制作的应用程序、插件和扩展。但是这三者有什么区别呢？如果你想获得广告拦截器，那是应用程序还是扩展程序？在 HTML5 之前曾红极一时、可以让网站内容变得更丰富、带来了视频/动画/游戏却因安全问题一直饱受诟病的 Adobe Flash，是属于浏览器扩展还是插件？
在此，我们先来了解一下 Chrome 应用程序、插件和扩展程序之间（Chrome apps, plugins and extensions）的区别，以便你能够始终知道自己需要的是什么。
Chrome 应用程序（Chrome Apps）
Chrome 应用程序的概念，可能是 Chrome 应用程序、插件和扩展程序中最模糊的，因为其实 Google 本身可以互换地指代应用程序和扩展程序。想要证明这一点也不难，你可以转到 Chrome 网上应用店中的扩展程序页面[2]（https://chrome.google.com/webstore/category/extensions），在地址栏中将“extensions”一词替换为“apps”，它实际上会重定向回扩展（extensions）页面！
Web Store 曾经有一个专门的“应用程序（Apps）”部分，在那里提供独立的桌面应用程序。但在 2017 年底，谷歌移除了这些传统的 Chrome 应用程序，因为 Google 推动了“渐进式网络应用程序（Progressive Web Apps，即 PWA）”的构想，从本质上将网站转变为从桌面或手机即时访问的应用程序，所以如今的搜索框下方只有“Extensions”和“Themes”两部分了。
对于普通的 PC 用户来说，Chrome 应用程序如今已融入扩展程序中。如果你正在为 Chrome 寻找广告拦截器、Web Clipper 等，无论你搜索“Chrome app”还是“Chrome extension”，您最终都会得到一个扩展程序。
Chrome 扩展程序（Chrome Extensions）
Chrome 扩展程序是 Chrome 的附加组件，旨在以各种方式改善您的体验。这种体验的改善可以从数据保护程序到广告拦截器，再到让你在 Chrome 中双击单词并立即了解其含义的字典。您可以在 Chrome 网上应用店中找到扩展程序，当您安装一个扩展程序时，它会在 Chrome 浏览器的右上角显示一个小图标。
扩展程序可以增加浏览器本身的功能，也可以调用浏览器的 API，并且同一个浏览器的扩展一般也都是可以跨操作系统使用的。比如，你在 Windows 使用的那些 Chrome 扩展，换到 Mac 平台上也一样能用。
扩展为浏览器添加特性与功能，它一般通过 web 技术——HTML，CSS 还有 JavaScript 来创建。扩展其实是一个压缩文件，Firefox 的扩展是.xpi、Chrome 扩展格式为.crx。
Chrome 插件（Chrome Plugins）
插件最好被描述为 “插入”Chrome 的代码包，允许 Web 开发人员将某些功能、动画、视频等嵌入到他们的网站中，插件可调用操作系统的 API，并且不同操作系统的插件一般不能混用，插件主要用于实现浏览器无法独立实现的功能。
也就是说，插件使得别的程序才能处理的内容在浏览器的页面中得以展现和处理。所以插件一般实现的都是比较底层的功能，一旦出现问题，往往就会牵涉到整个操作系统，像 Flash 插件就属于经常被扒出高危漏洞的那一类。在 Chrome 57 版本之前，你可以在地址栏中的chrome://plugins中查看 Chrome 的所有插件列表，其中包括 Adobe Flash Player、Chrome PDF Viewer 和 Java 插件等，现在chrome://chrome-urls/中已经找不到chrome://plugins了。
chrome://plugins不再存在的部分原因是出于安全考虑，Chrome 不再支持 NPAPI 插件——一些插件不再工作，而其他插件已以各种方式集成到 Chrome 中。例如，基于 Java 的小程序不再在浏览器中运行，PDF 查看器等功能已直接集成到浏览器中。因此，有点像应用程序（Chrome Apps），Chrome 插件的也正在逐步淘汰或集成到浏览器的主体中。
插件的格式通常是二进制文件，如 windows 下的插件一般是dll，linux 下的插件一般是.so格式。
从本质上讲，“Chrome 应用程序”会被 PWA 所替代，而这些年来插件基本上已被弃用，所以你在 Chrome 中唯一需要关心的就是扩展程序。
真正意义上的 Chrome 插件是更底层的浏览器功能扩展，但是浏览器插件和扩展这两个概念早已被混淆。鉴于大部分人对 Chrome 插件的叫法已经习惯，本文也全部采用这种叫法，但您应该知道，本文所描述的 Chrome 插件实际上指的是 Chrome 扩展。
顺便简单做个补充，除了以上提到的 3 个概念，你可能还看到过
ActiveX（控件）、Addon等概念，其实ActiveX是 IE 内核浏览器下的插件（Plugin），随着 IE 浏览器从 Windows 11 中消失，并将在 2022 年正式退出历史舞台，我们无需过多关注；Addon 是属于 Mozilla 系浏览器的，中文名字叫附加组件，其实和浏览器扩展是同一类应用。
浏览器插件的核心元素
manifest.json
一个 Chrome 扩展其实就是一个配置（入口）文件 manifest.json 和一系列 html、css、js、图片文件的集合，扩展/插件从它们的manifest.json开始，所以manifest.json是一个Chrome 插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。一般至少应该包含下面这些配置：
// manifest.json { "name": "Getting Started Example", // 扩展的名称（name） "version": "1.0", // 插件版本号 "description": "Build an Extension!", // 插件描述 "manifest_version": 2, // manifest 版本，目前是必须是2或者3 // 指定扩展在Chrome 工具栏中的图标，它定义了扩展图标文件位置（default_icon）、 // 悬浮提示（default_title）和点击扩展图标所显示的页面位置（default_popup） "browser_action": { "default_title": "Hello, 某SDN!", "default_icon": "/images/logo.png", // 浏览器右上角图标设置 "default_popup": "popup.html" } }
当然，一个
manifest.json文件可以包含很多东西，可以参考Manifest file format[3]，后续使用到其他配置会在注释中进行说明。
VSCode 在书写
.json文件的备注时标红提示Comments are not permitted in JSON.（521），此时只需点击 VSCode 界面右下角的“JSON”，在顶部展现出的框中输入“JSON with Comments”，点击使用即可解决。
popup.html
这个名称不是固定的，取决于 manifest.json中对browser_action的“default_popup”字段的配置，它定义了点击插件的图标所展示的弹窗页面 HTML，popup.html像普通 html 一样可以直接引入其他 js 文件。需要注意的一点是，这里面引入的 js，如果直接操作 DOM，操作的是 popup.html 产生的 DOM，而不是浏览器当前展示页面的 DOM。
content_scripts
这一项来自于manifest.json的content_scripts配置项，声明了需要直接注入页面的 JS，这里的 JS 可以直接操作当前页面的 DOM 对象，所以这个文件在需要对打开的页面进行操作时会很有用。
