chrome扩展(插件)开发（一）基础知识概述

chrome扩展是运行在google浏览器小型软件程序，它常驻浏览器中，浏览器启动的时候，它也跟随启动。它能对一个或者多个域名网页，甚至浏览器本身起到辅助作用
注意这里很容易将扩展和插件混为一谈，chrome插件往往涉及浏览器底层功能，比如Flash 插件、PDF插件等。

技术背景

开发一个chrome扩展，您只需要具有html, css, js的基础知识就可以了

chrome 扩展的基本构成

如上图所示，chrome扩展主要由三部分组成

1. popup 扩展操作界面
2. background 扩展运行的环境
3. content_scripts 扩展注入网页的运行脚本

还有一种由扩展使用js语法动态生成js文件，他能被注入到指定的网页中，虽然不属于扩展，但比较重要。

三部分原理如下

popup

在用户点击扩展程序图标时（下图中的红色方框），都可以设置弹出一个页面。而这个页面就是pop页面，它是一个正常的网页，能运行js，能进行正常的dom操作。
popup页面的生命周期简单理解是

• 点击扩展图标弹出popup 这时候是创建popup
• 再次点击扩展图标或者其他地方，popup消失，这时候popup销毁
  

background

background是扩展的运行环境，扩展启动后它常驻后台，不会被销毁。与popup页面隔离，也与当前浏览网页无关。
他可以是一个js文件 通常命名 background.js，也可以是html + js的组合
可以从扩展管理页面打开某一个background 如下

从属关系

content_scripts

是扩展注入到Web页面的JS文件，可以是多个，也可以对注入条件进行设置，也就是满足什么条件，才会将这些js文件注入到当前web页面中。
可以把这些注入的js 文件和网页的个文件看成一个整体，相当于在你网页中，写入了这些js 代码。这样就可以对原来的web页面进行操作了。
值得注意的是 content_scripts 所注入到web里面的js文件和原web网页的js只能共享部分window对象，浏览器做了隔离
content_script注入的js文件无法修改原web页面js所有的值，也不能调用方法。

小结

这里我们需要熟知chrome扩展的运行原理、生命周期、基本构成这三块，整体架构明白了，后续就只剩下搭积木调用api了