00:01
Hello, 大家好,我是fantastic啊,好久不见,今天给大家分享一个Chrome拓展开发的一个简单的基础啊,首先看一下这篇文章啊,最近学了一些前端的知识,就准备找一个方向去练练手,就看到了咱科目拓展是科目浏览器功能的一个小程序。相信很多人都有体验过,用户可以通过Chrome和to下载和安装啊,当然如果你网络条件受限的话,也可以有很多的离线安装的一个方式啊,这些扩展根据用户不同的需求,借助我们浏览器的提供的一些能力实现一些功能,比如说我们常用网络拦截,实时翻译啊,笔记整理这种啊,当然也有很多大佬开发的比较厉害的功能啊。我自己看到了这个。科目拓展的这种形式啊,觉得非常的适合练手,所以就学了一些,这是一个科目拓展的一些好处啊,我有一个初学者总结的。
01:00
这个我们操作非常的简单啊,在一个外部页面上,我们直接可以在页面上去做一些定制,像我们广告的拦截,比如说我们可以用右键直接把这些接到烦人的广告直接删除掉,也有一些在通过后台程序运行的这种方式去把定义好的一些拦截规则。或者说我们定义好的一些功能的规则呢,进行一个后台的一个处理,通过快捷键就更快啊,开发成本比较低,它功能目的功能稍微简单,基于可提供的一些开放的API去调用,整个工程来说呢,相对来说比较简单,只有几个定义的一个JS文件,稍微复杂一点,你可以写一些简单一些展示的页面啊,在这个地方一般我们。节简的页面的话都可以通过。现在A啊,看BT啊,Cloud的去做,然后特别是我比较喜欢cloud的,他就有一些前端页面可以实时预览,比如说我刚才我告诉他要写一个什么样的页面。
02:00
觉得这个UI不好,我可以把它往左摇一调一调,往右调一调,大概是这样啊,开发效率高啊,这一点呢,根据我自己的企业,我的需求基本上都是可以通过一些其他的插件去实现,但是可能插件每个人写的时候,他的一些想法的一些设计,然后有需求都不太一样,所以就是。呃,可能设计出来的东西,它功能有100个功能,可能我只用了其中的10个,大概是这样的,所以我在前期学习的时候,我就先去查了一下他们的源码,再根据他们源码的一个阅读和理解学习,把他们源码拿过来,就相当于给自己的一个插件做了一个功能啊,这就是啊,超标代码叫超超能力嘛,很多的小的插件,其实它的功能都是比较简单的,我这里举一个安度的例子,它的功能就是在。呃,用户的历史页面可以不用去,用户去操作快捷键,或者说点击去展开历史页面,它就可以一个弹框的形式。
03:03
去展示这个历史页面,用户就可以去。选择历史页面的某个信息打开,大概是这样。那首先啊,我们进入。正式的进入科目拓展的一个开发,首先我们需要准备一些基础的一些知识,呃,这里面的修首先就是HTML,这种不是必须的,如果你不写页面,那不是必须的,但是你即使不写页面去操作页面元素的话,这个也需要啊,CSS.Javascript这里面有个等这里面对于新手来说。如果你从来没写过前端的话,可能要学的东西会比较多啊,所以我这里面写了个等,呃,包括他API的调用啊,或者他同步异步的这种转换知识啊,可能都在慢慢的一些学习吧,包括介子里面的一些语法的规范这样。还比较配合the home v API的版本。我们就需要了解这个一些开发文档和它的开发规范,这个我建议大家去看最新的开发文档,因为我在网上搜的过程中发现了很多基于版本2的一个代码的实践特别多,而且权重比较高啊,所以我后期基本就放弃了搜索引擎,就直接跟。
04:15
在GPT对话生成代码,自己去改,实践看效果大概就是这样,如果实在是自己不太理解的,就去看官方文档啊,首先我们要定义一个manifest的一个Jason,这种Jason的话在科目拓展里面。呃,是一个放在目录的最外层的这么一个功能,一个配置文件,这个相当于前端代码里面来克几间的那种,差不太多吧,反正就它定义了一个基本的一些信息,这里面这个是使用它的版本,最近最新的版本是3,很多插件还基于2开发,现在应该是上星期谷歌就已经开始对这个2的插件进行了一个劝退,他就是说在你使用插件的时候,它会提示你这个插件可能将在某一个时际就被淘汰,然后你可以替换。
05:03
功能类似的,咱家他给你选出了一大堆,大概是这样的啊,这个版本名称啊,描述这个名称啊,这些信息,它还有一个就是你定义了这些关键信息之后,不要再改了,再改有可能会被识别成为一个新的插件。大家看呢,就是我们的一个图标啊,待会儿我给大家展示一下我自己的就可以了,咱们信就是我们这个插件所需要获取到的权限啊,这个权限比较多啊,大部分的那个权限说明大家都可以从官方文档找到,这个就是table的创建标签页,或者是删除关闭这些权限,这个按节就是我们的存储,这个存储有两部分吧,第一是本地存储,本地存储存在本地,它不是到云南同步,让你重新的加载,或者说是。重装覆当然是覆盖安装,这些数据都是可以保留的,我们后面会用到一些跟谷歌云同步的这种同步的存储,但是呃,存储它就可以存储一些非离线的东西的数据,当我们再去同一个谷歌账号,再去另外一个浏览器去登录的时候,它可以同步到本地存储,在卸载之后就会被删掉,所以这个也就不需要去,这个也就不需要再。
06:17
这里就多讲了,我一般都用的是本地存储,因为云端的话,可能目前自己还没有那么需求,我没有去跟跟用户信息的到云端同步的这种概念,我。大兔还是进行一个功能性的这个background,就是我们的后台运行的一个JS。这个K这两个case service worker都是一个谷歌定义好的,我们就不需要懂S我们的一些对于歌的一些可以说是事件或者说是动作的一些定义这个的啊,Pop up, 这个就是弹框啊,等会儿给大家可以演示一下啊,后面这个是啊,Content craft这个就是。当我们打开了页面某个页面,那其实就是我们的一个URL匹配,这里我写那个所有的啊,这个JS就是我们的JS的一个文件的全称啊,所以呢,这也是支持那SX。
07:10
然后这里面就是一些资源的话,这个就没必要再说了,这个就可以去观察官方文档,说大部分的教程写的也都是对的啊,这个是我刚才说的这些。那这个可网的资源呢,我目前没有用到这个,是自己在跟全媒体沟通的时候,他就说要把这个写上啊,目前。啊,就先这样吧,配置上具体分定义可被网页访问的资源,网页我们可以直接看到,能探测。既然是这种。啊,这个信息我们配置完之后,这里面提醒一点,就是我们一定要注意识别它的教程的版本,不然的话。它有些APS是不兼容的。那个常用的功能就是说PRO拓展在这浏览器的几种存在形式啊,它第一个就是pop的页面,Pop页面就是我们点击图标的时候弹出来的一个页面,这个页面通常我们可以做一个页面,或者说做一个列表,或者跳转或者别的都可以,这里面我这儿就展示了,就有一个比较简单的页面,这个就怕过完了之后。
08:15
还有他的icon icon这个单可以很多,他把icon单独放在英文件夹,什么手6话4812128这种,这是一个简单的号的页面,我们就可以。在这里面说一下这个科目的。呃,这种拓展的一个开发,它是不支持那个在这里面写那S的as的话,像这个相对来说比较简单,所以也就直接在这里面写了,如果是那啥的话,呃,有比较复杂的话,我们就可以在外部的DS,呃,CSS文件引用。在这里面就必须得引这个JS文件。而不是说在这个HTM文件里面去写JS代码。啊,这个是我查到一些资料,就是说它基于安全性的考虑,是不允许在这里面直接加载JS文件的,我们可以通过简单的script的标签这样。
09:06
这就是button,我们添加一个button的click事件的一个处理方法,这样呢,我们就在那个pop up up DS里面去添加,大概是这样可以,这就是我们。呃,添加一个事件的一个。简单的一个颜色,还有一个background JS background JS, 我们在拓展8件。拓展在运行的过程中,后台一直会运行的这个代码,我们看一下这个配置方法就是这样的,这是一个配置文件。第二展示一下啊,大家一定要注意这个这这这个地点啊,除了这个版本号二三之外,它的。它还有一个默认的一个属性的配置,在在3里面直接就有一个s rock, 它默认的就是一直在执行。这个里面会有一些。白格呢,它其实用来充当的一些功能和角色吧,就可以监听各种事件,进行消息的传递,浏览器事件监听,存储定时任务这种啊,定时任务和网络请求,这两个是我比较常用的,通常来说我们在假如说我们打开了一个网站。
10:09
我们在这个网站不管做什么操作,它都是基于这个网站的一些信息,如果我们想去啊,且TTP请求的话,那都涉及到一个跨域的问题,这样呢,我们就可以通过消息传递的方式,让我们的请求的这些信息啊,是通过background JS发出去的,这样我们就可以从background发出的ADP显求它的那个来源就是我们这个插件,所以我就直接只针对我们这个插件的。来源就做一个跨越的处理就可以了。那我们去看这些处理简单安装事件是,然后INS到加加一个类的啊去做一些,假如我们装完了啊,我们就弹框,或者说这是插件安装,就给用户弹一个使用说明啊,它自动的会弹到一个使用说明这样。一个消息传递就包含着发送消息和接收消息,这个是message send, 然后你就可以加把这个send response就。
11:08
在background JS和ten JS里面进行两个JS脚本之间进行交互,GS就是我们打开页面的时候才会运行的,Background就是我一直会运行的。然后这里面呢,我们升级的时候啊,谈一个什么东西,这是19存储第一一个啊,我们将一个KY6存到这里面第二行的代码你们可以。把这个给读出来。下面这个跟第一个是类似的,但是。它使用的是那谷歌的同步存储。这个地方有一点,我查到了一些资料,说这个。其实他并不是说你随便存,或者说直接存到一个什么谷歌driver什么东西的,我们好像是有一个说法,32K还是64K,但是一般是我们都会存这些文本信息,呃,也不会存太大,这里面有一个清空的一个方法啊,就是任务,这个我用的比较少,这种就是任务可能目前我还没有找到一个比较好的一个使用场景,这个是一个发送。
12:10
的请求的container craft.在打开某个网页之后,我们根据行的一个建设脚本。配置的方法是跟这个是一样的。假如说我们打开了一个页面,我们想在包子里面添加一个元素,我们就可以用,这样当我们到了之后,我们获取了一个de的,一个叫叫容器还是什么的。那我们这个设置了一下一些文本信息,就把这个放到一个body,当做一个子的元素进行一个处理,这样我们在body里面就可以看到这个DV,这是它的一个文本信息啊,这样一个东西啊,我们常看到的很多的广告屏蔽。或者说是对原来的页面进行一些处理,比如说一些网盘的下载。处理。还有就是。网页的一些UI的一些修改,很多都涉及到这个东西。
13:04
这里面其实全都是GS的一些语法,如果GS水平比较好的话,这肯定是不在话下的,呃,如果是,呃,当水平稍微跟我一样是个初学者的话,建议就直接把自己的功能和需求留给他PPT,然后把它把大致的代码写好之后我们再在本地进行调整。这些拓展里面的监测功能,这些就不再一一说了啊,这里面有一个比较,呃,我觉得在测试里面会用的比较多的就是我数据的一个注入啊,这种我们可能除了改变页面以外,还有数据的一个注入,还有请求的一个拦截和相应的一个修改,通常在我们前端Mo里面。有的时候我们去摸个后端的返回值,有的时候我们去摸个前端啊,这种的按钮下用的会有很多啊,当然这个也功能就更复杂了,右键菜单这个比较比较简单说明,通常一些浏览器的拓展都会在右键里面那一个菜单,比如说我常用的包括绝密插件,它就会在这里面弄一个菜单,屏蔽当前网络的当前页面的一些元素,在点击之后就会选,呃,在这里面我个人用的非常的多,一个原因就我其实有之前用的一个办公自动化的一个奥特曼的一个拓展,它的功能是什么呢?它的功能就是说。
14:20
有点类似于那个sliing的一个前端UI,就是有拖拽的形式去定义一些行为,比如说创建点击啊,拖拽啊,关闭,包括执行JS代码这样的话,比如说我们有一个。打卡签到的任务吧,每天打卡签到就是打开一些网页,点击某些元素,做一些可能上滑下拉这种停留10秒啊这种操作。就进行一个签到的一个机制,你就可以把这张代码去放到一个奥特曼它的一个脚本里面,因为它是拖拽来的嘛,拖拽来就相对来说是比较容易的,我就做了一些这样的,但是对于我来说,就每天打开一些网页,检查这些信息,有没有我需要我关注的啊信息啊,比如说邮箱啊。
15:07
你的工作的邮箱啊,工作的比如说是日日历这种文档,这种继续头一天的文档啊,这样,所以我这样在这里面我们就可以设置一些。右键,比如说右键第一个右键就是说我可以打开今天的待办事项,就打开他打开常用的信息检查网站啊,就打开了一堆,这个我是比较喜欢的,大概就花了他半个小时时间,我就把那个奥特曼给卸卸载掉了,因为我的需求是比较简单。这个科扩展的基础知识就分享到这里,我们下期再去讲这个实际我们如何在。呃,通过编码去实现我们的一些简单的一个需求,感谢各位,我们下期再见。
我来说两句