初探Chrome插件开发

背景

最近公司某些业务需求上需要使用到Chrome插件开发相关技术。在此背景下,把chrome插件开发入了个门。为了梳理自己的体系结构,就有了这篇博客。希望对大家有帮助。

运行原理介绍

在分享之前先对chrome插件的工作和实现原理有整体把握。

架构:
image.png

chrome插件文件分成两部分:1.Chrome Extemsion scripts:Backgroud与Popup只有一份。2.page dom scripts:会注入到每个Tab页(chrome选项卡)中去,注入的操作是可以选择的,后面会讲到配置规则。

代码结构

       image.png

上图是一个chrome插件的代码结构,可能与网上其他的chrome插件代码结构不同。但都大同小异。下面来讲解该项目中的文件含义:

manifest.json:整个chrome插件的配置文件。

popup.html   :chrome插件视图

backgroud.js : 架构图中的Backgroud,相当该chrome插件的后台调度器。只要该chrome插件打开,就一直运行在后台(后台常驻线程)。

content.js      : 架构图中的Content,对前台Dom有完整的访问权限。介于chrome与页面之间。可以与background进行通信。

Background,Popup,Content Script联系如下:

image.png

Popup文件Background通过时间监听机制来实现消息通信。Content Script和Popup,Background通信是通过message。

下面来看下manifest.json文件配置选项


image.png

manifest.json把所有的文件都放在一起了。有没有发现只要掌握了一门JS框架开发chrome插件就很简单,只要将该框架的源码注入。

总结

东西看似有点多,但是掌握核心原理再配合搜索引擎,应该没什么很大的问题。下周打算写一个chrome插件用户抓取漫画网站,之后再与大家分享细节。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容