不得不说chrome做的真的不错，听了貘大大关于chrome插件机制的讲座，就有亲手做个chrome应用的冲动，这个周末终于抽时间做了一个简单的天气预报插件，原理还是很简单的，采用了weather.com.cn的数据，因为比较熟悉这个weather.com.cn的接口，所以很快就搞定一个简单的chrome天气预报应用了。废话不多说了，开始正文。
本教程会step by step的讲解我周末的做天气预报插件，教程包括三篇文章《开发chrome应用基础》《天气预报应用开发》《调试和打包上线》，通过实例讲解，希望对大家开发chrome插件有所帮助。本文只是介绍了chrome应用开发的冰山一角，更多的chrome应用开发技巧还是要自己动手查看下google的文档。
chrome应用开发基础知识
chrome扩展应用是由html、css和javascript组成的，所以chrome应用的门槛比较低，对于一个前端开发者，只要读懂了chrome的开发文档，就可以很快的上手一个chrome应用。
每个chrome扩展都应该包含下面的文件：
一个包括一个manifest.json文件，是个配置文件，json格式，通过manifest.json可以设置应用的icon，指定默认的background.html或者popup.html……
一个或多个html文件（除非这个应用是一个皮肤）
可选的一个或多个javascript文件
可选的任何需要的其他文件，例如图片
在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是.crx的压缩文件中。如果使用Chrome Developer Dashboard，上传应用（扩展），可以自动生成.crx文件。
下图是我天气预报插件的文件列表：
chrome天气预报插件目录结构
chrome应用界面控制
chrome应用会以browser action或page action的形式在chrome浏览器界面上展现出来。每个应用扩展最多可以有一个browser action或page action。当应用（扩展）的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。
例如gmail提醒应用使用了browser action，它在工具栏上增加一个图标：
gmail应用使用browser action提示
这个新闻阅读应用也使用了browser action，当点击时会弹出一个气泡窗口popup.html：
news使用的是popup的方式
另外chrome还包括了桌面提醒（gmail新邮件提醒），主题（chrome皮肤），应用设置页面（应用设置页面），选项卡页面（新选项卡页面）等多种界面形式，本文示例使用的是browser action和popup页面来做一个简单的应用。
chrome应用基本架构
绝大多数chrome应用会包含一个背景页面(background page)，用来执行chrome应用扩展的主要功能。该背景页面时再manifest.json中设置的：
"background_page": "bg.html",//默认背景页面
chrome通过background.html来实现主要功能
上图显示了安装了应用扩展的chrome。黄色图标代表的browser action和蓝色图标代表的page action。在background.html文件里定义了browser action和javascript代码。在两个窗口里browser action都可以工作。
背景页面并不是chrome应用中唯一的页面。例如，本例天气预报插件中还包括了一个弹窗页面(popup.html)，此页面也是又html页面实现的。在应用内部还可以使用chrome.tabs.create()或者window.open()来显示内部的HTML文件。
chrome应用的弹窗界面也是可以在manifest.json中设置的：
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "Weather",
"default_popup": "popup.html"
},值得一提的是chrome应用里面的HTML页面可以互相访问各自DOM树中的全部元素，或者互相调用其中的函数。
下图显示了一个chrome应用的弹窗的架构。弹窗的内容是由HTML文件（popup.html）定义的web页面。它不必复制背景页面(background.html)里的代码，因为它可以直接调用背景页面中的函数！
chrome应用的弹窗界面
应用文件的引用
任何需要的文件都可以放到应用（扩展）中，但是怎么使用它们呢？一般的说，可以像在普通的HTML文件中那样使用相对地址来引用一个文件。下面的例子演示了如何引用images子目录下的文件myimage.png
<img src="img/myimage.png"/>
继续阅读全文……
