chrome擴充是基於chrome平臺的小程式，集合了一系列檔案，這些檔案包括HTML檔案、CSS樣式檔案、JavaScript指令碼檔案、圖片等靜態檔案以及manifest.json。本擴充可以作為chrome擴充入門練習。詳細的chrome擴充各資訊可以翻看 《Chrome擴充套件及應用開發》，介紹得很詳細~

開發準備

1. 程式碼編輯器

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

2. 天氣預報介面

書裡面提供的介面無法使用，看了幾家介面商店後選用了API SHOP介面商店的天氣預報介面（它可以免費試用100次哈哈哈~）

上圖介面，申請後傳介面商店的apiKey和介面對應引數即可，每個使用者有自己專屬的apiKey，註冊後可在API Shop的控制檯檢視。此網站使用者體驗很好，這裡就不贅述了。

程式碼解析

每個外掛都有mainifest.json（清單）檔案，它是整個擴充套件的入口。

• 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的語法，不需要介紹了嘻嘻

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);

複製程式碼

匯入chrome擴充

manifest.json的上一層目錄，拖入瀏覽器即可

最終效果如圖

具體程式碼和檔案結構可以上我的github瀏覽!

地址:github.com/scarqin/chr…

寫完教程後其實有很多可以優化的點，比如可以選擇城市、當天點開天氣預報後儲存資料（僅發一次請求）等等，歡迎大家和我交流討論。

資料

• Chrome擴充套件及應用開發
• API SHOP介面商店