今天的文章来说说chrome扩展开发的最后一步，代码调试和打包上线。
跟前端开发一样，chrome应用开发过程中也是需要代码调试的，用的调试工具自然是chrome的开发者工具，所以前端开发工程师应该很快就可以上手！
代码调试需要调出来chrome的扩展程序页面，有三种方式调出来chrome的扩展程序页面
点击右上角的“开发者模式”，就会出现三个按钮，选择“载入正在开发中的扩展程序…”，在新开的窗口中找到自己开发的程序的路径，然后打开就可以导入开发中的chrome应用了。点击活动视窗，就可以打开chrome的开发中工具，前端开发工程师就可以进行调试了，跟调试前端页面一样哦。
上一篇讲到了chrome应用开发的基础知识，这一篇通过周末天气预报插件的开发来讲解下chrome扩展应用的开发过程。熟悉前端开发的童靴，知道了chrome应用开发的基本配置，应该很快就可以开发一个chrome应用，因为chrome插件就是纯粹的javascript和html！
在开发之前需要统筹下，chrome天气预报插件的基本功能和界面，本插件，会这chrome顶部添加一个带有当前天气icon的应用，点击应用打开弹窗页面，天气的数据来自weather.com.cn的接口，所以我们需要跨域授权应用可以请求weather.com.cn的数据。于是chrome天气预报插件的manifest.json部分代码就出来了：
{
"name": "Chrome Weather", //name
"version": "0.1.0", //version
"description": "weather.", //description
"background_page": "background.html",//背景页面，应用请求数据，处理icon显示实时气温
"browser_action": {
"default_icon": "icon.png" ,//默认的icon
"default_title": "Weather",//默认鼠标overtitle
"default_popup": "popup.html"//弹窗页面
},
"permissions": [ "tabs", "http://*.weather.com.cn/" ]//跨域请求授权
}
先来个最终效果截图：
chrome天气插件用到了weather.com.cn的三个接口：
`当用户第一次运行chrome时候，需要请求背景页面，即background.html，这时，我们需要请求接口来获取当前用户所在的城市信息，以根据cityid获取天气情况。代码如下：
$.getScript('http://61.4.185.48:81/g/',function(){
window.localStorage.cityid = id;//保存cityid到localStorage
getWeather(id);//获取天气信息
});
上一步，涉及到了一个函数getWeather，这个函数的作用就是做一个xmlHttpRequest请求，获取当前cityid的天气信息，包括实时天气。getWeather中运用了send函数来做xmlHttpRequest请求。
function getWeather(id){
var url = 'http://m.weather.com.cn/data/'+id+'.html';
var url2 = 'http://www.weather.com.cn/data/sk/'+id+'.html';
send(url,function(json){
json0 = json;
window.localStorage.json0 = JSON.stringify(json);
doit++;
deal();//处理json0
}).call(this,url2,function(json){
json1 = json;
window.localStorage.json1 = JSON.stringify(json);
doit++;
deal();//处理json1
});
}
function send(url,cb){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var json = JSON.parse(xhr.responseText);//解析json，保证安全性
typeof cb==='function' && json.weatherinfo && cb(json.weatherinfo);
xhr = null;
}
}
xhr.send();
return arguments.callee;
}
不得不说chrome做的真的不错，听了貘大大关于chrome插件机制的讲座，就有亲手做个chrome应用的冲动，这个周末终于抽时间做了一个简单的天气预报插件，原理还是很简单的，采用了weather.com.cn的数据，因为比较熟悉这个weather.com.cn的接口，所以很快就搞定一个简单的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应用会以browser action或page action的形式在chrome浏览器界面上展现出来。每个应用扩展最多可以有一个browser action或page action。当应用（扩展）的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。
例如gmail提醒应用使用了browser action，它在工具栏上增加一个图标：
这个新闻阅读应用也使用了browser action，当点击时会弹出一个气泡窗口popup.html：
另外chrome还包括了桌面提醒（gmail新邮件提醒），主题（chrome皮肤），应用设置页面（应用设置页面），选项卡页面（新选项卡页面）等多种界面形式，本文示例使用的是browser action和popup页面来做一个简单的应用。
绝大多数chrome应用会包含一个背景页面(background page)，用来执行chrome应用扩展的主要功能。该背景页面时再manifest.json中设置的：
"background_page": "bg.html",//默认背景页面
[/caption]
上图显示了安装了应用扩展的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)里的代码，因为它可以直接调用背景页面中的函数！
任何需要的文件都可以放到应用（扩展）中，但是怎么使用它们呢？一般的说，可以像在普通的HTML文件中那样使用相对地址来引用一个文件。下面的例子演示了如何引用images子目录下的文件myimage.png
<img src="img/myimage.png" alt="">