龙空技术网

实战教程:一小时教你开发Chrome插件

开课吧官方 571

前言:

今天你们对“cookiejs插件”大体比较关怀,兄弟们都需要剖析一些“cookiejs插件”的相关资讯。那么小编在网上收集了一些有关“cookiejs插件””的相关内容,希望你们能喜欢,我们一起来了解一下吧!

我们在使用浏览器的过程中,免不了要用到各种类型的插件,比如要管理你的网站密码,屏蔽页面广告等,正是因为浏览器插件有如此广泛的应用,对于一个Web前端开发工程师来说,掌握Chrome浏览器开发更是必不可少的技能。

3月13日,我们邀请到腾讯TVP,日行一课联合创始人兼 CTO李艺老师,让他来讲讲,如何开发一款实现自动关点评收的Chrome插件,也就是说通过一个小小的Chrome插件在页面来实现自动关注、点赞、评论的功能。

Chrome浏览器插件工作机制

在实战之前,李艺老师先讲解了浏览器的工作机制,我们来看看是如何通过background、Popup、content script、Injected script这四个文件来实现整个点赞、关注、评论的功能的。

background是我们的后台脚本页面,在演示中,我们所看到的下面这个弹窗所打印出的信息所指向的就是这个background文件,它是在浏览器主线程内执行的程序,项目中所有的页面后台都有个background这个程序在运行

Popup是个JS脚本,主要实现下图中选择功能开始操作这个弹窗,在这个文件中我们定义个这个弹窗的的功能和样式

content script是内容脚本,通过这个脚本,我们可以在浏览器页面中实现所要注入脚本和样式,但content script只能共享页面本身存在的DOM节点,页面的JS变量是访问不到的。

与content script脚本相比,Injected script不仅可以访问页面的DOM节点,也可以访问页面的JS变量和方法

代码逻辑讲解

搞清楚了浏览器的工作机制后,李艺老师通过拉新和主动关注新粉两个功能来展开,通过代码逻辑讲解来向学员们展示,如何通过首页拉新,拉取db关注人数等方法来实现上面我们所说的这些功能。

现场手撕代码

代码逻辑讲解完毕后,李艺老师通过现场手撕代码来完成了学员现场提出新的需求,如何通过浏览器插件关注新粉丝,并保存到数据库中。

最后,我们来看下,在本地运行整个项目所需要的软件工具

Install MySQL & workbenchInstall Golang,设置代理Download code & 修改昵称debug.sh,启动后端程序在浏览器中安装插件

更多《Hello,World》免费公开课内容,请xv搜索【开课吧订阅号】获得

下期预告:Kubernetes实战!

你的点赞与关注 是小编坚持的动力。

标签: #cookiejs插件 #chrome插件开发