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
 
  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>weather</title>
  5. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  6. <script type="text/javascript">
  7. function init() {
  8. //$id = "101070201";//此处是大连的城市ID，可以去weather.com.cn找到对应的weather city ID
  9. //$url = "http://m.weather.com.cn/data/" + $id + ".html";//接口URL
  10. // 利用下载服务器端脚本来间接解决跨域访问问题
  11. $.getScript(
  12. 'http://61.4.185.48:81/g/',
  13. function(){
  14. $.get("http://m.weather.com.cn/data/" + id + ".html",
  15. function(data) {
  16. window.localStorage.weather = data;
  17. }
  18. );
  19. }
  20. );
  21. }
  22. window.setInterval("init()", 5*60*1000);
  23. </script>
  24. </head>
  25. <body>
  26. </body>
  27. </html>
 
popup.html
 
  1. <html>
  2. <head>
  3. <meta charset="GB2312">
  4. <title>weather</title>
  5. <link rel="stylesheet" type="text/css" href="style/popup.css"/>
  6. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  7. <script type="text/javascript">
  8. function init() {
  9. var data = $.parseJSON(localStorage.weather);
  10. var weatherinfo = data["weatherinfo"];
  11. var datearray = ["", weatherinfo["date_y"], "第二天", "第三天", "第四天", "第五天", "第六天"];
  12. $("#cityname").html(weatherinfo["city"] + "城市天气预报");
  13. for (i = 1; i <= 6; i++) {
  14. var divid = "#div" + i;
  15. $(divid).append(datearray[i]).append("<br>");
  16. var imgurl = "http://m.weather.com.cn/weather_img/" + weatherinfo["img"+(i*2-1)] + ".gif";
  17. $(divid).append('<img src="' + imgurl + '"/>').append("<br>");
  18. $(divid).append(weatherinfo["temp" + i]).append("<br>");
  19. $(divid).append(weatherinfo["weather" + i]);
  20. }
  21. }
  22. </script>
  23. </head>
  24. <body onload="init()">
  25. <div id="cityname"></div>
  26. <hr></hr>
  27. <div id="div1" class="weatherdiv"></div>
  28. <div id="div2" class="weatherdiv"></div>
  29. <div id="div3" class="weatherdiv"></div>
  30. <div id="div4" class="weatherdiv"></div>
  31. <div id="div5" class="weatherdiv"></div>
  32. <div id="div6" class="weatherdiv"></div>
  33. </body>
  34. </html>
 
popup.css
 
  1. html {
  2. height: 180px;
  3. width: 700px;
  4. }
  5. #cityname {
  6. text-align: center;
  7. font-size: 20px;
  8. font-weight: bold;
  9. margin: 5px;
  10. }
  11. .weatherdiv {
  12. float: left;
  13. width: 15%;
  14. margin: 5px;
  15. }
 
5.调试\打包\安装
 
关于Chrome浏览器下开发的调试：
 
普通页面的调试：用console.log(obj);打印任意JS对象。之后在工具->JavaScript控制台进行调试。
 
插件开发的调试：打开活动视图bg.html。修改后，可以点击“重新载入”重新加载我们的插件。
 

 
在Chrome浏览器中，选择工具->扩展程序->开发模式->打包扩展程序
 
选择插件的根目录，打包后会产生压缩安装包crx和密钥文件pem。
 
 
安装方法很简单，直接把crx文件拖到chrome浏览器窗口里就可以了。
 
 
6.最终效果图
 

http://blog.csdn.net/dc_726/article/details/7547871

