仅20+行核心代码的Chrome插件，这不是有手就行吗？

大家好&＃xff0c;我是零一&＃xff0c;不知道你们有没有开发过Chrome插件&＃xff0c;但你们一定用得很多。其实Chrome插件的开发一点都不麻烦&＃xff0c;基本就是有手就行&＃xff0c;一个功能极简的插件核心代码也就不过30行左右。那你还怕不会插件的开发吗&＃xff1f;

本文将手把手&＃xff08;真 · 手把手&＃xff09;介绍Chrome插件的开发&＃xff0c;并末尾附带一个插件实战教学

本文来自 "独钓寒江雪^[1]" 投稿

严格意义上说&＃xff0c;本篇文章要讨论的应该是 “Chrome 扩展(Extension)”而不是“Chrome 插件&＃xff08;Plugins&＃xff09;”&＃xff0c;大家不妨先思考一个问题&＃xff1a;“浏览器插件”和“浏览器扩展”之间有什么区别&＃xff1f;如果您对此感到厌烦&＃xff0c;不妨直接跳过此小节的阅读。

关于 Chrome 插件与扩展的误区

  Chrome 浏览器自 2008 年诞生以来发生了很多事情&＃xff0c;它是目前功能最完备、对新特性支持最充分的 Web 浏览器&＃xff0c;Chrome 的出现&＃xff0c;在某种意义上扩展了我们对浏览器功能的定义&＃xff0c;并且它支持第三方开发人员制作的应用程序、插件和扩展。但是这三者有什么区别呢&＃xff1f;如果你想获得广告拦截器&＃xff0c;那是应用程序还是扩展程序&＃xff1f;在 HTML5 之前曾红极一时、可以让网站内容变得更丰富、带来了视频/动画/游戏却因安全问题一直饱受诟病的 Adobe Flash&＃xff0c;是属于浏览器扩展还是插件&＃xff1f;

  在此&＃xff0c;我们先来了解一下 Chrome 应用程序、插件和扩展程序之间&＃xff08;Chrome apps, plugins and extensions&＃xff09;的区别&＃xff0c;以便你能够始终知道自己需要的是什么。

Chrome 应用程序&＃xff08;Chrome Apps&＃xff09;

  Chrome 应用程序的概念&＃xff0c;可能是 Chrome 应用程序、插件和扩展程序中最模糊的&＃xff0c;因为其实 Google 本身可以互换地指代应用程序和扩展程序。想要证明这一点也不难&＃xff0c;你可以转到 Chrome 网上应用店中的扩展程序页面^[2]&＃xff08;https://chrome.google.com/webstore/category/extensions&＃xff09;&＃xff0c;在地址栏中将“extensions”一词替换为“apps”&＃xff0c;它实际上会重定向回扩展&＃xff08;extensions&＃xff09;页面&＃xff01;

  Web Store 曾经有一个专门的“应用程序&＃xff08;Apps&＃xff09;”部分&＃xff0c;在那里提供独立的桌面应用程序。但在 2017 年底&＃xff0c;谷歌移除了这些传统的 Chrome 应用程序&＃xff0c;因为 Google 推动了“渐进式网络应用程序&＃xff08;Progressive Web Apps&＃xff0c;即 PWA&＃xff09;”的构想&＃xff0c;从本质上将网站转变为从桌面或手机即时访问的应用程序&＃xff0c;所以如今的搜索框下方只有“Extensions”和“Themes”两部分了。

  对于普通的 PC 用户来说&＃xff0c;Chrome 应用程序如今已融入扩展程序中。如果你正在为 Chrome 寻找广告拦截器、Web Clipper 等&＃xff0c;无论你搜索“Chrome app”还是“Chrome extension”&＃xff0c;您最终都会得到一个扩展程序。

Chrome 扩展程序&＃xff08;Chrome Extensions&＃xff09;

  Chrome 扩展程序是 Chrome 的附加组件&＃xff0c;旨在以各种方式改善您的体验。这种体验的改善可以从数据保护程序到广告拦截器&＃xff0c;再到让你在 Chrome 中双击单词并立即了解其含义的字典。您可以在 Chrome 网上应用店中找到扩展程序&＃xff0c;当您安装一个扩展程序时&＃xff0c;它会在 Chrome 浏览器的右上角显示一个小图标。

  扩展程序可以增加浏览器本身的功能&＃xff0c;也可以调用浏览器的 API&＃xff0c;并且同一个浏览器的扩展一般也都是可以跨操作系统使用的。比如&＃xff0c;你在 Windows 使用的那些 Chrome 扩展&＃xff0c;换到 Mac 平台上也一样能用。

  扩展为浏览器添加特性与功能&＃xff0c;它一般通过 web 技术——HTML&＃xff0c;CSS 还有 Javascript 来创建。扩展其实是一个压缩文件&＃xff0c;Firefox 的扩展是.xpi、Chrome 扩展格式为.crx。

