Designsor

好吧，还是应了史努比的，扩展好了……其实我丫就是plug多了……

看下截图吧，很简单的一个小应用，还没完全做好，但是有了小雏形，激动是当然的了。

哈，找了个最简单的例子，IP地址查询，城市所在地查询，当日天气查询，嗯，简单的一个小扩展。主要是想了解下chrome的插件机制，虽然制作这个小例子根本没用到它里面的很多功能，而且很多功能我也还没有去学，只用了大概一下午的时候，就制作出了个扩展，可想而知chrome的扩展是多么容易上手啊。以后肯定会火。

这个截图是我本地的扩展安装截图，我还想把未来5天或者最少也要把第2天的天气加进去，还有手机号所在地查询功能，火车票飞机票查询加进去再发布出来吧。所以安装地址就不给了。

我学习的文档地址分享下：

http://code.google.com/chrome/extensions/docs.html

然后简单说下我用到的代码和具体的一些chrome插件上手方面的知识。因为在我看文档的时候也没发现太多讲的很明白的教程，其实真的不难，仔细看文档都有说明。

chrome插件的文件结构：必须要有一个manifest.json文件。官方格式如下：

{
// Required
“name”: “My Extension”,
“version”: “versionString”,

// Recommended
“description”: “A plain text description”,
“icons”: { … },
“default_locale”: “en”,

// Pick one (or none)
“browser_action”: {…},
“page_action”: {…},
“theme”: {…},

// Add any of these that you need
“background_page”: “aFile.html”,
“chrome_url_overrides”: {…},
“content_scripts”: [...],
“minimum_chrome_version”: “versionString”,
“options_page”: “aFile.html”,
“permissions”: [...],
“plugins”: [...],
“update_url”: “http://path/to/updateInfo.xml”
}

具体的参数说明可见API文档：http://code.google.com/chrome/extensions/manifest.html

根据这个类似json格式一样的配置文件chrome会载入你的扩展程序，然后具体到我使用的页面主要有popup.html还有background.html俩个页面，一个是点击扩展图标的弹出页面，一个就是从扩展开始就一直后台运行的主程序页面。

回过头来看下我制作的几个功能，IP,地址,天气，肯定是访问了外部的API或者数据了。噢，忘记说了chrome的扩展是完全由css html javascript来制作的噢。而且ajax没有跨域限制，只要你设置了相应的配置就OK。很棒。

具体思路就是扩展访问外部api然后处理结果，返回给popup页面展示给用户，OVER。

具体的到刚才截图的主要代码亮一下，写的不太好，主要是卡在了编码正则那一块，后来统一了所有页面的编码就OK了。嗯，都需要是utf-8的……

popup.html页面代码,background.html页面代码。

只用到了个localStorage类似全局变量对象的一个东西，就实现了。基本是2个页面数据互相交互的桥梁，然后是一个监听函数监听数据是否完成加载和处理，如果成功则返回给popup页面即可。

具体代码可以看下，注释没怎么写，因为真的是很简单。。。

嗯，继续做，加功能，V。第一次chrome插件制作经验分享……

最后的PS:chrome里的HTML5 CSS3支持的都非常好，可以尝试使用噢~比如HTML5的websql或者HTML5新加的那几个媒体标签，再或者绘图标签和CSS3动画特效，都是可以完全应用进去的哈……：）好玩。