Chrome扩展-从入门到实践系列之一
导语：
本系列计划记录一个Web开发新手利用小组及网络资料，结合实际项目学习chrome扩展开发的历程，因为初次接触，且多处为个人理解，如有不妥请指正。(初识chrome扩展：《如何编写一个Chrome扩展》读后感)
Chrome扩展个人理解
对用户，简单来说Chrome扩展就是一些能够修改或增强Chrome浏览器功能的小程序，从开发者的角度就是一个精简的网站，内容展现仍是以Html,Css为主，Js提供对页面DOM的动态操作；所特别的是:1,由于chrome基于谷歌的V8引擎，所以Js的功能被增强;2,chrome浏览器本身提供特别API（如同.net的Framework）,根据chrome官方约定，可对扩展功能进行定义。
Chrome扩展官方文档
从这里可以看到Google提供的Chrome文档,包含一些基础指引、简介、示例和各种API,遗憾的是需要翻墙才可查看。
结合《如何编写一个Chrome扩展》中实例及词记项目需求的总览
资料链接
Chrome扩展基础文件结构
本文中涉及示例代码，均取自《如何编写一个Chrome扩展》中Clock的Demo。
![\"Chrome扩展架构图片\"](\"http://blog.qiji.tech/wp-content/uploads/2015/12/chrome扩展-结构-300x113.png\" "\\"Chrome扩展架构图片\\"")
- 配置文件：manifest.json
manifest.json是整个程序的入口，相当于系统配置文件，Chrome浏览器加载扩展程序的时候，会先寻找该文件。
其中定义了版本号,扩展名称，图标及Js等众多配置项，具体使用时，可复制如下参考模版进行修改：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ \"manifest_version\": 2, // manifest的版本 \"name\": \"Clock\", // 扩展的名称 \"author\": \"Wellaiyo\", \"version\": \"1.0\", // 扩展的版本号 \"description\": \"Chrome扩展小应用，时钟\", // 扩展的描述 \"icons\": { // 图标 \"16\": \"images/icon16.png\", \"48\": \"images/icon48.png\", \"128\": \"images/icon128.png\" }, \"browser_action\": { \"default_icon\": { // 扩展图标在工具栏中的位置 \"19\": \"images/icon19.png\", // 正常显示 \"38\": \"images/icon38.png\" // 视网膜屏幕下显示 }, \"default_title\": \"时钟\", // 鼠标移动到扩展图标上显示的文字 \"default_popup\": \"popup.html\" // 点击扩展图标显示的界面 } } |
-
页面显示：popup.html
Clock主页面，主内容为id为clock的DIV及相关布局。整个HTML采用标准HTML结构即可，title标签无需使用。 -
js文件夹：存放用户自定义js文件
Clock中时间的动态获取及赋值的js主文件。 -
images文件夹：存放图片
Clock多种大小图片，以便适配不同浏览器使用。
操作用户正在浏览的页面
目前的Clock的Demo中只有扩展页面显示，用户浏览页面操作未涉及，但词记项目基本的划词功能会使用到。
跨域请求
词记项目中需要与规划好的API进行交互，或直接将数据写入服务器，均需要跨域请求，跨域js函数为异步函数，此处知识点不太明确，后期查询资料后续补上。
后台监听
这个根据词记项目需求定。
数据存储
HTML5中5MB的写入限制，词记的规划主数据应该存储在远端服务器，一些基本信息可加密存储在本地。
开启选项
相当于网站后台，如用户需要对插件功能进行设定或定制，需要新增页面进行操作，并在主配置文件manifest.json中进行定义。
右键菜单
词记项目中用户需要用右键的功能菜单对选中的单词进行进一步操作，所以这个功能也必不可少。
桌面提醒
词记项目中可通过此功能定期提醒用户进行复习等操作。
> 后续系列会深入阅读参考文档《Chrome扩展及应用开发》,对上述问题进一步深入学习。