chrome扩展小程序tomorrow rain

近日深圳连降暴雨,我这个从不关心天气的懒人,被湿身了好几次.

所以,起了写个提醒的小程序的念头.

想法很简单,如果明天下雨的话,今天能够及时提醒.这样的话,写个chrome扩展,是个比较好的方案.

现在浏览器我基本上都是用chrome了.ie和ff很少用到.每次打开chrome的时候,如果能够自动提醒明天是否有雨,那样就满足我这个懒人的需求了.

名称就要做tomorrow rain了.哈哈.good name.

逻辑非常简单,数据来源利用soso提供的天气搜索功能.抓取数据之后,解析明天的天气情况.

有一个小技巧值得说一下.

用XMLHttpRequest获取数据之后,如果把responseText转换成dom.

var text = req.responseText;
var tempDiv = document.createElement("div");
tempDiv.innerHTML = text.replace(/<script(.|/s)*?//script>/g, '');
var content = tempDiv.getElementsByClassName('w_main');

整个扩展到源码如下:

<script>
var tomorrow_weather; //明天天气
var tomorrow_temp; //明天温度
var req; //请求

function showNotify(title, content){
	if(webkitNotifications){
		var notification = webkitNotifications.createNotification(
			'tr-64.png',
			title,
			content
		);
		notification.show()
	}
}

function handlewResponse(){
	var text = req.responseText;
	var tempDiv = document.createElement("div");
	tempDiv.innerHTML = text.replace(/<script(.|/s)*?//script>/g, '');
	var content = tempDiv.getElementsByClassName('w_main');
	var weathers = content[0].getElementsByClassName("w_w");
	var span = content[0].getElementsByTagName("span");
	
	tomorrow_weather = weathers[1].innerHTML;
	tomorrow_temp = span[4].innerHTML;
	
	if(tomorrow_weather.search('雨') != -1){
		title = "明天有雨"
		cont = tomorrow_weather + tomorrow_temp;
		showNotify(title, cont);
	}
}

function reqWeather(){
	req = new XMLHttpRequest();
	req.open(
		"GET",
		"http://www.soso.com/q?sc=web&bs=%C9%EE%DB%DA%CC%EC%C6%F8&ch=w.uf&num=10&w=%C9%EE%DB%DA%CC%EC%C6%F8",
		false
	);
	req.send();
	handlewResponse();
}

reqWeather();

</script>

不过,暂时不支持设置页面,所以写死了深圳本地的天气,另外提醒方式也不能设置.这些后续优化.

源码下载

插件下载