Chrome插件开发练习

manifest.json的内容：

{
"name" : "My First Extension",
"version" : "1.0",
"manifest_version" : 2,
"description" : "The first extension that I made.",
"browser_action" : {
"default_icon" : "image/icon.png",
"default_popup" : "popup.html"
},
"permissions" : [
"http://m.weather.com.cn/*"
]
}

popup.js的内容

(function(cityName){var prefixURL = 'http://m.weather.com.cn/data/';var prefixURLCurrent = 'http://m.weather.com.cn/data/sk/';var surfix = ".html";var cityCode;switch(cityName){case 'dalian':cityCode = '101070201';}var wholeURL = prefixURL + cityCode + surfix;var configuration = {'dataType' : 'json','type' : 'get', // Here, must be get method.'url' : wholeURL,'crossDomain' : true,'timeout' : 60000,'success' : successCallback,'error' : errorCallback};$.ajax(configuration);})('dalian');/*** * @param data* @param textStatus*/
function successCallback(data, textStatus){/*<tr id="day-1-top"><td rowspan="2" class="date">22日星期三</td><td class="time">白天</td><td class="phenomena-image-1">图</td><td class="phenomena">多云</td><td class="temperature">高温20C</td><td class="wind-direction">东风</td><td class="wind-force">4-5级</td></tr><tr id="day-1-bottom"><td class="time">夜间</td><td class="phenomena-image-2">图</td><td class="phenomena">多云</td><td class="temperature">低温13C</td><td class="wind-direction">东南风</td><td class="wind-force">4-5级</td></tr>*/var table = $('#forecast_table');var info = data.weatherinfo;$('#city_name').text(info.city);for(var n = 1; n < 7; n++){// 风力var windForce = info['fl' + n].split("转");// 温度var temperature = info['temp' + n].split('~');// 风向var windDirection = info['wind' + n];var reg = new RegExp("[0-9]", "g");var result = reg.exec(windDirection);var directionStr = windDirection.substring(0, result['index']).split('转');var topRow = $('<tr id=day-' + n + '-top></tr>').appendTo(table).append('<td rowspan="2" class="date">' + info.date_y + '</td>').append('<td class="time">白天</td>').append('<td class="phenomena-image-1"></td>').append('<td class="phenomena">' + info['img_title' + (2 * n - 1)] + '</td>').append('<td class="temperature">' + temperature[0] + '</td>').append('<td class="wind-direction">' + directionStr[0] + '</td>').append('<td class="wind-force">' + windForce[0] + '</td>');$('<tr id=day-' + n + '-bottom></tr>').insertAfter(topRow).append('<td class="time">夜间</td>').append('<td class="phenomena-image-1"></td>').append('<td class="phenomena">' + info['img_title' + 2 * n] + '</td>').append('<td class="temperature">' + temperature[1] + '</td>').append('<td class="wind-direction">' + (directionStr[1] ? directionStr[1] : directionStr[0]) + '</td>').append('<td class="wind-force">' + (windForce[1] ? windForce[1] : windForce[0]) + '</td>');}
}function errorCallback(request, textStatus, errorThrown){console.info(textStatus);
}

popup.html的内容：

<!doctype html>
<html>
<head>
<title>Hello</title>
<link type="text/css" rel="stylesheet" href="style/popup.css">
</head>
<body><div class="container"><div id="city_name"></div><table id="forecast_table" class="forecast-table"><tr id="title_row" class="title-row"><td colspan="2" class="date-title">日期</td><td colspan="2" class="phenomena-title">天气现象</td><td class="temperature-title">气温</td><td class="wind-direction-title">风向</td><td class="wind-force-title">风力</td></tr></table></div>
</body>
<script type="text/javascript" src="script/jquery-1.8.2.js"></script>
<script type="text/javascript" src="script/popup.js"></script>
</html>

popup.css的内容：

.container {width: 600px;height: 400px;
}.forecast-table {border-collapse: collapse;width: 100%;
}.forecast-table tr {border-top: 1px solid gray;border-bottom: 1px solid gray;border-left: 1px solid gray;
}.forecast-table tr td {border-right: 1px solid gray;text-align: center;vertical-align: middle;
}.forecast-table .title-row td {height: 30px;font-weight: bold;
}.forecast-table .title-row .date-title {/* width: 25%; */
}.forecast-table .title-row .phenomena-title {/* width: 25%; */
}.forecast-table .title-row .temperature-title {/* width: 20%; */
}.forecast-table .title-row .wind-direction-title {/* width: 15%; */
}.forecast-table .title-row .wind-force-title {/* width: 15%; */
}

返回的数据的结构：

Object {weatherinfo: Object}
weatherinfo: Object
city: "大连"
city_en: "dalian"
cityid: "101070201"
date: ""
date_y: "2013年5月22日"
fchh: "11"
fl1: "4-5级"
fl2: "4-5级"
fl3: "4-5级"
fl4: "4-5级"
fl5: "4-5级转5-6级"
fl6: "5-6级转4-5级"
fx1: "东风"
fx2: "东南风"
img1: "1"
img2: "99"
img3: "1"
img4: "2"
img5: "1"
img6: "99"
img7: "1"
img8: "99"
img9: "2"
img10: "7"
img11: "7"
img12: "1"
img_single: "1"
img_title1: "多云" // 今天白天的天气
img_title2: "多云" // 今天晚上的天气
img_title3: "多云" // 明天白天的天气
img_title4: "阴"   // 明天晚上的天气，依次类推
img_title5: "多云"
img_title6: "多云"
img_title7: "多云"
img_title8: "多云"
img_title9: "阴"
img_title10: "小雨"
img_title11: "小雨"
img_title12: "多云"
img_title_single: "多云"
index: "较舒适"
index48: "较舒适"
index48_d: "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。"
index48_uv: "最弱"
index_ag: "易发"
index_cl: "较适宜"
index_co: "舒适"
index_d: "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。"
index_ls: "适宜"
index_tr: "很适宜"
index_uv: "弱"
index_xc: "较不宜"
st1: "20"
st2: "12"
st3: "21"
st4: "12"
st5: "20"
st6: "13"
temp1: "20℃~13℃"
temp2: "22℃~15℃"
temp3: "21℃~15℃"
temp4: "20℃~14℃"
temp5: "19℃~14℃"
temp6: "19℃~15℃"
tempF1: "68℉~55.4℉"
tempF2: "71.6℉~59℉"
tempF3: "69.8℉~59℉"
tempF4: "68℉~57.2℉"
tempF5: "66.2℉~57.2℉"
tempF6: "66.2℉~59℉"
weather1: "多云" // 今天的天气
weather2: "多云转阴"  // 明天的天气，依次类推
weather3: "多云"
weather4: "多云"
weather5: "阴转小雨"
weather6: "小雨转多云"
week: "星期三"
wind1: "东风转东南风4-5级"
wind2: "东南风转南风4-5级"
wind3: "东北风转东南风4-5级"
wind4: "东南风4-5级"
wind5: "东南风4-5级转5-6级"
wind6: "东北风5-6级转4-5级"
__proto__: Object
__proto__: Object

Chrome插件开发练习 - 还未完成相关推荐

chrome 插件开发各种功能demo_Chrome 插件开发全攻略
Chrome 浏览器相信大家都用得比较多,有很多的优点,比如简洁.强大的开发者工具等,但是更让大家映像深刻的是有各种各样有趣.有用的插件,今天要给大家推荐的开源项目是 Chrome 插件开发全攻略,你 ...
vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
Chrome 插件开发-右键菜单开发实战演示，浏览器页面右键菜单选项设置，插件右键菜单点击插件名跳转主页设置
Chrome 插件开发 - 菜单选项浏览器页面右键菜单选项设置 ① 核心代码演示 ② 效果展示 ③ 详细参数文档插件右键菜单点击插件名跳转主页设置 ① 核心代码演示 ② 演示效果图浏览器页面右键 ...
Chrome插件开发之一: 搭建基本结构
Chrome插件开发之一: http://gdfans.net/?p=14 搭建基本结构作者:cmdbuf 发布时间:2010年05月28日发表评论 (6) 4阅读评论欢迎喜爱Chrome的谷友 ...
浙大教务网登录验证码自动填充--chrome插件开发
浙大教务网登录验证码自动填充--chrome插件开发一.前言二.验证码图像识别三.chrome插件开发四.插件使用和结果展示五.未来展望六.提示一.前言女朋友说"教务网每次登 ...
十分钟带你入门Chrome插件开发
一.简述我们所说的chrome插件一般都是指chrome扩展程序(Chrome Extension).chrome插件是一个用Web技术开发.用来增强浏览器功能的软件,它其实就是一个由HTML.CS ...
Chrome 插件开发小记
文章目录前言 manifest.json 常用配置项常用API 脚本注入网站与插件通信网站端插件端打包 .crx QA 其他参考链接前言群里闲逛,看见有人发了个图,感觉还挺有意思,抽空 ...
chrome插件开发时跨域问题解决方案
这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言-博主看到后会去代替大家踩坑的-接下来的几篇都是uni-app的小实战,有助于我们更好的去学 ...
chrome插件开发：为页面添加点击事件
目录上面说了些什么? 示例插件示例应用示例插件安装打开开发者模式添加本地插件包安装后的效果插件开发插件介绍目录结构 manifest.json index.html addToke ...
【Chrome插件开发】ReRes和request-interceptor源码赏析+复现+插件开发完整解决方案
文章目录引言亮点 Chrome插件ReRes源码赏析 Chrome插件request-interceptor background.js源码赏析技术选型配置stylelint vscode配置 ...

Chrome插件开发练习 - 还未完成

Chrome插件开发练习 - 还未完成相关推荐

最新文章

热门文章