同学们可以私信我加入学习群！
前言
chrome插件的出现，初衷可能是为了方便用户更好地控制浏览器，只是经过漫长的发展，如今已经出现各种骚操作与黑科技。
有了插件，可以说人操作浏览器的动作，都可以通过代码来自动化实现。
比如大学那些无聊的网课，可以通过插件来刷新页面；某些网站无聊的问答，可以通过插件+AI的方式自动回复；某些网站的自动签到，可以通过插件自动打开页面+签到……
具体能实现什么，需要同学们自行探索，说的太多，我就从一个分享者，变成可刑之路的引领人。
其实很多同学的基础知识扎实，上手插件开发可能只需要十分钟，但是因为缺乏这方面的了解，而感觉它很神秘。类似的还有爬虫、各类脚本……心疼那些花钱学这些的同学一秒钟。
一、插件与普通前端项目
学习插件开发前，我们先看一下普通的前端项目，以vue为例，最终打包后的目录是什么样的：
dist就是打包后的目录，对前端有所了解的同学都知道，把dist部署到Nginx或者tomcat中，就可以作为一个web站点运行了。
它里面有assets、img、favicon.ico、index.html四个部分。其中img文件夹、favicon.ico都是和我业务相关的文件，如果你是最干净的vue项目，不一定有这些文件，所以每个同学都会遇到，真正基础的文件只有两个：
- assets
- index.html
有HTML基础的同学看到这里就会感觉很熟悉了，这不就是一个最简单的html页面吗，html文件只有一个：index.html，所有的js、css文件都放在assets中，html中通过标签，写入js和css，index的代码如下：
从上面代码中，摘抄出以下代码，它的作用就是引入assets中的js和css：
<script type="module" crossorigin src="/assets/index-BywMMX96.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-sDuVFabf.css">
上面就是一个最简单的vue项目打包编译后的代码结构。不管你是通过什么方式开发前端，最终得到的都是类似关系的HTML、css、js文件，这三类文件组成了前端的基础。
可能有同学会有疑惑，文章不是要讲解chrome插件吗，为什么花这么大篇幅介绍前端？
因为chrome插件就是99%的前端+1%的配置，简而言之就是，chrome插件就是在一个完整的前端项目中，写入一个描述chrome插件的配置文件。最终的文件结构如下：
对比普通前端的文件结构，我们就会发现，上面的图片和普通前端项目，最重要的不同就是多了个manifest.json。
二、开发插件——manifest.json
既然我们已经知道关键文件就是manifest.json，那我们研究一下这个文件，基本就学会了chrome插件开发的大部分知识，文件内的代码如下：
{
"manifest_version": 2,
"name": "中二少年工具箱",
"version": "1.0",
"description": "中二少年学编程开发的工具箱，微信公众号【前端系列教程】，微信小程序【中二少年工具箱】，csdn/掘金/知乎【中二少年学编程】",
"browser_action": {
"default_icon": {
"132": "log.ico"
},
"default_title": "中二少年学编程",
"default_popup": "index.html"
},
"permissions": [
"storage",
"tabs"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
上面是我开发的插件配置，大部分配置，相信大家看示例就能猜到用途。这里简单讲解其中比较重要的几个：
- manifest_version ：扩展的清单版本号，一般是一个整数，按照开发其它软件的经验，这个应该会在自动升级时被获取，我的插件一般都是离线版并未上架商城，所以我对这个没有深入研究。
- name:插件名称
- description：对插件的描述
- default_icon：插件的图标，这个注意路径，如果没有特殊情况，最好就放在根目录下，和index.html同级
- default_title:插件在浏览器中显示的名称。
- permissions：插件的权限，按我上面配置，就是指插件可以操作浏览器的缓存和标签页。
- content_security_policy：插件的安全策略，类比于普通前端项目设置在index.html页面的meta标签，这里有没有效果其实我还没有测试。
上面就是插件配置的所有内容，只要大家在自己index.html页面同级目录，放入上面的配置文件，那么就可以把我们的前端项目，变成一个插件了。
三、插件使用
以谷歌和edge浏览器为例，其它浏览器插件使用和开发，请自行探索。
edge浏览器中使用/加载插件
edge浏览器的扩展通过打开浏览器右上角的设置对话框，就可以快速找到：
当然，也可以直接在浏览器的地址栏输入地址：edge://extensions/
最终打开的页面如下：
可以看出，上面的只显示了我们浏览器中存在的插件，但是没有添加插件的入口。这时候打开左侧开发人员模式，打开后，页面就会出现“加载插件”按钮：
点击加载解压缩的扩展，选择我们刚才的dist文件夹：
最终在扩展列表，会出现我们的插件：
直接在当前页面，就可以看到扩展对话框中存在我们的插件了：
chrome浏览器中使用/加载插件
chrome浏览器与edge浏览器的内核都是chrome内核，所以插件完全兼容，加载、使用方式也大同小异。
打开扩展程序：
或者在地址栏输入：chrome://extensions/
打开后的页面，类似于edge浏览器：
只要打开右上角的开发者模式，就会出现对应的加载插件按钮。
然后参考上面edge浏览器的操作，加载插件即可。
总结
浏览器插件功能会形成一个系列，后续会有各类浏览器插件免费提供给大家使用，有定制需求的小伙伴可以私信博主，反正免费的，来薅一波羊毛吧！
获取资源，查看代码示例，或者联系我：
