Chrome插件开发练习 - 还未完成-优快云博客

本文链接：https://blog.youkuaiyun.com/dllyj86/article/details/84434697

manifest.json的内容：

{
"name" : "My First Extension",
"version" : "1.0",
"manifest_version" : 2,
"description" : "The first extension that I made.",
"browser_action" : {
"default_icon" : "image/icon.png",
"default_popup" : "popup.html"
},
"permissions" : [
"http://m.weather.com.cn/*"
]
}

popup.js的内容

(function(cityName){
	var prefixURL = 'http://m.weather.com.cn/data/';
	var prefixURLCurrent = 'http://m.weather.com.cn/data/sk/';
	var surfix = ".html";
	var cityCode;
	switch(cityName){
		case 'dalian':
			cityCode = '101070201';
	}
	var wholeURL = prefixURL + cityCode + surfix;
	var configuration = {
		'dataType' : 'json',
		'type' : 'get',	// Here, must be get method.
		'url' : wholeURL,
		'crossDomain' : true,
		'timeout' : 60000,
		'success' : successCallback,
		'error' : errorCallback
	};
	
	$.ajax(configuration);
	
})('dalian');

/**
 * 
 * @param data
 * @param textStatus
 */
function successCallback(data, textStatus){
	/*
	<tr id="day-1-top">
		<td rowspan="2" class="date">22日星期三</td>
		<td class="time">白天</td>
		<td class="phenomena-image-1">图</td>
		<td class="phenomena">多云</td>
		<td class="temperature">高温20C</td>
		<td class="wind-direction">东风</td>
		<td class="wind-force">4-5级</td>
	</tr>
	<tr id="day-1-bottom">
		<td class="time">夜间</td>
		<td class="phenomena-image-2">图</td>
		<td class="phenomena">多云</td>
		<td class="temperature">低温13C</td>
		<td class="wind-direction">东南风</td>
		<td class="wind-force">4-5级</td>
	</tr>
	 */
	
	var table = $('#forecast_table');
	var info = data.weatherinfo;
	$('#city_name').text(info.city);
	for(var n = 1; n < 7; n++){
		// 风力
		var windForce = info['fl' + n].split("转");
		// 温度
		var temperature = info['temp' + n].split('~');
		// 风向
		var windDirection = info['wind' + n];
		var reg = new RegExp("[0-9]", "g");
		var result = reg.exec(windDirection);
		var directionStr = windDirection.substring(0, result['index']).split('转');
		
		
		
		var topRow = $('<tr id=day-' + n + '-top></tr>').appendTo(table)
			.append('<td rowspan="2" class="date">' + info.date_y + '</td>')
			.append('<td class="time">白天</td>')
			.append('<td class="phenomena-image-1"></td>')
			.append('<td class="phenomena">' + info['img_title' + (2 * n - 1)] + '</td>')
			.append('<td class="temperature">' + temperature[0] + '</td>')
			.append('<td class="wind-direction">' + directionStr[0] + '</td>')
			.append('<td class="wind-force">' + windForce[0] + '</td>');
		$('<tr id=day-' + n + '-bottom></tr>').insertAfter(topRow)
			.append('<td class="time">夜间</td>')
			.append('<td class="phenomena-image-1"></td>')
			.append('<td class="phenomena">' + info['img_title' + 2 * n] + '</td>')
			.append('<td class="temperature">' + temperature[1] + '</td>')
			.append('<td class="wind-direction">' + (directionStr[1] ? directionStr[1] : directionStr[0]) + '</td>')
			.append('<td class="wind-force">' + (windForce[1] ? windForce[1] : windForce[0]) + '</td>');
	}
}

function errorCallback(request, textStatus, errorThrown){
	console.info(textStatus);
}

popup.html的内容：

