最近开始尝试编写Chrome插件,因为我们要移植一些项目到Chrome下,所以需要进行一些更改,所以今天花了一点时间去了解Chrome插件的开发,同时我还编写了Chrome Package方便开发人员进行开发,也能够方便开发的代码重用和自动化。同样,我以后也会记录下我开发Chrome插件所遇到的经验和问题。
实际上,Chrome插件的开发要比Firefox容易一些,至少现在看来是这样,在写一个入门程序的时候,还不需要那么费劲,先看看效果先。

上面是一个简单的程序,我们看看如何去制作它。
首先,我们需要创建一个manifest.json文件,相当于是整个插件的配置了,代码如下。
{
"name": "Chrome Package Project",
"version": "1.1",
"description": "This chrome extension",
"browser_action": {
"default_icon": "images/icon.png",
"popup":"pages/main.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
"name": "Chrome Package Project",
"version": "1.1",
"description": "This chrome extension",
"browser_action": {
"default_icon": "images/icon.png",
"popup":"pages/main.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
上面的我就不多说了,唯一要指出一点的就是下面的permissions,是验证网站,暂时我还没有了解,等我了解了会补上来。
在写好了manifest文件之后,我们就可以像写网页一样的写内容了,前面我们在manifest里面写了popup是pages/main.html,所以这个就是我们的首页。这里我喜欢代码结构层次比较鲜明,方便维护,所以我创建了如下文件夹。
build css images js pages
其中build是我放编译后的文件的地方,pages是我放页面的地方。
OK,现在我们可以着手写程序了,一个HelloWorld非常简单,main.html代码如下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>Hello World</title>
<link type="text/css" href="../css/main.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/main.js"></script>
</head>
Thanks for using Chrome Package for Windows
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>Hello World</title>
<link type="text/css" href="../css/main.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
Thanks for using Chrome Package for Windows
</body>
</html>
这样,我们就写了一个非常简单的HelloWorld应用程序,是不是很酷,现在Chrome插件的市场还很大,而且开发简单,值得一试。
注:暂时不支持mac。
[...] Chrome Addon – Say Hello to Chrome [...]