資訊專欄INFORMATION COLUMN
摘要：極簡天氣一款簡單的天氣插件。屬性說明指定文件格式的版本，在之后，應該都是擴展名稱擴展版本號擴展的版本擴展列表圖標指定擴展在工具欄中的顯示信息。
極簡天氣
一款簡單的chrome天氣插件。
github https://github.com/yohnz/weather
如圖：
新建weather文件夾，里面包含manifest.json，popup.html和images文件夾。images文件夾放16,48,128三種不同尺寸的圖標
manifest.json內代碼如下：
{
"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的代碼如下：
天氣
Test
文件說明
manifest.json
必需文件，是整個擴展的入口，每個Chrome擴展都包含一個Manifest文件。Manifest必須包含name、version和manifest_version屬性。
屬性說明：
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頁面,模擬天氣數據:
天氣
廈門
"
+""+day.tmp.min+"~"+day.tmp.max+"
"
+""+day.cond.txt_d+"
"
+""
}
var today = ""+city+"
"
+""
+""
+""+now.tmp+"℃
"
+""
+""
+""+now.cond.txt+"
"
+"風速 "+now.wind.spd+" 濕度 "+now.hum+"%
"
+""
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~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79477.html
相關文章
-
推薦幾款好用的Chrome插件
摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網頁調試與發送網頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發卸載等功能。
‘工欲善其事，必先利其器’。優秀的開發者不僅體現在其在技術方面的精通，還體現在其對各種開發工具的充分了解與使用，這會讓其開發效率事半功倍。作為一個前端開發者，平...
-
推薦幾款好用的Chrome插件
摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網頁調試與發送網頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發卸載等功能。
‘工欲善其事，必先利其器’。優秀的開發者不僅體現在其在技術方面的精通，還體現在其對各種開發工具的充分了解與使用，這會讓其開發效率事半功倍。作為一個前端開發者，平...
-
推薦幾款好用的Chrome插件
摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網頁調試與發送網頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發卸載等功能。
‘工欲善其事，必先利其器’。優秀的開發者不僅體現在其在技術方面的精通，還體現在其對各種開發工具的充分了解與使用，這會讓其開發效率事半功倍。作為一個前端開發者，平...
-
了解RoboMaster視覺組（三）視覺組使用的軟件
摘要：視覺組接觸的軟件進行視覺開發會用到各種各樣的軟件開發環境輔助工具等，所以很有必要了解一些相關的快捷鍵命令使用技巧。沒有這樣保姆級的，并不存在一款能夠自動為你生成的軟件。一款錄制屏幕的軟件。 --NeoZng【neozng1@hnu.edu.cn】 3.視覺組接觸的軟件 進行視覺開發會用到...
發表評論
0條評論
閱讀 961·2021-11-24 09:39
閱讀 3383·2021-10-27 14:20
閱讀 2322·2019-08-30 14:08
閱讀 3361·2019-08-29 16:34
閱讀 2176·2019-08-26 12:14
閱讀 2104·2019-08-26 11:54
閱讀 2772·2019-08-26 11:44
閱讀 2474·2019-08-26 11:38
