建站公司网站用什么好,天河建设网站企业,关注公众号一单一结兼职app,凡客诚品购物官网1.Chrome插件开发基础开发Chrome插件很简单#xff0c;只要会基本的前台技术HTML、CSS、JS就可以开发了。Chrome插件一般包括两个HTML页面background和popup。background页面只在启动浏览器加载插件时载入一次#xff0c;它不直接显示出来而是在后台运行。它包含了插件的主要…1.Chrome插件开发基础开发Chrome插件很简单只要会基本的前台技术HTML、CSS、JS就可以开发了。Chrome插件一般包括两个HTML页面background和popup。background页面只在启动浏览器加载插件时载入一次它不直接显示出来而是在后台运行。它包含了插件的主要逻辑收集或处理的结果可以保存到全局变量localStorage中传递给popup页面。popup页面就是点击插件图标后弹出的页面将用户需要的数据展示出来或者与用户交互。此外插件还应该包含有CSS和JS文件以及一些图片文件。插件的相关配置都保存到一个叫做manifest.json的文件中里面的配置是以JSON数据格式保存的。本文这个天气预报插件的源代码结构如下myplugin|--bg.html|--popup.html|--manifest.json|--img| |--icon.png|--js| |--jquery-1.7.2.min.js|--style|--popup.css2.实时获得天气预报信息首先通过http://61.4.185.48:81/g/获得城市编号。注意这个URL返回的是一个JS脚本其中变量id保存的是城市编号。之后通过http://m.weather.com.cn/data/[id].html获得城市天气预报。这个URL返回的是JSON数据格式如下{weatherinfo:{city:北京,city_en:beijing,date_y:2012年5月6日,date:,week:星期日,fchh:08,cityid:101010100,temp1:31℃~19℃,temp2:28℃~19℃,temp3:29℃~18℃,temp4:27℃~18℃,temp5:23℃~14℃,temp6:25℃~15℃,weather1:晴转多云,weather2:阴,weather3:多云,weather4:多云,weather5:多云转阴,weather6:阵雨转多云,img1:0,img2:1,img3:2,img4:99,img5:1,img6:99,img7:1,img8:99,img9:1,img10:2,img11:3,img12:1,...}}我们在bg.html中定时地获得到城市的天气信息保存到全局变量localStorage中。之后用户点击插件按钮时就可以通过popup.html看到实时的天气情况了。3.jQuery基础jQuery功能很多很强大本文例子中主要用jQuery来简化Ajax调用如getScript和get函数以及parseJSON函数将JSON字符串解析成JS对象另外就是$(#id)对DOM对象的访问。4.代码实现具体实现起来还要注意几点一是localStorage不能直接保存解析好的JSON对象因此bg.html要将字符串保存localStorage中popup.html自己解析后显示到页面上。二是要在manifest.json中将天气网站配置到permission中才可以在bg.html中跨域访问它。manifest.json{name: My First Extension,version: 1.0,description: The first extension that I made,permissions: [tabs, notifications,http://m.weather.com.cn/*],background_page: bg.html,browser_action: {default_icon: img/icon.png,default_popup: popup.html}}bg.htmlweatherfunction init() {//$id 101070201;//此处是大连的城市ID可以去weather.com.cn找到对应的weather city ID//$url http://m.weather.com.cn/data/ $id .html;//接口URL// 利用下载服务器端脚本来间接解决跨域访问问题$.getScript(http://61.4.185.48:81/g/,function(){$.get(http://m.weather.com.cn/data/ id .html,function(data) {window.localStorage.weather data;});});}window.setInterval(init(), 5*60*1000);popup.htmlweatherfunction init() {var data $.parseJSON(localStorage.weather);var weatherinfo data[weatherinfo];var datearray [, weatherinfo[date_y], 第二天, 第三天, 第四天, 第五天, 第六天];$(#cityname).html(weatherinfo[city] 城市天气预报);for (i 1; i 6; i) {var divid #div i;$(divid).append(datearray[i]).append();var imgurl http://m.weather.com.cn/weather_img/ weatherinfo[img(i*2-1)] .gif; $(divid).append().append();$(divid).append(weatherinfo[temp i]).append();$(divid).append(weatherinfo[weather i]);}}popup.csshtml {height: 180px;width: 700px;}#cityname {text-align: center;font-size: 20px;font-weight: bold;margin: 5px;}.weatherdiv {float: left;width: 15%;margin: 5px;}5.调试\打包\安装关于Chrome浏览器下开发的调试普通页面的调试用console.log(obj);打印任意JS对象。之后在工具-JavaScript控制台进行调试。插件开发的调试打开活动视图bg.html。修改后可以点击“重新载入”重新加载我们的插件。在Chrome浏览器中选择工具-扩展程序-开发模式-打包扩展程序选择插件的根目录打包后会产生压缩安装包crx和密钥文件pem。安装方法很简单直接把crx文件拖到chrome浏览器窗口里就可以了。6.最终效果图
