未加星标

Chrome插件开发――本地天气

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

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

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

目录结构:

├── css │ └── main.css ├── imgs │ ├── icon-128.png │ ├── icon-16.png │ ├── icon-19.png │ └── icon-38.png ├── js │ ├── jquery.js │ └── main.js ├── manifest.json └── popup.html

效果图:


Chrome插件开发――本地天气
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 页面是当用户点击插件图标时,展示在图标下方的页面

<!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 文件, css 也一样

main.js

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

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和你一起~~~

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Chrome服务器jQuery数据UT北京
分页:12
转载请注明
本文标题:Chrome插件开发――本地天气
本站链接:http://www.codesec.net/view/520886.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(40)