chrome

前段时间公司有个小研发项目，需要做一个扩展，监控用户浏览器的行为，保存一些有价值的页面，用户可以设置监控的内容，断定chrome。由于这个项目是以调研为中心，给的时间比较宽松，本人花了一周的时间了解chrome扩展的一些知识，项目第一版也交付了，现在做一个总结。

总体下来，开发扩展和我们之前做的前后台应用大同小异，以前是后端存储数据，处理数据，将处理后的结果传到前端，前端将数据渲染展示给用户，前端只负责渲染展示，基本上不处理业务逻辑以及一些存储的事情，前后端分离。随着前端的发展，很多后端的事情也可以放到前端来做了，比如存储，html5里的localStorage，webdb。其中localStorage貌似只能存键值对，数据结构支持比较单一。

扩展的开发和平时应用的开发差别在在于扩展不需要一个后台服务器支持，依靠浏览器自身即可，只需要定义好一份清单文件，就可以像平常那样开发了。逻辑层面使用javascript，显示层面可以用html，css。

扩展清单

扩展开发的第一步就是建立一个manifest.json清单文件，这个文件可以告诉Chrome关于这个扩展的相关信息，它是整个扩展的入口，也是Chrome扩展必不可少的部分。文件内容是json数据，接下来对清单文件做个大概梳理

https://developer.chrome.com/extensions/manifest 官网清单

必须属性

manifest_version 用整数表示manifest文件自身格式的版本号。从Chrome 18开始，开发者应该（不是必须，但是2012年底左右就必须了）指定版本号为2（没有引号）

version 扩展的版本用一个到4个数字来表示，中间用点隔开。这些数字有些规则：必须在0到65535之间，非零数字不能0开头，比如，99999和032是不合法的

name 用来标识扩展的简短纯文本。这个文字将出现在安装对话框，扩展管理界面

推荐属性

description 描述扩种的一段字符串（不能是html或者其他格式，不能超过132个字符）

icons 一个或者多个图标来表示扩展，app，和皮肤。你通常可以提供一个128x128的图标，这个图标将在webstore安装时候使用。扩展需要一个48x48的图标，扩展管理页面需要这个图标。同时，你还可以提供给一个16x16的图标作为扩页面的fa网页图标 。这个16x16的图标，还将显示在实验性的扩展infobar特性上

default_locale 指定这个扩展保的缺省字符串的子目录：_lcoales。如果扩展有_locales目录，这个字段是必须的。如果没有_locales目录，这个字段是必须不存在的

多选一

browser_action 用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展，一个browser action图标还可以有tooltip、badge和popup

page_action 使用page actions把图标放置到地址栏里。page actions定义需要处理的页面的事件，但是它们不是适用于所有页面的

根据需要提供

background 背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态

content_scripts Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息

options_page 为了让用户设定你的扩展功能，你可能需要提供一个选项页。如果你提供了选项页，在扩展管理页面 chrome://extensions上会提供一个链接。点击选项链接就可以打开你的选项页

permissions 扩展或app将使用的一组权限。每个权限是一列已知字符串列表中的一个，如geolocatioin或者一个匹配模式，来指定可以访问的一个或者多个主机。权限可以帮助限定危险，如果你的扩展或者app被攻击。一些权限在安装之前，会告知用户

以上基本能满足8,90%的需求了，浏览器扩展要么监控我们浏览的页面，要么向我们推送数据。如果监控页面，可以使用背景页以及内容脚本，往监控的页面注入脚本，取到想要的数据传到背景页，背景页做处理，存储本地（localstorage或webdb）或是提交特定服务器，可以配合上选项页面来定制功能。如果推送数据，可以使用浏览器选项或是页面选项配合背景页pop推送的页面

扩展中的存储

扩展开发中难免会用到存储，我们有四种方式存储数据，参考

1. 存在后端服务器，每次后台请求，然后保存到变量中
2. localstorage，使用html5中的localstorage，将数据存在本地，这种方式类似memcache，只支持键值对形式的单一结构，基于域名
3. chrome提供的存储api，支持对象存储，可以直接读取，没有域名限制
4. webdb

附上相关地址，以供学习

中文 官网