Chrome扩展,应用开发学习笔记之1
从简单的时钟入手
Chrome的简介：
Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
Chrome扩展：
扩展嘛，顾名思义，就是增加chrome的功能，让它更好的为人民服务。至于具体加什么功能，就看个人的需求爱好了。与扩展相对应的另外一个名词是应用，它们的区别简单的说，拓展更趋向于浏览器功能的增强，而应用更像是一个独立的程序。但这里的区别不是重点。Chrome扩展是一系列文件的集合，这些文件包括HTML文件、CSS样式文件、JavaScript脚本文件、图片等静态文件以及manifest.json。所以，再学习Chrome扩展之前，对于html，css和Javascript得有一定的了解。而manifest.json这个文件，就像是一个配置文件，告诉chrome浏览器这个扩展的一些信息，这样chrome才知道如何展示和运行这个拓展。
从简单的时钟入手：
下面我们来编写一个显示时间的拓展程序，希望从这个实例中，对于chrome拓展有一个更好的认识。先看看这个拓展的效果，如下图:
从图中我们可以猜到，其功能就是点击时钟图标，显示时间。
先新建一个文件夹，取名“simple_clock”（这个名字随意可以）。然后在文件夹中新建一个menifest.json的文件
下面看一下menifest.json文件的内容。
{
"manifest_version": 2, //manifest的版本，这里现在填2就好了
"name": "简单的时钟", //扩展的名字是“简单地时钟”
"version": "1.0", // 扩展到当前版本为1.0，这里由你自己控制，以后升级的时候，要比当前版本高就好了。
"description": "我的第一个Chrome扩展", // 对于这个拓展的描述
"icons": { // 定义了一些图标文件，放在images文件夹下，每个图标的名称和像素需要对应。
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": { // browser_action指定扩展的图标放在Chrome的工具栏中
"default_icon": { // 定义了在工具栏中显示的图标
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "我的时钟", // 当鼠标放在拓展图标上的时候显示的描述
"default_popup": "popup.html" // 当点击图标时，展示的html页面。
}
}
具体的内容备注都在上面了。从上面的内容上看，可以看出，在simple_clock文件夹中，有一个popup.html文件，还有images文件夹，里面放了一些对应的图片。(这些图片，可以看下面，现在暂时假定images文件夹和里面的图片已经具备了)
下面看一下popup.html文件的内容。
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
height: 100px;
}
div {
line-height: 100px;
font-size: 42px;
text-align: center;
}
</style>
</head>
<body>
<div id="clock_div"></div>
<script src="js/clock.js"></script>
</body>
</html>
关于这部分内容，我就不详细说了，就是一个html文件，内部定义了一些样式，然后，链接了一个外部的js文件夹下的clock.js文件。来看一下这个文件的内容。
function my_clock(el){
var today=new Date(); // 获取当前的日期
var h=today.getHours(); // 获取 时
var m=today.getMinutes(); // 获取 分
var s=today.getSeconds(); // 获取 秒
m=m>=10?m:('0'+m); // 输出格式，小于10的时候，前面补0
s=s>=10?s:('0'+s); //同上
el.innerHTML = h+":"+m+":"+s; //将当前时间显示出来，innerHTML就是改变html文件的内容。
setTimeout(function(){my_clock(el)}, 1000); // 这里用了一个递归循环，每隔一秒执行一次。注意这个循环是无限循环。
}
var clock_div = document.getElementById('clock_div');
my_clock(clock_div);
好了，这个时钟拓展的内容介绍完毕，完整的代码可以从这里获取。https://github.com/ZHONGHuanGit/Chrome_extensions_example/tree/master/Simple_Clock
通过设置：
选择扩展程序，选择加载正在开发的chrome扩展程序。
然后选中我们一开始创建的文件夹simple_clock,然后就可以在右上角看到一个小时钟了，点击它，就可以看到成果。
好了，我们现在了解了一个简单地chrome拓展。后面我们会了解更多一点。
参考资料：
Chrome扩展及应用开发 （PS：很欣赏该作者的人格，不仅书籍共享，并且将所有捐款奉献给壹基金。献上购买电子版的地址：http://www.ituring.com.cn/book/1472）