Chrome 插件开发——本地天气_ES2015(es6)

上一篇: 推荐轻量高效无依赖的开源JS插件... 下一篇:JS的闭包与this详解

Chrome 插件开发——本地天气

发布时间：2019-08-19 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Chrome 插件开发——本地天气，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

经常在Chrome应用商店下载扩展程序也就是插件，有时候在想可不可以自己也开发一个插件用用呢？本文就是在这样的背景下产生的，以一个生活必需的简单获取天气的插件作为开发演示，下面就开始我们的Chrome插件开发之旅吧！
源码地址：https://github.com/leoyaojy/c...
目录结构：

      
      
      
      
      
├── css
│&nbsp;  └── main.css
├── imgs
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-19.png
│   └── icon-38.png
├── js
│   ├── jquery.js
│   └── main.js
├── manifest.json
└── popup.htML
效果图:

manifest.json
入口文件，每个Chrome插件都必须包含一个manifest.json文件，其中必须包含name、version和manifest_version属性

      
      
      
      
      
{
    "manifest_version": 2,
    "version": "1.0",
    "name": "weather",
    "description": "a chrome extension for local weather",
    "icons": {
         "128": "imgs/icon-128.png",
         "16": "imgs/icon-16.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "imgs/icon-19.png",
            "38": "imgs/icon-38.png"
        },
        "default_tITle": "weather",
        "default_popup": "popup.html"
    },
    "PErmissions":[
        "http://*/*",
        "https://*/*"
    ]
}
属性说明：

manifest_version：此键指定此扩展使用的manifest.json的版本，目前必须是2
version：插件版本号
name：插件名称
description：插件描述
icons：插件图标，Chrome扩展程序页显示

browser_action：指定插件在Chrome工具栏中的显示信息

default_icon：图标
default_title：标题
default_popup：弹出页


permissions：权限

注意：如果我们需要向服务器请求数据，就需要在permissions中添加请求数据的接口，否则会报跨域请求的限制。但是如果需要向多个接口请求数据，建议直接按我的方式书写匹配规则，这样不管多少接口都适用
popup.html
popup页面是当用户点击插件图标时，展示在图标下方的页面

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="


    
    Weather
    


    
        
            北京
            09:00发布
            
                
                8℃
                晴
            
            
        
        
            
        
    
    
    

" title="" data-original-title="复制">
      
      
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>Weather</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div id="today">
            <h1 id="city">北京</h1>
            <h3 id="updateTime">09:00发布</h3>
            <div id="pic">
                <img src="./imgs/0.svg" alt="" />
                <p>8℃</p>
                <p>晴</p>
            </div>
            <ul id="info"></ul>
        </div>
        <div id="Future">
            <ul id="list"></ul>
        </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
这里我们使用了jQuery，方便对dom元素进行操作，注意我们不能直接在html里写js代码，只能通过外部引用的方式引入js文件。
main.js
ajax请求接口数据并渲染到popup页面中去，这里使用的是心知天气的api接口，但是发现使用它提供的免费数据api只能获取最多三天的天气预报数据，而且默认提供的图标不是我想要的风格，需调用多个接口才能实现基本功能。后来发现它也有提供插件的服务，只需要简单的几行js代码就可以实现酷炫天气效果，在控制台Network分析面板提取了它的api接口，可获取近五天的天气情况，一个接口就可以很方便地实现所需要的功能，我这里代码使用了ES6模板字符串，减少了对字符串拼接的操作

      
      
      new Date(last_update).getMinutes():"0"+new Date(last_update).getMinutes(),

        aqi = air.aqi,
        quality = air.quality;
        $(daily).each(function(index, el) {
            var date = new Date(this.date),
            i = date.getDay(),
            month = date.getMonth()+1,
            today = date.getDate();
            var day = index === 0?"今天":(index===1?"明天":week[i]);
            $("#list").append(`
                
                    
                        ${day} ${month}/${today}
                    
                    
                        
                        ${this.text_day}/${this.text_night}
                    
                    
                        ${this.low}/${this.high}℃
                    
                
                `);
        });
        $("#city").text(city);
        $("#updateTime").text(hour+":"+minutes+"发布");
        $("#pic").find("img").attr("src","./imgs/"+code+".svg").end().find('p').First().text(temperature+"℃").next().text(text);
        $("#info").html(`
            ${wind_direction}风${wind_scale}级
            空气${quality}${aqi}
            相对湿度${humidity}
            `);
    }
});" title="" data-original-title="复制">
      
      
VAR week = ['周日','周一','周二','周三','周四','周五','周六'],
api="http://widget.thinkpage.cn/api/weather?flavor=bubble&location=WX4FBXXFKE4F&geolocation=enabled&position=top-right&;margin=0px%200px&language=zh-chs&unit=c&theme=chameleon&uid=U3816AF56B&hash=aa5b2d23DF45bcc88f28908eCF64e0a5";

$.ajax({
    url:api,
    type:"GET",
    success:function(d){
        var w = d.weather,
        city = w.location.name,
        air = w.air.city,
        now = w.now,
        daily = w.daily,

        text = now.text,
        code = now.code,
        temperature = now.temperature,
        humidity = now.humidity,
        wind_direction = now.wind_direction,
        wind_scale = now.wind_scale,
        last_update = now.last_update,
        hour = new Date(last_update).getHours()>=10?new Date(last_update).getHours():"0"+new Date(last_update).getHours(),
        minutes = new Date(last_update).getMinutes()>=10?new Date(last_update).getMinutes():"0"+new Date(last_update).getMinutes(),

        aqi = air.aqi,
        quality = air.quality;
        $(daily).each(function(index, el) {
            var date = new Date(this.date),
            i = date.getDay(),
            month = date.getMonth()+1,
            today = date.getDate();
            var day = index === 0?"今天":(index===1?"明天":week[i]);
            $("#list").append(`
                <li>
                    <div class="date">
                        ${day} ${month}/${today}
                    </div>
                    <div class="weather">
                        <img src="./imgs/${this.code_day}.svg" alt="">
                        <span>${this.text_day}/${this.text_night}</p>
                    </div>
                    <div class="temPRange">
                        ${this.low}/${this.high}℃
                    </div>
                </li>
                `);
        });
        $("#city").text(city);
        $("#updateTime").text(hour+":"+minutes+"发布");
        $("#pic").find("img").attr("src","./imgs/"+code+".svg").end().find('p').first().text(temperature+"℃").next().text(text);
        $("#info").html(`
            <li>${wind_direction}风<p>${wind_scale}级</p></li>
            <li>空气${quality}<p>${aqi}</p></li>
            <li>相对湿度<p>${humidity}</p></li>
            `);
    }
});
最后，祝大家新年快乐，2017和你一起~~~