<!doctype html>
<html>
<head>
<title>Hello</title>
<link type="text/css" rel="stylesheet" href="style/popup.css">
</head>
<body>
	<div class="container">
		<div id="city_name"></div>
		<table id="forecast_table" class="forecast-table">
			<tr id="title_row" class="title-row">
				<td colspan="2" class="date-title">日期</td>
				<td colspan="2" class="phenomena-title">天气现象</td>
				<td class="temperature-title">气温</td>
				<td class="wind-direction-title">风向</td>
				<td class="wind-force-title">风力</td>
			</tr>
		</table>
	</div>
</body>
<script type="text/javascript" src="script/jquery-1.8.2.js"></script>
<script type="text/javascript" src="script/popup.js"></script>
</html>

popup.css的内容：

.container {
	width: 600px;
	height: 400px;
}

.forecast-table {
	border-collapse: collapse;
	width: 100%;
}

.forecast-table tr {
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	border-left: 1px solid gray;
}

.forecast-table tr td {
	border-right: 1px solid gray;
	text-align: center;
	vertical-align: middle;
}

.forecast-table .title-row td {
	height: 30px;
	font-weight: bold;
}

.forecast-table .title-row .date-title {
	/* width: 25%; */
}

.forecast-table .title-row .phenomena-title {
	/* width: 25%; */
}

.forecast-table .title-row .temperature-title {
	/* width: 20%; */
}

.forecast-table .title-row .wind-direction-title {
	/* width: 15%; */
}

.forecast-table .title-row .wind-force-title {
	/* width: 15%; */
}

返回的数据的结构：

Object {weatherinfo: Object}
weatherinfo: Object
city: "大连"
city_en: "dalian"
cityid: "101070201"
date: ""
date_y: "2013年5月22日"
fchh: "11"
fl1: "4-5级"
fl2: "4-5级"
fl3: "4-5级"
fl4: "4-5级"
fl5: "4-5级转5-6级"
fl6: "5-6级转4-5级"
fx1: "东风"
fx2: "东南风"
img1: "1"
img2: "99"
img3: "1"
img4: "2"
img5: "1"
img6: "99"
img7: "1"
img8: "99"
img9: "2"
img10: "7"
img11: "7"
img12: "1"
img_single: "1"
img_title1: "多云" // 今天白天的天气
img_title2: "多云" // 今天晚上的天气
img_title3: "多云" // 明天白天的天气
img_title4: "阴"   // 明天晚上的天气，依次类推
img_title5: "多云"
img_title6: "多云"
img_title7: "多云"
img_title8: "多云"
img_title9: "阴"
img_title10: "小雨"
img_title11: "小雨"
img_title12: "多云"
img_title_single: "多云"
index: "较舒适"
index48: "较舒适"
index48_d: "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。"
index48_uv: "最弱"
index_ag: "易发"
index_cl: "较适宜"
index_co: "舒适"
index_d: "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。"
index_ls: "适宜"
index_tr: "很适宜"
index_uv: "弱"
index_xc: "较不宜"
st1: "20"
st2: "12"
st3: "21"
st4: "12"
st5: "20"
st6: "13"
temp1: "20℃~13℃"
temp2: "22℃~15℃"
temp3: "21℃~15℃"
temp4: "20℃~14℃"
temp5: "19℃~14℃"
temp6: "19℃~15℃"
tempF1: "68℉~55.4℉"
tempF2: "71.6℉~59℉"
tempF3: "69.8℉~59℉"
tempF4: "68℉~57.2℉"
tempF5: "66.2℉~57.2℉"
tempF6: "66.2℉~59℉"
weather1: "多云" // 今天的天气
weather2: "多云转阴"  // 明天的天气，依次类推
weather3: "多云"
weather4: "多云"
weather5: "阴转小雨"
weather6: "小雨转多云"
week: "星期三"
wind1: "东风转东南风4-5级"
wind2: "东南风转南风4-5级"
wind3: "东北风转东南风4-5级"
wind4: "东南风4-5级"
wind5: "东南风4-5级转5-6级"
wind6: "东北风5-6级转4-5级"
__proto__: Object
__proto__: Object