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. BZOJ 1003 ZJOI2006 物流运输trans 动态规划+SPFA

    标题效果:给定一个无向图.输送n日,有一天的某一时刻不能去,更换行考虑k,求总成本 一阶cost[i][j]用于第一i为了天j天正在同一航线的最低消费 这种利用SPFA处理 然后就是移动的法规问题 订 ...

  2. Oracle停止一个JOB

    Oracle如何停止一个JOB 相关表.视图 dba_jobs all_jobs user_jobs 包含登录用户所有的JOB信息 dba_jobs_running 包含正在运行job相关信息 注意 ...

  3. 在Windows中安装MinGW-w64（有图，一步一步）

    在Windows中安装MinGW-w64 发表回复 如需配合Sublime Text 3编译C程序, 请参考本站文章: 使用Sublime Text 3与MinGW-w64编译C语言程序 MinGW, ...

  4. GridLayout网格布局

    网格布局特点: l  使容器中的各组件呈M行×N列的网格状分布. l  网格每列宽度相同,等于容器的宽度除以网格的列数. l  网格每行高度相同,等于容器的高度除以网格的行数. l  各组件的排列方式 ...

  5. matlab 神经网络工具箱的实用

    0. 其他处理 计时: tic net = train(net, X, y); toc 1. 一个简单的 demo(单层感知器) P = [1, 1, 1, 1, 0, 0, 0, 0; 0, 0, ...

  6. 电讯“情趣me”为什么命途多舛？

        古人有句话叫做战争"鼓作气,再而衰,三而竭",意思是打仗必须"一气呵成".才干发挥最大实力,取得最好的战绩.所谓商场如战场,经商也是如此,近期,中国电信 ...

  7. 在.net core 的webapi项目中将对象序列化成json

    问题:vs2017 15.7.6创建一个基于.net core 2.1的webapi项目,默认生成的控制器继承自ControllerBase类 在此情况下无法使用Json()方法 将一个对象转成jso ...

  8. IOC学习1

    学习蒋金楠的 ASP.NET Core中的依赖注入(1):控制反转(IoC) 而来,这篇文章经典异常.一定要多读.反复读. 这篇文章举了一个例子,就是所谓的mvc框架,一开始介绍mvc的思想,由一个d ...

  9. Redis （一）Redis简介、安装部署

    Redis是一个开源的,先进的 key-value 存储可用于构建高性能,可扩展的 Web 应用程序的解决方案. 既然是key-value,对于Java开发来说更熟悉的是Map集合.那就有问题了,有M ...

  10. WPF 实现测量显示文本长度

    原文:WPF 实现测量显示文本长度 以工具类的方式实现: using System; using System.Windows; using System.Windows.Media; using S ...