成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

動手寫一款簡單的chrome天氣插件

shixinzhang / 2934人閱讀

摘要：極簡天氣一款簡單的天氣插件。屬性說明指定文件格式的版本，在之后，應(yīng)該都是擴(kuò)展名稱擴(kuò)展版本號擴(kuò)展的版本擴(kuò)展列表圖標(biāo)指定擴(kuò)展在工具欄中的顯示信息。

極簡天氣

一款簡單的chrome天氣插件。

github https://github.com/yohnz/weather
如圖：

創(chuàng)建文件

新建weather文件夾，里面包含manifest.json，popup.html和images文件夾。images文件夾放16,48,128三種不同尺寸的圖標(biāo)

manifest.json內(nèi)代碼如下：

{
  "manifest_version":2,
  "name":"極簡天氣",
  "description":"極簡天氣預(yù)報",
  "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":"天氣預(yù)報",
      "default_popup":"popup.html"
  },
   
}

popup.html的代碼如下：




    
    天氣


 
    
    Test
文件說明

manifest.json

必需文件，是整個擴(kuò)展的入口，每個Chrome擴(kuò)展都包含一個Manifest文件。Manifest必須包含name、version和manifest_version屬性。

屬性說明：

manifest_version指定文件格式的版本，在Chrome18之后，應(yīng)該都是2

name擴(kuò)展名稱

version 擴(kuò)展版本號

version擴(kuò)展的版本

icons擴(kuò)展列表圖標(biāo)

browser_action指定擴(kuò)展在Chrome工具欄中的顯示信息。

default_icon、default_title、default_popup依次指定圖標(biāo)、標(biāo)題、對應(yīng)的頁面

Popup頁面

Popup頁面是當(dāng)用戶點擊擴(kuò)展圖標(biāo)時，展示在圖標(biāo)下面的頁面。

打開chrome擴(kuò)展程序界面，勾選"開發(fā)者模式",拖入weather文件夾，然后就可以看到weather擴(kuò)展已經(jīng)出現(xiàn)在chrome擴(kuò)展程序列表了

同時，工具欄也出現(xiàn)了weather的圖標(biāo)，點擊之后會彈出popup界面:

完善頁面和樣式

完善靜態(tài)popup頁面,模擬天氣數(shù)據(jù):




    
    天氣


    

        

            
廈門

            
"
            +"
"+day.tmp.min+"~"+day.tmp.max+"
"
            +"
"+day.cond.txt_d+"
"     
        +"
"       
    }
    var today = "
"+city+"
"
                +"
"
                    +""
                    +"
"+now.tmp+"℃
"            
                +"
"
                +"
"
                    +"
"+now.cond.txt+"
"
                    +"
風(fēng)速 "+now.wind.spd+"   濕度 "+now.hum+"%
"            
                +"
"
    
    document.getElementById("today").innerHTML = today;
    document.getElementById("wrap").innerHTML = dailyDom; 
}

這時，再點擊weather圖標(biāo)，天氣擴(kuò)展基本上就完成了，不過因為和風(fēng)API有請求次數(shù)限制，也為了減少請求，這里做一下數(shù)據(jù)緩存。

var _time = new Date().getTime()-(60*60*1000*2); //接口次數(shù)有限，兩小時請求一次
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天氣擴(kuò)展就完成了，是不是比想象中更簡單?如果覺得本文有幫助，請github賞個star~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79477.html

相關(guān)文章

  • 推薦幾款好用的Chrome插件

    摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設(shè)置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發(fā)卸載等功能。 ‘工欲善其事，必先利其器’。優(yōu)秀的開發(fā)者不僅體現(xiàn)在其在技術(shù)方面的精通，還體現(xiàn)在其對各種開發(fā)工具的充分了解與使用，這會讓其開發(fā)效率事半功倍。作為一個前端開發(fā)者，平...

    fox_soyoung 評論0 收藏0

  • 推薦幾款好用的Chrome插件

    摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設(shè)置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發(fā)卸載等功能。 ‘工欲善其事，必先利其器’。優(yōu)秀的開發(fā)者不僅體現(xiàn)在其在技術(shù)方面的精通，還體現(xiàn)在其對各種開發(fā)工具的充分了解與使用，這會讓其開發(fā)效率事半功倍。作為一個前端開發(fā)者，平...

    lpjustdoit 評論0 收藏0

  • 推薦幾款好用的Chrome插件

    摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設(shè)置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發(fā)卸載等功能。 ‘工欲善其事，必先利其器’。優(yōu)秀的開發(fā)者不僅體現(xiàn)在其在技術(shù)方面的精通，還體現(xiàn)在其對各種開發(fā)工具的充分了解與使用，這會讓其開發(fā)效率事半功倍。作為一個前端開發(fā)者，平...

    wums 評論0 收藏0

  • 了解RoboMaster視覺組（三）視覺組使用的軟件

    摘要：視覺組接觸的軟件進(jìn)行視覺開發(fā)會用到各種各樣的軟件開發(fā)環(huán)境輔助工具等，所以很有必要了解一些相關(guān)的快捷鍵命令使用技巧。沒有這樣保姆級的，并不存在一款能夠自動為你生成的軟件。一款錄制屏幕的軟件。 --NeoZng【[email protected]】 3.視覺組接觸的軟件 進(jìn)行視覺開發(fā)會用到...

    AlphaWallet 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<