Chrome扩展,应用开发学习笔记之1---从简单的时钟入手
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拓展。后面我们会了解很多其它一点。
參考资料：