我的第一个Chrome插件：天气预报应用的更多相关文章

  1. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  2. chrome 浏览器插件开发（一）—— 创建第一个chrome插件

    最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...

  3. 我的项目：一个chrome插件的诞生记，名字叫jumper

    选课是个问题,为了选课,便有了以下的故事. 最开始,萌生想法于2013年7月. 接着网上了解了chrome的结构知识,却发现例子是假的. 幸好有之前师兄的一个同功能插件开源,但代码写得很乱,我喜欢逻辑 ...

  4. 为了少点击几次，自己写了一个Chrome插件

    缘由 chrome应用商店有三款二维码插件,自己一直使用的第一款.这三款插件有且只有一个功能就是生成当前页面的URL的二维码. 其实这个功能基本上满足了需要移动端开发在微信里打开页面进行调试的情况. ...

  5. 开发一个chrome插件：将百度搜索热点屏蔽掉！

    每次百度搜索,搜索结果的右边总是出现些乱七八糟的搜索热点(推的都是些什么玩意,高校替课和我有毛关系,几个悲伤的热点我用星号顶掉了). 强迫症想把它隐藏掉,我用的是chrome浏览器,受adblock( ...

  6. js写一个chrome 插件

    访问网站的时候,最烦的就是一些弹窗和广告.于是,就想着能不能在访问特定网站的时候,执行一段js脚本,去除页面的广告.于是乎,好像 chrome 插件可以实现. 这里,以 百度 的网站为例 新建 sim ...

  7. 菜鸟写的第一个chrome插件

    一.新建一个文件夹,用来放插件的代码 二.首先新建配置文件manifest.json // 开发参考:http://open.chrome.360.cn/extension_dev/overview. ...

  8. Chrome插件（Extensions）开发攻略

    本文将从个人经验出发,讲述为什么需要Chrome插件,如何开发,如何调试,到哪里找资料,会遇到怎样的问题以及如何解决等,同时给出一个个人认为的比较典型的例子——获取网页内容,和服务器交互,再把信息反馈 ...

  9. Chrome插件: 网站收藏

      在工作中我们会收藏很多网址.以前一直都是用的chrome里面的收藏夹.后面觉得一点都不方便.看一下Chrome插件开发挺容易入手的所以自己写了一个Chrome插件. 基于:Angularjs + ...

随机推荐

  1. shell脚本专题之-----------全自动编译安装mysql（免安装版）

    mysql的编译安装,在博客 开源服务专题之--------mysql的编译安装 中已经说明了,但是还是比较麻烦,尤其是一大堆命令,来手动执行,稍有不慎,就会出错.生产上一般都是先在本地测试环境进行自 ...

  2. METHODS OF AND APPARATUS FOR USING TEXTURES IN GRAPHICS PROCESSING SYSTEMS

    BACKGROUND The technology described herein relates to methods of and apparatus for using and handlin ...

  3. View的绘制顺序

    1.写在 super.onDraw() 的下面 把绘制代码写在 super.onDraw() 的下面,由于绘制代码会在原有内容绘制结束之后才执行,所以绘制内容就会盖住控件原来的内容. 2.写在 sup ...

  4. 下面介绍一个 yii2.0 的 Rbac 权限设置，闲话少说，直接上代码，

    1.首先我们要在组件里面配置一下 Rbac ,如下所示(common/config/main-local.php或者main.php).  'authManager' => [  'class' ...

  5. 关于linux下如何使用svn 客户端

    1 yum install -y subversion (下载svn) 2 svn chekout "你的svn地址" 然后会询问? 我也不知道是嗄意思 , 大体就是权限什么乱七八 ...

  6. 衡量镜头解像能力性能的指标-MTF曲线

    MTF(Modulation Transfer Function,模量传递函数),是目前分析镜头解像能力的方法,可以用来评判镜头还原物体对比度的能力.说到MTF,不得不先提一下衡量镜头性能的两在重要指 ...

  7. 三星260亿美元的豪赌：想垄断DRAM和NAND闪存市场（规模经济让对手难以招架）

    腾讯科技讯 据外媒报道,经过50年的发展,半导体市场仍然显得非常活跃,它在今年有望增长20%.随着高增长而来的是供应短缺,这就是DRAM和闪存价格为什么今年会上涨的原因. 三星在DRAM和闪存市场占有 ...

  8. iOS 5.1.1 设备不能安装AdHoc问题版本号

    之前苹果更新了审计规范,要求必须支持64通过苹果的审核权限位架构的应用.     但运营商表示反馈.使用iOS5.1.1该系统无法安装我们的包Adhoc版本号.     认为非常莫名.由于我们在Dep ...

  9. Qt5.4.1在windows7配置Android开发环境（阳光柠檬_）

    网上的说法有些时间比较久远,软件更新又快,配置路上总有一些坎坷. 自己亲自尝试了一遍,记录下来. 所需的软件: 1. qt-opensource-windows-x86-android-5.4.1.e ...

  10. wpf 自定义窗口，最大化时覆盖任务栏解决方案

    原文:wpf 自定义窗口,最大化时覆盖任务栏解决方案 相信很多人使用wpf时会选择自定义美观的窗口,因此会设置WindowStyle="None" 取消自带的标题栏.但这样使用 W ...