一文学会浏览器插件(加入光荣的进化吧)(一文晋级璀璨钻石)(本文不含知识诅咒)
都2023年了,你还不会开发浏览器插件?
注意:此教程针对chrome和chromium内核的浏览器制定的,且仅适用于前端开发者
在chrome地址栏输入chrome://extensions/,就进入了谷歌浏览器扩展程序控制面板,在这里可以装载一些插件,来扩展浏览器的功能,或者做一些自动化处理,由于众所周知的原因,国内是无法直接访问 谷歌应用商店 的,所以当你想用一个插件时,不得已要去国内的某些第三方网站查找,但是这些网站的插件要么不全,要么严重过时了,他们甚至还恬不知耻的让你关注公众号才能下载。
当你看到这篇文章的时候,一切都结束了,我们前端人不受他这个气。
打开edge浏览器,输入edge://extensions/,进入edge应用商店!
新版edge用的内核叫做chromium,它就是chrome的开源版,chromium的功能往往比chrome更加先进,且99%的兼容了chrome,也就是说,你可以把edge当成次世代的chrome浏览器!edge还支持微软账户登录、使用同步功能、网页一键翻译(必应翻译)!
特大好消息:使用edge可以获取微软积分!积分可以换英雄联盟点券、京东购物券、星巴克和沃尔玛的消费券!
你问我什么时候讲怎么开发插件?
我也不会,我只能告诉你一些简单的东西,相信聪明的你很快就能开发出一个属于自己的浏览器插件!
我为什么要开发浏览器插件?
比如你找到了一个非常棒的网站(不卡、没广告、还有你喜欢的各种口味),这指定不能让你女朋友知道!但是怎么才能不让你女朋友知道呢?删除历史记录是远远不够的!
如果你女朋友(一脸严肃的)不小心打开了你的神秘网站,却发现这只是一个 普通的学习网站 ,除了你不用写一千字的检讨外,你女朋友说不定还会因为怀疑你是个 LSP(全称分层服务提供程序) 而内疚。
快速完活!~
接下来的内容是描述内容,如果你想快速开始,请直接跳到下一小节,再回头来看。
浏览器插件大部分且主流的开发方式,就是 html、css、 js。不用怀疑,凭你的大专学历以及两年半(ji)的工作经验可以轻松开发一个功能完善的插件!
浏览器插件包括四个主要文件
- 与正常页面交互的js
- 插件后台运行的js
- 图标.png
- manifest.json
一个次要文件:
- 弹出窗口.html (这个文件可以引入更多 js)
上述文件中,每个文件都不是必须的,必须的文件只有一个,就是 manifest.json
manifest.json
这个文件简单来说,就像 npm 标准项目中的 package.json
它描述了:
- 应用名
- 开发者名(还可以包含联系方式)
- 图标位置(图标是png格式而非ico格式)
- 交互.js路径
- 后台.js路径
- 所需权限(比如获取cookies就需要在文件中声明)
- 生效范围(可以让插件在特定网页生效)
- manifest_version 这是一个必填项,目前主流为版本为2,但是在2023年将被废弃,推荐使用 3(直接写数字即可)
关于此文件详解 参见 chrome扩展:manifest.json文件详解
与正常页面交互的 js和插件后台运行的 js
这两个文件的运行环境是不互通的,交互js无法使用很多浏览器接口,后台却可以,如果想前后之间传递数据,要用 消息发送机制
下面是一个简单的实例:
//myscript.js (这是前面提到的交互js,可以和正常页面进行交互)
chrome.runtime.sendMessage({ url: url }, async (response) => {
console.log("cookie=", response);
});
//background.js (这是后台js,也就是插件的独立环境运行的js)
chrome.runtime.onMessage.addListener(
(request, sender, sendResponse) => {
//console.log(request);//这个输出是看不到的,没有用!
let cookie
chrome.cookies.getAll({
url: request.url
}, (cks) => {
sendResponse(cks);
});
return true;
});
相信上面的代码很好懂,我们在background调用了chrome.runtime.onMessage.addListener,添加了一个消息监听器,当myscript的消息发送(chrome.runtime.sendMessage)时,就触发了background的监听器,并执行其中的代码,当执行完成后,background.js可以通过sendResponse(即myscript中标有async的函数,它充当一个回调)把消息返回回去。
此时myscript将会打印出当前页的所有cookies,它可能是一个数组。
快快快快速完活!~
如果你不想看上面的长篇大论,还可以直接跟着本小节直接开始写代码!
快速搭建一个插件
必须要一个文件:
- manifest.json
可选文件:
-
myscript.js (前台交互脚本,这个文件的输出可以打印到控制台)
-
background.js (后台服务脚本,这个文件的运行是被隔离的,可以理解为静默运行)
-
logo.png (图标)
-
popup.html (点击插件图标时的弹窗)
下面是一个简单的manifest.json文件实例:
{
"manifest_version": 2, //推荐使用 3 ,因为 2 即将在 2023年停止支持
"name": "cookie获取工具",
"version": "1.0.1",
"description": "这是一个cookie获取工具",
"author": "Larry Zhu <LarryZhu@foxmail.com>", //日后惹出祸来,别把师傅说出来就行了
"icons": {
"16": "logo1.png",
"128": "logo1.png"
},
"background": {
"persistent": true, //是否常驻后台
"scripts": [
"background.js"
]
},
"content_scripts": [ //这是前台js配置
{
"matches": [
"https://mp.weixin.qq.com/cgi-bin/home?*" //生效范围,这个地址是微信公众平台
],
"js": [
"myscript.js"
],
"run_at": "document_end" //当dom加载完时,或者使用_start什么的,自己搜吧我忘了
}
],
"permissions": [ //权限列表,如果你使用过wxjssdk,你就很熟悉了,跟那个一个意思
"cookies", //获取cookie
"webRequest",//请求相关的权限
"<all_urls>", //生效范围,这个意思是全部
"tabs", // tab页相关的权限
]
}
稍微的解释:
- 该文件提到的文件都是相对路径 如 logo1.png 等同于 ./logo1.png、background.js等同于./background.js
- 参见 chrome扩展:manifest.json文件详解
- 如果你没有logo.png也可以不加
- 除了manifest_version、name、version外,你可以省略其他任何参数,也就是说,你可以创建一个完全没有任何功能的空插件,甚至这仨也能省略,我没试过,你可以试一下
下面是一个 前台js的简单实例:
//myscript.js
window.addEventListener("load", myMain, false);
function getCookies(url) {
chrome.runtime.sendMessage({ url: url }, async (response) => {
console.log("cookie=", response);
});
}
function myMain(evt) {
console.log("AutoLarry is Loaded");
getCookies(document.URL)
}
简单解释:chrome.xxx是调用浏览器提供的接口,包含默认的、已经刚刚在manifest中声明过的方法,注意:一些方法在前台js是没有的,比如 chrome.cookies.getAll
在这里,使用了chrome.runtime.sendMessage 向 后台js 发送了一条消息
下面是后台js的一个简单实例:
//background.js
chrome.runtime.onMessage.addListener(
(request, sender, sendResponse) => {
console.log(request);
let cookie
chrome.cookies.getAll({
url: request.url
}, (cks) => {
sendResponse(cks);
});
return true;
});
可以看到,后台js添加了一个消息监听器(有点类似与mqtt的消息机制),当前台调用chrome.runtime.sendMessage时,
chrome.runtime.onMessage.addListener中的函数就会触发,当函数中的代码执行完成后,还可以通过前台传来的回调函数(myscript.js中async(异步)前缀的那个就是传入的回调)把数据什么的返回给前台 sendResponse(cks)
此时 myscript.js中的 console.log("cookie=", response) 就会输出对应的值,对于我们这个程序来说,将会输出一个数组,数组内容是当前页的cookies。
导入
要导入自己开发的插件,在地址栏输入edge://extensions/(edge浏览器),打开开发人员模式,加载解压缩的扩展,选择你的插件目录,点击选择文件夹,导入成功。
听说点赞的人都找到了满意的工作(在评论区打出你的愿望,本文会帮你实现)
参考教程: