開發chrome插件入門-天氣預報

時間 2019-11-24

原文原文鏈接

chrome拓展是基於chrome平臺的小程序，集合了一系列文件，這些文件包括HTML文件、CSS樣式文件、JavaScript腳本文件、圖片等靜態文件以及manifest.json。本拓展能夠做爲chrome拓展入門練習。詳細的chrome拓展資料能夠翻看《Chrome擴展及應用開發》，介紹得很詳細~html

開發準備

代碼編輯器

我使用的是Sublime Text，輕量實用git

天氣預報接口

書裏面提供的接口沒法使用，看了幾家接口商店後選用了API SHOP接口商店的天氣預報接口（它能夠免費試用100次哈哈哈~）github

上圖接口，申請後傳接口商店的apiKey和接口對應參數便可，每一個用戶有本身專屬的ApiKey，註冊後在API Shop的控制檯複製ApiKey調用接口。

代碼解析

每一個插件都有mainifest.json（清單）文件，它是整個擴展的入口。chrome

mainifest.json

{
    "manifest_version": 2,//對於chrome拓展只能爲2
    "name": "天氣預報",//拓展名
    "version": "1.0",//拓展版本號，每次上傳谷歌商店都須要與上次版本號不同
    "description": "查看將來15天的天氣狀況",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "天氣預報",
        "default_popup": "popup.html"
    },
    "options_page": "options.html",
    "permissions": [
        "api.apishop.net/common/weather/get15DaysWeatherByArea"//chrome請求權限
    ]
}
複製代碼

weather.js文件

都是基本js的語法，不須要介紹了嘻嘻json

function httpRequest(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("apiKey=GU6qekR17503a6b2326f09fbc4e3a7c03874c733300****&city=廣州&areaID=101280101");
    //apishop註冊後就有apiKey，在API Shop的控制檯查看
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            callback(xhr.responseText);
        }
    }
}

function showWeather(result) {
    console.log(result)
    result = JSON.parse(result);
    var list = result.result.dayList;
    var table = '<table><tr><th>日期</th><th>天氣</th><th>最低溫度</th><th>最高溫度</th></tr>';
    for (var i in list) {
        table += '<tr>';
        table += '<td>' +list[i].daytime + '</td>';
        table += '<td>' + list[i].day_weather + '</td>';
        table += '<td>' + Math.round(list[i].night_air_temperature ) + ' °C</td>';
        table += '<td>' + Math.round(list[i].day_air_temperature) + ' °C</td>';
        table += '</tr>';
    }
    table += '</table>';
    document.getElementById('weather').innerHTML = table;
}

var url = 'http://api.apishop.net/common/weather/get15DaysWeatherByArea';
httpRequest(url, showWeather);

複製代碼