同学们可以私信我加入学习群!
正文开始
- 前言
- 一、插件与普通前端项目
- 二、开发插件——manifest.json
- 三、插件使用
- edge浏览器中使用/加载插件
- chrome浏览器中使用/加载插件
- 总结
前言
chrome插件的出现,初衷可能是为了方便用户更好地控制浏览器,只是经过漫长的发展,如今已经出现各种骚操作与黑科技。
有了插件,可以说人操作浏览器的动作,都可以通过代码来自动化实现。
比如大学那些无聊的网课,可以通过插件来刷新页面;某些网站无聊的问答,可以通过插件+AI的方式自动回复;某些网站的自动签到,可以通过插件自动打开页面+签到;浏览器屏蔽广告……本系列所有工具,都可通过博主的个人主页:https://lizetoolbox.top:8080/#/qrCode_contact来获取。
具体能实现什么,需要同学们自行探索,说的太多,我就从一个分享者,变成可刑之路的引领人。
其实很多同学的基础知识扎实,上手插件开发可能只需要十分钟,但是因为缺乏这方面的了解,而感觉它很神秘。类似的还有爬虫、各类脚本……心疼那些花钱学这些的同学一秒钟。
一、插件与普通前端项目
学习插件开发前,我们先看一下普通的前端项目,以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的代码如下:
其中
<script type="module" crossorigin src="/assets/index-BywMMX96.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-sDuVFabf.css">
就是在引入assets中的js和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浏览器的操作,加载插件即可。
总结
大家如果需要联系博主,或者获取博主各系列文章对应的资源,可以通过中二少年学编程的个人主页来获取。
浏览器插件功能会形成一个系列,后续会有各类浏览器插件免费提供给大家使用,有定制需求的小伙伴可以私信博主,反正免费的,来薅一波羊毛吧!