chrome插件简介

chrome插件使用广泛，广告屏蔽、网页截图、记事清单等，都有应用。本文简要介绍chrome插件及其简单开发。

概念

Chrome扩展是压缩在一起的一组文件，包括HTML文件，CSS样式文件，Javascript脚本文件，图片等静态文件，以及manifest.json。

每个应用（扩展）都应该包含下面的文件：

• 一个manifest文件
• 一个或多个html文件
• 可选的一个或多个javascript文件
• 可选的需要的其他文件，例如图片

在开发扩展时，需要把这些文件都放到同一个目录下。发布扩展时，这个目录全部打包到一个扩展名是.crx的压缩文件中。

功能

• 捕捉网页的内容、HTTP报文、用户浏览动作
• 改变浏览器地址栏/起始页/书签/Tab等界面元素
• 与别的站点通信，修改网页内容……

扩展展示形式

每个扩展最多可以有一个browser action或page action。

Browser Action

扩展图标显示在Chrome工具栏。

![扩展图标显示在Chrome工具栏](https://img-blog.youkuaiyun.com/20170528180812579?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFvd2VuYmVp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

Page Action

扩展图标显示在地址栏右侧；
调用show()或hide()函数可以显示或隐藏page action，默认隐藏；
当扩展图标的展示取决于当个页面时，选择page action。

![这里写图片描述](https://img-blog.youkuaiyun.com/20170528180847957?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFvd2VuYmVp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

背景页

背景页是一个运行在扩展进程中的HTML页面，在扩展的整个生命周期都存在，常常用来管理一些任务或者状态。

• 一般只需要js文件，扩展启动时自动生成包含所有js文件的背景页。

• 可使用脚本调用在一个扩展的多个页面间通讯

  • chrome.extension.getViews() 返回扩展的每个活动页面；
  • chrome.extension.getBackgroundPage() 返回背景页。

调试（Chrome开发者工具）

• Elements —— 分析DOM
• Sources —— 调试javascript
• Console —— Log的输出窗口

数据保存

• HTML5的localStorage
  
  • 设置简单的数据；
  • 使用localStorage.namespage的方法引用和写入数据。
• Chrome提供的存储API
  
  • 用户数据可以以对象的类型保存；
  • 异步调用Chrome的API，结果需要使用回调函数接收；
  • 读写速度比localStorage更快；
  • content_scripts可以直接读取数据，而不必通过background页面。
• Web SQL Database
  
  • 数据量庞大的应用。

参考

• 《Chrome扩展及应用开发》，李喆，人民邮电出版社