動手寫一款簡單的chrome天氣插件
極簡天氣
一款簡單的chrome天氣插件。php
github https://github.com/yohnz/weather
如圖：html
建立文件
新建weather文件夾，裏面包含manifest.json，popup.html和images文件夾。images文件夾放16,48,128三種不一樣尺寸的圖標git
manifest.json內代碼以下：github
{
"manifest_version":2,
"name":"極簡天氣",
"description":"極簡天氣預報",
"version":"1.0",
"icons": {
"16": "images/sun16.png",
"48": "images/sun48.png",
"128": "images/sun128.png"
},
"browser_action":{
"default_icon":"images/sun48.png",
"default_title":"天氣預報",
"default_popup":"popup.html"
},
}
popup.html的代碼以下：ajax
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>天氣</title>
</head>
<body>
<div class="weather">
Test
</div>
</body>
</html>
文件說明
manifest.jsonchrome
必需文件，是整個擴展的入口，每一個Chrome擴展都包含一個Manifest文件。Manifest必須包含name、version和manifest_version屬性。json
屬性說明：api
manifest_version指定文件格式的版本，在Chrome18以後，應該都是2跨域name擴展名稱緩存version擴展版本號version擴展的版本icons擴展列表圖標browser_action指定擴展在Chrome工具欄中的顯示信息。default_icon、default_title、default_popup依次指定圖標、標題、對應的頁面
Popup頁面
Popup頁面是當用戶點擊擴展圖標時，展現在圖標下面的頁面。
打開chrome擴展程序界面，勾選"開發者模式",拖入weather文件夾，而後就能夠看到weather擴展已經出如今chrome擴展程序列表了
同時，工具欄也出現了weather的圖標，點擊以後會彈出popup界面:
完善頁面和樣式
完善靜態popup頁面,模擬天氣數據:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>天氣</title>
</head>
<body>
<div class="weather">
<div class="today" id="today">
<h1 class="city">廈門</h1>
<div class="row_detail"><img src="http://files.heweather.com/cond_icon/104.png">
<h1>19<span>℃</span></h1></div>
<div class="wind">
<h2>陰</h2>
<h4>風速 20 溼度 89%</h4></div>
</div>
<div class="content">
<div class="wrap" id="wrap">
<div class="row">
<h4>2016-05-16</h4><img src="http://files.heweather.com/cond_icon/104.png">
<h1>19~24</h1>
<h4>陰</h4>
</div>
</div>
</div>
</div>
</body>
</html>
新建CSS文件，並在popup頁面引入
body{
width:740px;
height:400px;
font-family: 'Microsoft Yahei';
color:#333;
background:#fefefe;
text-shadow:1px 1px 6px #333;
}
.city{
text-align:center
}
.today{
padding-bottom:30px;
}
.row_detail{
display: flex;
direction: row;
justify-content:center;
align-items: center;
}
.row_detail img{
width:80px;
}
.row_detail h1{
font-size:60px;
}
.wind{
text-align: center;
}
.content{
display: flex;
direction: column
}
.wrap{
display: flex;
direction: row;
flex: 1;
justify-content:space-around;
align-items: center;
}
.row{
background:#fff;
border:1px solid #ccc;
padding:10px;
box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.row img{
width:80px;
}
.row h1{
font-size:18px;
}
h1,h4{
text-align: center;
margin:0;
}
點擊工具欄weather圖標，此時界面如圖：
獲取真實天氣數據
Google容許Chrome擴展應用沒必要受限於跨域限制。但出於安全考慮，須要在Manifest的permissions屬性中聲明須要跨域的權限。
這裏以和風天氣API爲例.
首先，在Manifest裏添加要請求的API接口：
"permissions":[
"http://api.openweathermap.org/data/2.5/forecast?q=*",
]
而後新建popup.js並在popup頁面中引入
簡單的ajax函數：
function httpRequest(url,callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET',url,true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4){
callback(xhr.responseText);
}
}
xhr.send();
}
和風天氣API能夠經過城市名稱，城市代碼,IP三種方式來獲取指定城市天氣數據，不過通過測試發現，IP獲取的方式不許確，城市有誤差，因此，直接用城市名稱來獲取。這裏借用http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json獲取城市名稱。
httpRequest('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json',function(data) {
if(!data) return;
data = JSON.parse(data);
var city = data.city;
var url = 'https://api.heweather.com/x3/weather?city='+city+'&key=youkey';
httpRequest(url,function(data) {
data = JSON.parse(data);
var result = data["HeWeather data service 3.0"][0];
showWeather(city,result);
});
});
爲了方便的解析圖片，構建一個json
var cond_info = {
100:"http://files.heweather.com/cond_icon/100.png",
101:"http://files.heweather.com/cond_icon/101.png",
102:"http://files.heweather.com/cond_icon/102.png",
103:"http://files.heweather.com/cond_icon/103.png",
104:"http://files.heweather.com/cond_icon/104.png",
200:"http://files.heweather.com/cond_icon/200.png",
201:"http://files.heweather.com/cond_icon/201.png",
202:"http://files.heweather.com/cond_icon/202.png",
203:"http://files.heweather.com/cond_icon/203.png",
204:"http://files.heweather.com/cond_icon/204.png",
205:"http://files.heweather.com/cond_icon/205.png",
206:"http://files.heweather.com/cond_icon/206.png",
207:"http://files.heweather.com/cond_icon/207.png",
208:"http://files.heweather.com/cond_icon/208.png",
209:"http://files.heweather.com/cond_icon/209.png",
210:"http://files.heweather.com/cond_icon/210.png",
211:"http://files.heweather.com/cond_icon/211.png",
212:"http://files.heweather.com/cond_icon/212.png",
213:"http://files.heweather.com/cond_icon/213.png",
300:"http://files.heweather.com/cond_icon/300.png",
301:"http://files.heweather.com/cond_icon/301.png",
302:"http://files.heweather.com/cond_icon/302.png",
303:"http://files.heweather.com/cond_icon/303.png",
304:"http://files.heweather.com/cond_icon/304.png",
305:"http://files.heweather.com/cond_icon/305.png",
306:"http://files.heweather.com/cond_icon/306.png",
307:"http://files.heweather.com/cond_icon/307.png",
308:"http://files.heweather.com/cond_icon/308.png",
309:"http://files.heweather.com/cond_icon/309.png",
310:"http://files.heweather.com/cond_icon/310.png",
311:"http://files.heweather.com/cond_icon/311.png",
312:"http://files.heweather.com/cond_icon/312.png",
313:"http://files.heweather.com/cond_icon/313.png",
400:"http://files.heweather.com/cond_icon/400.png",
401:"http://files.heweather.com/cond_icon/401.png",
402:"http://files.heweather.com/cond_icon/402.png",
403:"http://files.heweather.com/cond_icon/403.png",
404:"http://files.heweather.com/cond_icon/404.png",
405:"http://files.heweather.com/cond_icon/405.png",
406:"http://files.heweather.com/cond_icon/406.png",
407:"http://files.heweather.com/cond_icon/407.png",
500:"http://files.heweather.com/cond_icon/500.png",
501:"http://files.heweather.com/cond_icon/501.png",
502:"http://files.heweather.com/cond_icon/502.png",
503:"http://files.heweather.com/cond_icon/503.png",
504:"http://files.heweather.com/cond_icon/504.png",
506:"http://files.heweather.com/cond_icon/506.png",
507:"http://files.heweather.com/cond_icon/507.png",
508:"http://files.heweather.com/cond_icon/508.png",
900:"http://files.heweather.com/cond_icon/900.png",
901:"http://files.heweather.com/cond_icon/901.png",
999:"http://files.heweather.com/cond_icon/999.png"
}
showWeather()函數構建DOM;
function showWeather(city,result) {
var daily = result.daily_forecast;
var now = result.now;
var dailyDom='';
for(var i=0;i<daily.length;i++){
var day = daily[i];
dailyDom += '<div class="row">'
+'<h4>'+day.date+'</h4>'
+'<img src="'+cond_info[day.cond.code_d]+'" />'
+'<h1>'+day.tmp.min+'~'+day.tmp.max+'</h1>'
+'<h4>'+day.cond.txt_d+'</h4>'
+'</div>'
}
var today = '<h1 class="city">'+city+'</h1>'
+'<div class="row_detail">'
+'<img src="'+cond_info[now.cond.code]+'" />'
+'<h1>'+now.tmp+'<span>℃</span></h1>'
+'</div>'
+'<div class="wind">'
+'<h2>'+now.cond.txt+'</h2>'
+'<h4>風速 '+now.wind.spd+' 溼度 '+now.hum+'%</h4>'
+'</div>'
document.getElementById('today').innerHTML = today;
document.getElementById('wrap').innerHTML = dailyDom;
}
這時，再點擊weather圖標，天氣擴展基本上就完成了，不過由於和風API有請求次數限制，也爲了減小請求，這裏作一下數據緩存。
var _time = new Date().getTime()-(60*60*1000*2); //接口次數有限，兩小時請求一次
var storageTime = localStorage.updateTime||0;
httpRequest('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json',function(data) {
if(!data) return;
data = JSON.parse(data);
var city = data.city;
var url = 'https://api.heweather.com/x3/weather?city='+city+'&key=youkey';
if(_time>storageTime){
httpRequest(url,function(data) {
data = JSON.parse(data);
var result = data["HeWeather data service 3.0"][0];
showWeather(city,result);
localStorage.updateTime = new Date().getTime();
localStorage.data = JSON.stringify(result);
});
}else{
var result = JSON.parse(localStorage.data);
showWeather(city,result);
}
});
至此，一個簡單的chrome天氣擴展就完成了，是否是比想象中更簡單?若是以爲本文有幫助，請github賞個star~
相關文章
- 1. 編寫一個簡單的chrome插件
- 2. 最簡單的天氣預報插件
- 3. 幾款不錯的天氣插件
- 4. 【chrome 插件一】開發一個簡單chrome瀏覽器插件
- 5. 動手作第一個Chrome插件 動手作第一個Chrome插件
- 6. 實現一個簡單的chrome插件
- 7. 製做一個簡單的chrome插件
- 8. 天氣插件
- 9. 找到一款免費的網頁天氣插件
- 10. 一款好用的天氣預報插件
- 更多相關文章...
- • Maven 插件 - Maven教程
- • C# 文本文件的讀寫 - C#教程
- • IntelliJ IDEA安裝代碼格式化插件
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 編寫一個簡單的chrome插件
- 2. 最簡單的天氣預報插件
- 3. 幾款不錯的天氣插件
- 4. 【chrome 插件一】開發一個簡單chrome瀏覽器插件
- 5. 動手作第一個Chrome插件 動手作第一個Chrome插件
- 6. 實現一個簡單的chrome插件
- 7. 製做一個簡單的chrome插件
- 8. 天氣插件
- 9. 找到一款免費的網頁天氣插件
- 10. 一款好用的天氣預報插件