chrome插件开发-简单的天气预报插件

chrome天气小插件

今天在自学chrome插件开发，教程书籍为《Chrome扩展及应用开发》李喆编著，在此感谢作者李喆。

插件示例中的css样式使用的是书中的css代码，js代码加上了部分自己的代码，直接上代码

manifest.json代码

{
  "manifest_version": 2,
  "name": "天气预报",
  "version": "0.1",
  "description": "查看未来两周的天气预报",
  "icons": {
    "16": "images/weather16.png",
    "48": "images/weather48.png",
    "128": "images/weather128.png"
  },
  "browser_action": {
    "default_icon": {
      "32": "images/weather32.png",
      "64": "images/weather64.png"
    },
    "default_title":"天气预报",
    "default_popup":"popup.html"
  },
  "author": "JohnConnor",
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": [
    "https://www.mxnzp.com/",
    "tabs",  "notifications"
  ]
}

options.html页面及options.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设定城市</title>
</head>
<body>
    <input type="text" id="city"/>
    <input type="button" id="save" value="保存城市"/>
    <script src="js/options.js"></script>
</body>
</html>

var city = localStorage.city || "北京";
document.getElementById("city").value = city;
document.getElementById("save").onclick = function(){
    localStorage.city = document.getElementById("city").value;
}

popup.html页面及weather.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 600px;
            height: 270px;
        }

        table {
            font-family: "Lucida Grande", "sans-serif";
            font-size: 12px;
            width: 96%;
            text-align: left;
            border-collapse: collapse;
            border: 1px solid #69c;
            margin: 0px 10px auto 10px;
            cursor: default;
        }

        table th {
            font-weight: normal;
            font-size: 14px;
            color: #039;
            border-bottom: 1px dashed #69c;
            padding: 12px 17px;
            white-space: nowrap;
        }

        table td {
            color: #669;
            padding: 7px 17px;
            white-space: nowrap;
        }

        table tbody tr:hover td {
            color: #339;
            background: #d0dafd;
        }
    </style>
</head>
<body>
<div style="padding: 12px;font-size: 12px">
    <span id="address"></span>的未来四天天气预报
</div>
<div id="weather">
    <table>
        <thead>
        <tr>
            <th>日期</th>
            <th>天气日/夜</th>
            <th>最低温度</th>
            <th>最高温度</th>
            <th>风力</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</div>
<script src="js/weather.js"></script>
</body>
</html>

function httpRequest(url,callback){
    var xhr = new XMLHttpRequest();
    xhr.open("GET",url,true);
    xhr.setRequestHeader("app_id","");
    xhr.setRequestHeader("app_secret","");
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            callback(xhr.responseText);
        }
    }
    xhr.send();
}
function showWeather(result){
    result = JSON.parse(result);
    var address = result.data.address;
    document.getElementById("address").innerText = address;
    var forecasts = result.data.forecasts;
    var tbody = "";
    forecasts.map(item =>{
        tbody += "<tr>";
        tbody += "<td>" + item.date + "</td>";
        tbody += "<td>" + item.dayWeather + "/" + item.nightWeather + "</td>";
        tbody += "<td>" + item.nightTemp + "</td>";
        tbody += "<td>" + item.dayTemp + "</td>";
        tbody += "<td>白天" + item.dayWindPower + "，夜间" + item.nightWindPower + "</td>";
        tbody += "</tr>";
    })
    document.getElementById("tbody").innerHTML = "";
    document.getElementById("tbody").innerHTML = tbody;
}
var city = localStorage.city;
city = city? city : "北京";
var url = "https://www.mxnzp.com/api/weather/forecast/" + city;
httpRequest(url,showWeather);

来源：oschina

链接：https://my.oschina.net/johnconnor1982/blog/4310633

标签

javascript

XHR