初探Chrome插件开发

背景

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

运行原理介绍

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

架构：

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

代码结构

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

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

popup.html   ：chrome插件视图

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

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

Background，Popup，Content Script联系如下：

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

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

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

总结

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