网站首页 > 技术文章正文

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

ins518 2024-12-07 13:14:12 技术文章 33 ℃ 0 评论

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

3月13日，我们邀请到腾讯TVP，日行一课联合创始人兼 CTO李艺老师，让他来讲讲，如何开发一款实现自动关点评收的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关注人数等方法来实现上面我们所说的这些功能。

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

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

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

下期预告：Kubernetes实战！

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