一文学会浏览器插件（加入光荣的进化吧）（一文晋级璀璨钻石）（本文不含知识诅咒）
都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浏览器），打开开发人员模式，加载解压缩的扩展，选择你的插件目录，点击选择文件夹，导入成功。
听说点赞的人都找到了满意的工作（在评论区打出你的愿望，本文会帮你实现）
参考教程：