Chrome 插件&＃xff08;Chrome Plugins&＃xff09;

  插件最好被描述为 “插入”Chrome 的代码包&＃xff0c;允许 Web 开发人员将某些功能、动画、视频等嵌入到他们的网站中&＃xff0c;插件可调用操作系统的 API&＃xff0c;并且不同操作系统的插件一般不能混用&＃xff0c;插件主要用于实现浏览器无法独立实现的功能。

  也就是说&＃xff0c;插件使得别的程序才能处理的内容在浏览器的页面中得以展现和处理。所以插件一般实现的都是比较底层的功能&＃xff0c;一旦出现问题&＃xff0c;往往就会牵涉到整个操作系统&＃xff0c;像 Flash 插件就属于经常被扒出高危漏洞的那一类。在 Chrome 57 版本之前&＃xff0c;你可以在地址栏中的chrome://plugins中查看 Chrome 的所有插件列表&＃xff0c;其中包括 Adobe Flash Player、Chrome PDF Viewer 和 Java 插件等&＃xff0c;现在chrome://chrome-urls/中已经找不到chrome://plugins了。

  chrome://plugins不再存在的部分原因是出于安全考虑&＃xff0c;Chrome 不再支持 NPAPI 插件——一些插件不再工作&＃xff0c;而其他插件已以各种方式集成到 Chrome 中。例如&＃xff0c;基于 Java 的小程序不再在浏览器中运行&＃xff0c;PDF 查看器等功能已直接集成到浏览器中。因此&＃xff0c;有点像应用程序&＃xff08;Chrome Apps&＃xff09;&＃xff0c;Chrome 插件的也正在逐步淘汰或集成到浏览器的主体中。

  插件的格式通常是二进制文件&＃xff0c;如 windows 下的插件一般是dll&＃xff0c;linux 下的插件一般是.so格式。

  从本质上讲&＃xff0c;“Chrome 应用程序”会被 PWA 所替代&＃xff0c;而这些年来插件基本上已被弃用&＃xff0c;所以你在 Chrome 中唯一需要关心的就是扩展程序。

  真正意义上的 Chrome 插件是更底层的浏览器功能扩展&＃xff0c;但是浏览器插件和扩展这两个概念早已被混淆。鉴于大部分人对 Chrome 插件的叫法已经习惯&＃xff0c;本文也全部采用这种叫法&＃xff0c;但您应该知道&＃xff0c;本文所描述的 Chrome 插件实际上指的是 Chrome 扩展。

顺便简单做个补充&＃xff0c;除了以上提到的 3 个概念&＃xff0c;你可能还看到过ActiveX&＃xff08;控件&＃xff09;、Addon 等概念&＃xff0c;其实 ActiveX 是 IE 内核浏览器下的插件&＃xff08;Plugin&＃xff09;&＃xff0c;随着 IE 浏览器从 Windows 11 中消失&＃xff0c;并将在 2022 年正式退出历史舞台&＃xff0c;我们无需过多关注&＃xff1b;Addon 是属于 Mozilla 系浏览器的&＃xff0c;中文名字叫附加组件&＃xff0c;其实和浏览器扩展是同一类应用。

浏览器插件的核心元素

manifest.json

  一个 Chrome 扩展其实就是一个配置&＃xff08;入口&＃xff09;文件 manifest.json 和一系列 html、css、js、图片文件的集合&＃xff0c;扩展/插件从它们的manifest.json开始&＃xff0c;所以manifest.json是一个Chrome 插件最重要也是必不可少的文件&＃xff0c;用来配置所有和插件相关的配置&＃xff0c;必须放在根目录。一般至少应该包含下面这些配置&＃xff1a;

