UDN-企业互联网技术人气社区

板块导航

浏览  : 1175
回复  : 5

[原生js] Chrome插件开发——本地天气

[复制链接]
cat77的头像 楼主
  经常在 Chrome应用商店 下载扩展程序也就是插件,有时候在想可不可以自己也开发一个插件用用呢?本文就是在这样的背景下产生的,以一个生活必需的简单获取天气的插件作为开发演示,下面就开始我们的 Chrome插件开发之旅 吧!

  源码地址: https://github.com/leoyaojy/chrome-plugin-weather.git

  目录结构:
  1. ├── css
  2. │   └── main.css
  3. ├── imgs
  4. │   ├── icon-128.png
  5. │   ├── icon-16.png
  6. │   ├── icon-19.png
  7. │   └── icon-38.png
  8. ├── js
  9. │   ├── jquery.js
  10. │   └── main.js
  11. ├── manifest.json
  12. └── popup.html
复制代码

  效果图:
1.png

  manifest.json

  入口文件,每个 Chrome 插件都必须包含一个 manifest.json 文件,其中必须包含 name 、 version 和 manifest_version 属性
  1. {
  2.     "manifest_version": 2,
  3.     "version": "1.0",
  4.     "name": "weather",
  5.     "description": "a chrome extension for local weather",
  6.     "icons": {
  7.          "128": "imgs/icon-128.png",
  8.          "16": "imgs/icon-16.png"
  9.     },
  10.     "browser_action": {
  11.         "default_icon": {
  12.             "19": "imgs/icon-19.png",
  13.             "38": "imgs/icon-38.png"
  14.         },
  15.         "default_title": "weather",
  16.         "default_popup": "popup.html"
  17.     },
  18.     "permissions":[
  19.             "http://*/*",
  20.             "https://*/*"
  21.     ]
  22. }
复制代码

  属性说明:

  • manifest_version :此键指定此扩展使用的 manifest.json 的版本,目前必须是2
  • version :插件版本号
  • name :插件名称
  • description :插件描述
  • icons :插件图标, Chrome 扩展程序页显示
  • browser_action :指定插件在 Chrome 工具栏中的显示信息
  • default_icon :图标
  • default_title :标题
  • default_popup :弹出页
  • permissions :权限

  注意:如果我们需要向服务器请求数据,就需要在 permissions 中添加请求数据的接口,否则会报跨域请求的限制。但是如果需要向多个接口请求数据,建议直接按我的方式书写匹配规则,这样不管多少接口都适用
popup.html

  popup 页面是当用户点击插件图标时,展示在图标下方的页面
  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Weather</title>
  6.     <link rel="stylesheet" href="css/main.css">
  7. </head>
  8. <body>
  9.     <div class="container">
  10.         <div id="today">
  11.             <h1 id="city">北京</h1>
  12.             <h3 id="updateTime">09:00发布</h3>
  13.             <div id="pic">
  14.                 <img src="./imgs/0.svg" alt="" />
  15.                 <p>8℃</p>
  16.                 <p>晴</p>
  17.             </div>
  18.             <ul id="info"></ul>
  19.         </div>
  20.         <div id="future">
  21.             <ul id="list"></ul>
  22.         </div>
  23.     </div>
  24.     <script src="js/jquery.js"></script>
  25.     <script src="js/main.js"></script>
  26. </body>
  27. </html>
复制代码

  这里我们使用了 jQuery ,方便对 dom 元素进行操作,注意我们不能直接在 html 里写 js 代码,只能通过外部引用的方式引入 js 文件, css 也一样

  main.js

  ajax 请求接口数据并渲染到 popup 页面中去,这里使用的是 心知天气 的 API 接口,但是发现使用它提供的免费数据 api 只能获取最多三天的天气预报数据,而且默认提供的图标不是我想要的风格,需调用多个接口才能实现基本功能。后来发现它也有提供 插件 的服务,只需要简单的几行 js 代码就可以实现酷炫天气效果,在控制台 Network 分析面板提取了它的 api 接口,可获取近五天的天气情况,一个接口就可以很方便地实现所需要的功能,我这里代码使用了 ES6 模板字符串,减少了对字符串拼接的操作
  1. var week = ['周日','周一','周二','周三','周四','周五','周六'],
  2. 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";

  3. $.ajax({
  4.         url:api,
  5.         type:"GET",
  6.         success:function(d){
  7.                 var w = d.weather,
  8.                 city = w.location.name,
  9.                 air = w.air.city,
  10.                 now = w.now,
  11.                 daily = w.daily,

  12.                 text = now.text,
  13.                 code = now.code,
  14.                 temperature = now.temperature,
  15.                 humidity = now.humidity,
  16.                 wind_direction = now.wind_direction,
  17.                 wind_scale = now.wind_scale,
  18.                 last_update = now.last_update,
  19.                 hour = new Date(last_update).getHours()>=10?new Date(last_update).getHours():"0"+new Date(last_update).getHours(),
  20.                 minutes = new Date(last_update).getMinutes()>=10?new Date(last_update).getMinutes():"0"+new Date(last_update).getMinutes(),

  21.                 aqi = air.aqi,
  22.                 quality = air.quality;
  23.                 $(daily).each(function(index, el) {
  24.                         var date = new Date(this.date),
  25.                         i = date.getDay(),
  26.                         month = date.getMonth()+1,
  27.                         today = date.getDate();
  28.                         var day = index === 0?"今天":(index===1?"明天":week[i]);
  29.                         $("#list").append(`
  30.                                 <li>
  31.                                         <div class="date">
  32.                                                 ${day} ${month}/${today}
  33.                                         </div>
  34.                                         <div class="weather">
  35.                                                 <img src="./imgs/${this.code_day}.svg" alt="">
  36.                                                 <span>${this.text_day}/${this.text_night}</p>
  37.                                         </div>
  38.                                         <div class="tempRange">
  39.                                                 ${this.low}/${this.high}℃
  40.                                         </div>
  41.                                 </li>
  42.                                 `);
  43.                 });
  44.                 $("#city").text(city);
  45.                 $("#updateTime").text(hour+":"+minutes+"发布");
  46.                 $("#pic").find("img").attr("src","./imgs/"+code+".svg").end().find('p').first().text(temperature+"℃").next().text(text);
  47.                 $("#info").html(`
  48.                         <li>${wind_direction}风<p>${wind_scale}级</p></li>
  49.                         <li>空气${quality}<p>${aqi}</p></li>
  50.                         <li>相对湿度<p>${humidity}</p></li>
  51.                         `);
  52.         }
  53. });
复制代码

相关帖子

发表于 2017-1-11 15:09:49 来自手机 | 显示全部楼层
其实js如果遇到web安全类的项目,那就又要做牺牲了,无法读写文件,访问受限。。。哎。。。
使用道具 举报

回复

发表于 2017-1-11 23:44:06 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

发表于 2017-1-13 14:31:44 | 显示全部楼层
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部