Chrome插件

喜欢Chrome，简洁的设计，强悍的内核只是一方面，应用商店里丰富的扩展和插件才是让我对Chrome爱不释手的根本原因。这些扩展增强了Chrome的使用体验，同时也提高了开发人员的效率，最近用了一个很方便的便签应用，可惜字体只支持英文，看着让人恼火的中文，索性决定自己写一个。一个扩展很容易实现，Chrome可以直接编译JS代码，需要界面时可添加html文件，方式与网页相差无几。
官方资源:
API文档
Samples
中文API

书籍:
Chrome扩展及应用开发。

Hello Chrome

效果

最后出来的效果是这样：

结构

manifest.json

每一个扩展、可安装的WebApp、皮肤，都有一个manifest.json，里面提供了重要的信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
	"manifest_version": 2,                        //默认值 2
	"name": "我的时钟",                          //扩展名
	"version": "1.0",                           //版本信息
	"description":"一个简单的Chrome时钟扩展",  //扩展描述
	"icons": {                                //扩展的图标
		"16": "images/icon16.png",
		"48": "images/icon48.png",
		"128": "images/icon128.png"
	},
	"browser_action": {                  //用于在chrome主工具条的地址栏右侧增加一个图标。
		"default_icon": {
			"19": "images/icon19.png",
			"38": "images/icon38.png"
		},
		"default_title": "我的时钟",      //鼠标悬在扩展图标上显示的信息
		"default_popup": "popup.html"     //默认的html文件
	}
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- popup.html -->
<html lang="en">
<head>
	<style type="text/css">
		*{
			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 type="text/javascript"src="js/my_clock.js"></script>
</body>
</html>

JS

因为Chrome不允许将javascript代码段直接内嵌入HTML文档，所以我们需要通过外部引入的方式引用JS文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);

打包

进入chrome://extensions/，右上角打开开发者模式
查看效果：选择已解压的扩展程序，选择写好的文件夹即可。
程序打包：选择打包扩展程序，选择写好的文件夹，打包后得到一个crx文件。

扩展推荐

livereload：可以与sublimeText通信，实时刷新页面。
pocket：标记没有读完或者将要阅读的网页
悦读：增强阅读体验同时可以绑定Evernote
ADBlock:强大的广告拦截
极简图床：可以绑定七牛云，方便快捷的存储图片，麻麻再也不用担心我Markdown写的博客图片存哪了（其实百度云也可以）
anydo：多平台同步的GTD