// manifest.json
{"name": "Getting Started Example", // 扩展的名称&＃xff08;name&＃xff09;"version": "1.0", // 插件版本号"description": "Build an Extension!", // 插件描述"manifest_version": 2, // manifest 版本&＃xff0c;目前是必须是2或者3// 指定扩展在Chrome 工具栏中的图标&＃xff0c;它定义了扩展图标文件位置&＃xff08;default_icon&＃xff09;、// 悬浮提示&＃xff08;default_title&＃xff09;和点击扩展图标所显示的页面位置&＃xff08;default_popup&＃xff09;"browser_action": {"default_title": "Hello, 某SDN!","default_icon": "/images/logo.png", // 浏览器右上角图标设置"default_popup": "popup.html"}
}

当然&＃xff0c;一个manifest.json文件可以包含很多东西&＃xff0c;可以参考Manifest file format^[3]&＃xff0c;后续使用到其他配置会在注释中进行说明。

VSCode 在书写.json 文件的备注时标红提示 Comments are not permitted in JSON.&＃xff08;521&＃xff09;&＃xff0c;此时只需点击 VSCode 界面右下角的“JSON”&＃xff0c;在顶部展现出的框中输入“JSON with Comments”&＃xff0c;点击使用即可解决。

popup.html

  这个名称不是固定的&＃xff0c;取决于 manifest.json中对browser_action的“default_popup”字段的配置&＃xff0c;它定义了点击插件的图标所展示的弹窗页面 HTML&＃xff0c;popup.html像普通 html 一样可以直接引入其他 js 文件。需要注意的一点是&＃xff0c;这里面引入的 js&＃xff0c;如果直接操作 DOM&＃xff0c;操作的是 popup.html 产生的 DOM&＃xff0c;而不是浏览器当前展示页面的 DOM。

content_scripts

  这一项来自于manifest.json的content_scripts配置项&＃xff0c;声明了需要直接注入页面的 JS&＃xff0c;这里的 JS 可以直接操作当前页面的 DOM 对象&＃xff0c;所以这个文件在需要对打开的页面进行操作时会很有用。

开发调试

  Chrome 插件没有严格的项目结构要求&＃xff0c;只要保证根目录有一个 manifest.json 即可&＃xff0c;也不需要专门的 IDE 进行开发。

  开发调试时&＃xff0c;进入插件管理页面最简洁的方式是在地址栏输入chrome://extensions/进行访问。其他两种进入插件管理页面的方式如下图所示&＃xff1a;

  打开右上角开发者模式便可以文件夹的形式直接加载插件&＃xff0c;否则只能安装.crx 格式的文件。默认情况下&＃xff0c;Chrome 要求插件必须从它的 Chrome 应用商店安装&＃xff0c;其它任何网站下载的以及自己打包的都无法直接安装。所以&＃xff0c;其实我们可以把 crx 文件解压&＃xff0c;然后通过开发者模式直接加载。

  开发过程中&＃xff0c;代码有任何改动都必须重新加载插件&＃xff0c;点击对应插件的重新加载按钮或者刷新当前插件管理页面均可。如果出现错误&＃xff0c;将会出现类似下面的界面&＃xff0c;更改后&＃xff0c;你需要先点击“错误”按钮进入弹窗对错误进行清除。

开发过程中遇到的更多细节可以参考官方Debugging extensions^[4]文档。

3 分钟写一个浏览器插件&＃xff0c;解决某 SDN 未登录无法的问题

  我们知道&＃xff0c;前段时间某 SDN 更新后&＃xff0c;未登录时&＃xff0c;无法复制文章中的代码&＃xff0c;给开发者带来一定不便。今天我们就花 3 分钟时间写一个浏览器插件&＃xff0c;突破这种限制。

  基本思路其实很简单&＃xff0c;通过将当前页面的document.body.contentEditable值设置为true来达到可复制的效果。当然&＃xff0c;这个我们通过控制台面板或者“自定义书签“的方式也能轻松实现&＃xff0c;这里只是让大家体验一下简单插件的开发&＃xff0c;避免出手就是”Hello World&＃xff01;“&＃xff0c;&＃x1f604;

某 SDN 给代码块儿设置了user-select: none;&＃xff0c;导致无法进行选中复制&＃xff0c;从这里入手亦可。

书签功能的实现可参考前端装逼技巧 108 式&＃xff08;一&＃xff09;—— 打工人^[5]。

  下面将逐步介绍项目各文件相关信息&＃xff0c;您也可以直接点击这里^[6]在线查看完整代码。整个项目核心代码不足 30 行&＃xff0c;相信您能藉此迅速入门 Chrome 插件开发&＃xff0c;激发兴趣和潜能&＃xff0c;写出更有用的插件或者应用。

