初步认识Chrome扩展与应用
区别：
扩展：
用于对浏览器功能的增强，强调与浏览器的结合。
应用：
- 可以不打开浏览器而运行这些程序。
- 可以调用更加底层的系统接口（串口，USB，本地文件读写）
- 可以拥有更加自由的独立窗口，而chrome扩展的界面只能限定在浏览器窗口中
Chrome扩展：一系列文件的集合，包括HTML文件，CSS 样式文件，JavaScript脚本文件，图片，以及manifest.json。（NPAPI 因为安全的缺陷已经被逐渐淘汰了）
manifest.json:
扩展被安装后，就会读取manifest,json文件，这个文件的内容是按照一定的格式描述扩展的相关信息，如 扩展名称，版本，更新地址，请求的权限，扩展的UI界面入口等等。
Chrome扩展只需要一个Chrome浏览器就可以运行！
Chrome扩展在处理逻辑运算和实现程序功能时所采用的编程语言必然只能是JavaScript.
Chrome扩展的启动入口可以在浏览器的工具栏和地址栏中，用户单击后激活扩展进行下一步操作，也可以没有图标，直接后台运行。
写一个扩展的常用步骤：
- 创建一个文件夹，命名为可以看出其功能的名称
- 新建一个manifest.json文件，定义name(扩展名),version（扩展的版本），description(扩展的描述)，icons(扩展相关图标文件的位置)，browser_action:
- browser_icon:定义相关图标文件的位置
- browser_title:当用户鼠标悬停于扩展图标上所显示的文字
- browser_popup:定义了当用户单击扩展图标时所显示页面的文件位置(.html)
- 编写xxxxx.html（Chrome不允许将JavaScript代码段直接内嵌入HTML文档，所以要单独写js文件）
- 编写xxxxx.js文件
- 打开chrome,在地址栏中输入chrome://extentions,把写好的扩展加到浏览器中。
manifest.json
JSON是JavaScript Object Notation的缩写，这是一种基于JavaScript语言的轻量级数据交换格式。由于JSON储存的数据冗余度比XML更低，而且便于读取，所以也被很多其他语言所支持，现在JSON已经成为一种跨平台跨语言的通用数据交换格式。
下面，看一个例子：
{
"name" : "Harry Potter",
"author" : {
"name" : "J.K.Rowling",
"birth" : 1964
},
"books" : [
"Harry Potter and the Philosopher's Stone",
"Harry Potter and the Chamber of Secrets",
"Harry Potter and the Prisoner of Azkaban",
"Harry Potter and the Goblet of Fire",
"Harry Potter and the Order of the Phoenix",
"Harry Potter and the Half-Blood Prince",
"Harry Potter and the Deathly Hallows"
]
}
以上例子展示了两种结构，分别是key:value对的形式和值的有序集合。
key:value对：名称和值之间用 “：”连接。多个key:value对之间用逗号隔开，最后在整个对象的两侧加上 { 和 }。
值的有序集合：值与值之间用逗号连接，最后在整个数组两侧加上“[”和“]”。
Chrome扩展的Manifest必须包含name、version和manifest_version属性，目前来说manifest_version属性值只能为数字2。name就是名称，而version则是版本号。
下面来看看书上例子给的时钟extentions.
首先看看html文件：
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
height: 100px;
}
div {
line-height: 100px;
font-size: 42px;
text-align: center;
}
</style>
<!-- Line-height: 设置行高 -->
</head>
<body>
<div id="clock_div"></div>
<script src="js/my_clock.js"></script>
</body>
</html>
首先我们要知道这个是不够齐全的，但是chrome足以认识它了。
<style>标签表明这个里面是CSS.
*｛
margin: 0;
padding: 0;
｝
‘*’ 这东西叫“通配符”用来匹配页面上所有元素。
而这儿的目的就是全部样式的外边距和内边距都为0， 也就是写CSS之前把所有浏览器的默认样式统一。
主要意义是为了兼容不同的浏览器，消除浏览器的默认值。
body {
width: 200px;
height: 100px;
}
设置高度和宽度。宽度：两百像素，高度一百像素。
div {
line-height: 100px;
font-size: 42px;
text-align: center;
}
设置行高，字体大小，并规定居中。
<div id="clock_div"></div>
给该元素分配了一个名为clock_div的Id,这样可以更加方便地被JavaScript和CSS的选择器定位到。
<script src="js/my_clock.js"></script>
<script>标签：表明要调用js文件，src属性：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);
s=s>=10?s:('0'+s);
el.innerHTML = h+":"+m+":"+s;
setTimeout(function(){my_clock(el)}, 1000);
}
var clock_div = document.getElementById('clock_div');
my_clock(clock_div);
定义一个名为my_clock的函数，有一个参数传入。
m=m>=10?m:('0'+m);
s=s>=10?s:('0'+s);
如果分钟和秒钟数是个位数，就在前面添上一个‘0’，比如21：5：3就将被写成21：05：03；
setTimeout(function(){my_clock(el)}, 1000);
1000毫秒后再次调用自身，起一个刷新作用。
setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。，这里就属于code自身调用setTimeout()的情况。
