我的第一个Chrome插件：天气预报应用

2012-05-08 21:51 htc开发阅读(252) 评论(0) 编辑收藏举报

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.css

2.实时获得天气预报信息

首先通过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.html

<html>
<head>
     <meta charset="UTF-8">
     <title>weather</title>     
     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
     <script type="text/javascript">
     function 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);     
     </script>

</head>
<body>
     
</body>
</html>

popup.html

<html>
<head>
     <meta charset="GB2312">
     <title>weather</title>
     <link rel="stylesheet" type="text/css" href="style/popup.css"/>
     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
     <script type="text/javascript">
     function 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("<br>");
               var imgurl = "http://m.weather.com.cn/weather_img/" + weatherinfo["img"+(i*2-1)] + ".gif";               
               $(divid).append('<img src="' + imgurl + '"/>').append("<br>");
               $(divid).append(weatherinfo["temp" + i]).append("<br>");
               $(divid).append(weatherinfo["weather" + i]);               
          }          
     }
     </script>
</head>
<body onload="init()">
     <div id="cityname"></div>
     <hr></hr>
     <div id="div1" class="weatherdiv"></div>
     <div id="div2" class="weatherdiv"></div>
     <div id="div3" class="weatherdiv"></div>
     <div id="div4" class="weatherdiv"></div>
     <div id="div5" class="weatherdiv"></div>
     <div id="div6" class="weatherdiv"></div>
</body>
</html>

popup.css

html {
     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.最终效果图

刷新页面返回顶部

htc开发

我的第一个Chrome插件：天气预报应用

About