目录结构

  目录结构图&＃xff1a;

  目录解释&＃xff1a;

• images

  • logo.png&＃xff1a;插件图标。

• js

  • popup.js&＃xff1a;弹窗 popup.html 中使用的 js&＃xff1b;

  • content_script.js&＃xff1a;需要直接注入页面的 js&＃xff1b;

• manifest.json&＃xff1a;配置文件&＃xff0c;插件开发中的必备项&＃xff1b;

• popup.html&＃xff1a;插件弹窗&＃xff1b;

• style.css&＃xff1a;弹窗样式文件&＃xff1b;

manifest.json 配置文件

{// 清单文件的版本&＃xff0c;必须是2或者3&＃xff0c;// 文档见 https://developer.chrome.com/docs/extensions/mv3/manifest/manifest_version/"manifest_version": 2,// 插件的名称"name": "Copy SDN",// 插件的版本"version": "1.0.0",// 插件描述"description": "不登录依然可以在某SDN页面进行代码复制&＃xff01;",// 指定扩展在Chrome 工具栏中的图标&＃xff0c;它定义了扩展图标文件位置&＃xff08;default_icon&＃xff09;、// 悬浮提示&＃xff08;default_title&＃xff09;和点击扩展图标所显示的页面位置&＃xff08;default_popup&＃xff09;"browser_action": {"default_title": "Hello, 某SDN!","default_icon": "/images/logo.png", // 浏览器右上角图标设置"default_popup": "popup.html"},// https://developer.chrome.com/docs/extensions/mv2/manifest/icons/// 128x128 的图标&＃xff1b;它在安装期间和 Chrome 网上应用店使用// 48x48 图标&＃xff0c;用于扩展程序管理页面 (chrome://extensions)// 16x16 图标用作扩展页面的收藏夹图标// 这里只写一个其实也是可以的"icons": {"128": "/images/logo.png"},// 需要直接注入页面的JS"content_scripts": [{//"matches": ["http://*/*", "https://*/*"],"" 表示匹配所有地址"matches": ["https://blog.csdn.net/*"],// 多个JS按顺序注入"js": ["/js/content_script.js"],// "css": ["css/custom.css"],// 代码注入的时间&＃xff0c;可选值&＃xff1a; "document_start", "document_end", or "document_idle"&＃xff0c;// document_idle表示页面空闲时&＃xff0c;为默认值"run_at": "document_start"}],// 定义了扩展需要向 Chrome 申请的权限&＃xff0c;比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡&＃xff08;tabs&＃xff09;// 获取当前活动选项卡&＃xff08;activeTab&＃xff09;、浏览器通知&＃xff08;notifications&＃xff09;、存储&＃xff08;storage&＃xff09;等&＃xff0c;可以根据需要添加。"permissions": ["tabs"]
}

popup.html 和 css 制作插件弹窗

popup.html&＃xff1a;


允许复制Code&＃xff1a;


弹窗样式文件style.css&＃xff1a;

body {width: 160px;height: 24px;background-color: lavender;display: flex;justify-content: center;align-items: center;
}/* Switch开关样式 */
input[type&＃61;&＃39;checkbox&＃39;].switch {outline: none;appearance: none;-webkit-appearance: none;-moz-appearance: none;position: relative;width: 40px;height: 20px;background: #ccc;border-radius: 10px;transition: border-color 0.3s, background-color 0.3s;
}input[type&＃61;&＃39;checkbox&＃39;].switch::after {content: &＃39;&＃39;;display: inline-block;width: 1rem;height: 1rem;border-radius: 50%;background: #fff;box-shadow: 0, 0, 2px, #999;transition: 0.4s;top: 2px;position: absolute;left: 2px;
}input[type&＃61;&＃39;checkbox&＃39;].switch:checked {background: rgb(19, 206, 102);
}/* 当input[type&＃61;checkbox]被选中时&＃xff1a;伪元素显示下面样式 位置发生变化 */
input[type&＃61;&＃39;checkbox&＃39;].switch:checked::after {content: &＃39;&＃39;;position: absolute;left: 55%;top: 2px;
}

  以上代码将构建出如下插件弹窗 UI&＃xff1a;

popup.js 给弹窗添加交互

