动手写一款简单的chrome天气插件

shixinzhang 发布于2019-08-19 18:20 / 2793人阅读

摘要：极简天气一款简单的天气插件。属性说明指定文件格式的版本，在之后，应该都是扩展名称扩展版本号扩展的版本扩展列表图标指定扩展在工具栏中的显示信息。

极简天气

一款简单的chrome天气插件。

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

创建文件

新建weather文件夹，里面包含manifest.json，popup.html和images文件夹。images文件夹放16,48,128三种不同尺寸的图标

manifest.json内代码如下：

{
  "manifest_version":2,
  "name":"极简天气",
  "description":"极简天气预报",
  "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":"天气预报",
      "default_popup":"popup.html"
  },
   
}

popup.html的代码如下：




    
    天气


     
    Test

文件说明

manifest.json

必需文件，是整个扩展的入口，每个Chrome扩展都包含一个Manifest文件。Manifest必须包含name、version和manifest_version属性。

属性说明：

manifest_version指定文件格式的版本，在Chrome18之后，应该都是2

name扩展名称

version 扩展版本号

version扩展的版本

icons扩展列表图标

browser_action指定扩展在Chrome工具栏中的显示信息。

default_icon、default_title、default_popup依次指定图标、标题、对应的页面

Popup页面

Popup页面是当用户点击扩展图标时，展示在图标下面的页面。

打开chrome扩展程序界面，勾选"开发者模式",拖入weather文件夹，然后就可以看到weather扩展已经出现在chrome扩展程序列表了

同时，工具栏也出现了weather的图标，点击之后会弹出popup界面:

完善页面和样式

完善静态popup页面,模拟天气数据:




    
    天气


    
        
            厦门
            "
            +""+day.tmp.min+"~"+day.tmp.max+""
            +""+day.cond.txt_d+""     
        +""       
    }
    var today = ""+city+""
                +""
                    +""
                    +""+now.tmp+"℃"            
                +""
                +""
                    +""+now.cond.txt+""
                    +"风速 "+now.wind.spd+"   湿度 "+now.hum+"%"            
                +""
    
    document.getElementById("today").innerHTML = today;
    document.getElementById("wrap").innerHTML = dailyDom; 
}

这时，再点击weather图标，天气扩展基本上就完成了，不过因为和风API有请求次数限制，也为了减少请求，这里做一下数据缓存。

var _time = new Date().getTime()-(60*60*1000*2); //接口次数有限，两小时请求一次
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天气扩展就完成了，是不是比想象中更简单?如果觉得本文有帮助，请github赏个star~

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79477.html

推荐几款好用的Chrome插件

摘要：今天就来跟大家分享一下工作中用到的几款插件。是一款功能强大的网页调试与发送网页请求的插件。俗称油猴子，是一款功能非常强大的插件，他包含方便的脚本管理脚本概览设置多样性脚本自动更新安全兼容性同步编辑器语法检查快速开发卸载等功能。 ‘工欲善其事，必先利其器’。优秀的开发者不仅体现在其在技术方面的精通，还体现在其对各种开发工具的充分了解与使用，这会让其开发效率事半功倍。作为一个前端开发者，平...

fox_soyoung 2019-08-01 18:19 评论0 收藏0
推荐几款好用的Chrome插件

摘要：今天就来跟大家分享一下工作中用到的几款插件。是一款功能强大的网页调试与发送网页请求的插件。俗称油猴子，是一款功能非常强大的插件，他包含方便的脚本管理脚本概览设置多样性脚本自动更新安全兼容性同步编辑器语法检查快速开发卸载等功能。 ‘工欲善其事，必先利其器’。优秀的开发者不仅体现在其在技术方面的精通，还体现在其对各种开发工具的充分了解与使用，这会让其开发效率事半功倍。作为一个前端开发者，平...

since1986 2019-08-05 12:41 评论0 收藏0
推荐几款好用的Chrome插件

摘要：今天就来跟大家分享一下工作中用到的几款插件。是一款功能强大的网页调试与发送网页请求的插件。俗称油猴子，是一款功能非常强大的插件，他包含方便的脚本管理脚本概览设置多样性脚本自动更新安全兼容性同步编辑器语法检查快速开发卸载等功能。 ‘工欲善其事，必先利其器’。优秀的开发者不仅体现在其在技术方面的精通，还体现在其对各种开发工具的充分了解与使用，这会让其开发效率事半功倍。作为一个前端开发者，平...

lpjustdoit 2019-08-29 14:08 评论0 收藏0
推荐几款好用的Chrome插件

摘要：今天就来跟大家分享一下工作中用到的几款插件。是一款功能强大的网页调试与发送网页请求的插件。俗称油猴子，是一款功能非常强大的插件，他包含方便的脚本管理脚本概览设置多样性脚本自动更新安全兼容性同步编辑器语法检查快速开发卸载等功能。 ‘工欲善其事，必先利其器’。优秀的开发者不仅体现在其在技术方面的精通，还体现在其对各种开发工具的充分了解与使用，这会让其开发效率事半功倍。作为一个前端开发者，平...

wums 2019-08-21 18:32 评论0 收藏0
了解RoboMaster视觉组（三）视觉组使用的软件

摘要：视觉组接触的软件进行视觉开发会用到各种各样的软件开发环境辅助工具等，所以很有必要了解一些相关的快捷键命令使用技巧。没有这样保姆级的，并不存在一款能够自动为你生成的软件。一款录制屏幕的软件。 --NeoZng【neozng1@hnu.edu.cn】 3.视觉组接触的软件进行视觉开发会用到...

AlphaWallet 2021-10-08 10:04 评论0 收藏0