// 这里的js其实是操作popup.html产生的dom的
document.addEventListener(&＃39;DOMContentLoaded&＃39;, function () {// 获取开关按钮的初始值。这里{ type: &＃39;get_editable&＃39; }是可以随意定义的&＃xff0c;可以传递任何你想传递的信息sendMessageToContentScript({ type: &＃39;get_editable&＃39; }, (response) &＃61;> {toggle.checked &＃61; [&＃39;true&＃39;, true].includes(response) ? &＃39;checked&＃39; : null;});// 切换contentEditable状态toggle.addEventListener(&＃39;change&＃39;, () &＃61;> {sendMessageToContentScript({ type: &＃39;toggle&＃39; });});
});// 向content_scripts发送消息的函数
function sendMessageToContentScript(message, callback) {// 这里用到了tabs&＃xff0c;所以前面配置文件需要配置"permissions": ["tabs"]chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {chrome.tabs.sendMessage(tabs[0].id, message, (response) &＃61;> {if (callback) callback(response);});});
}

content_script.js 向页面注入 JS

// 所谓content-scripts&＃xff0c;其实就是Chrome插件中向页面注入脚本的一种形式&＃xff08;虽然名为script&＃xff0c;其实还可以包括css&＃xff09;&＃xff0c;
// 借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS&＃xff08;如果需要动态注入&＃xff0c;可以参考下文&＃xff09;&＃xff0c;
// 最常见的比如&＃xff1a;广告屏蔽、页面CSS定制&＃xff0c;等等。// 接收消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {// 数据处理和返回。是不是有点类似redux中reducer数据处理的感觉switch (request.type) {case &＃39;get_editable&＃39;:// 将当前文档是否可编辑的信息返回给popup&＃xff0c;控制开关的形态sendResponse(document.body.contentEditable);break;case &＃39;toggle&＃39;:// 切换可编辑状态document.body.contentEditable &＃61; ![true, &＃39;true&＃39;].includes(document.body.contentEditable);default:break;}
});

打包与发布

在插件管理页左上角有一个“打包扩展程序”的按钮&＃xff0c;点击就会出现如下界面&＃xff0c;选择要打包的文件夹进行打包即可&＃xff0c;你会得到一个.crx的压缩文件&＃xff0c;这个实际上就是你经常安装插件时安装的压缩包文件。

要发布到 Google 应用商店的话&＃xff0c;需要先支付 5 美元的注册费成为开发者&＃xff1a;Register as a Chrome Web Store Developer^[7]。

参考资料

[1]

独钓寒江雪: https://juejin.cn/post/7020571792884367373

扩展程序页面: https://chrome.google.com/webstore/category/extensions

Manifest file format: https://developer.chrome.com/docs/extensions/mv3/manifest/

Debugging extensions: https://developer.chrome.com/docs/extensions/mv3/tut_debugging/

前端装逼技巧 108 式&＃xff08;一&＃xff09;—— 打工人: https://juejin.cn/post/6996850474175430686#heading-3

这里: https://stackblitz.com/edit/browser-extension?

Register as a Chrome Web Store Developer: https://chrome.google.com/webstore/devconsole/register

How to Build & Publish a Chrome Extension in 13 Minutes?&＃x1f525;: https://www.youtube.com/watch?v&＃61;gtF2nHVjqFk

Chrome Apps, Plugins, Extensions: What’s the Difference?: https://www.maketecheasier.com/chrome-apps-plugins-extensions-differences/

【干货】Chrome 插件(扩展)开发全攻略: http://blog.haoji.me/chrome-plugin-develop.html

往期推荐解密初、中、高级程序员的进化之路&＃xff08;前端&＃xff09;程序员一定会有35岁危机吗&＃xff1f;近 20k Star的项目说不做就不做了&＃xff0c;但总结的内容值得借鉴但凡早知道这28个网站&＃xff0c;都不至于学得那么不扎实如果你觉得这篇内容对你挺有启发&＃xff0c;我想邀请你帮我三个小忙&＃xff1a;点个「在看」&＃xff0c;让更多的人也能看到这篇内容&＃xff08;喜欢不点在看&＃xff0c;都是耍流氓 -_-&＃xff09;
欢迎加我微信「huab119」拉你进技术群&＃xff0c;长期交流学习...
关注公众号「前端劝退师」&＃xff0c;持续为你推送精选好文&＃xff0c;也可以加我为好友&＃xff0c;随时聊骚。点个在看支持我吧&＃xff0c;转发就更好了如果觉得这篇文章还不错&＃xff0c;来个【转发、收藏、在看】三连吧&＃xff0c;让更多的人也看到~