chrome扩展应用开发教程之调试和打包上线

今天的文章来说说chrome扩展开发的最后一步,代码调试和打包上线。

chrome应用代码调试

前端开发一样,chrome应用开发过程中也是需要代码调试的,用的调试工具自然是chrome的开发者工具,所以前端开发工程师应该很快就可以上手!

代码调试需要调出来chrome的扩展程序页面,有三种方式调出来chrome的扩展程序页面

  1. chrome右上角“扳手图标”→工具→扩展程序
  2. 新开个chrome选项卡,然后在地址栏输入:chrome://extensions/回车
  3. 右键点击某个扩展,选择管理扩展程序
    这样就会看到如下的扩展程序界面:
    chrome扩展程序界面

点击右上角的“开发者模式”,就会出现三个按钮,选择“载入正在开发中的扩展程序…”,在新开的窗口中找到自己开发的程序的路径,然后打开就可以导入开发中的chrome应用了。点击活动视窗,就可以打开chrome的开发中工具,前端开发工程师就可以进行调试了,跟调试前端页面一样哦。

chrome扩展应用开发教程之天气预报应用开发

上一篇讲到了chrome应用开发的基础知识,这一篇通过周末天气预报插件的开发来讲解下chrome扩展应用的开发过程。熟悉前端开发的童靴,知道了chrome应用开发的基本配置,应该很快就可以开发一个chrome应用,因为chrome插件就是纯粹的javascript和html!

开发前的准备

在开发之前需要统筹下,chrome天气预报插件的基本功能和界面,本插件,会这chrome顶部添加一个带有当前天气icon的应用,点击应用打开弹窗页面,天气的数据来自weather.com.cn的接口,所以我们需要跨域授权应用可以请求weather.com.cn的数据。于是chrome天气预报插件的manifest.json部分代码就出来了:

{
  "name": "Chrome Weather", //name
  "version": "0.1.0", //version
  "description": "weather.", //description
  "background_page": "background.html",//背景页面,应用请求数据,处理icon显示实时气温
  "browser_action": {
    "default_icon": "icon.png" ,//默认的icon
    "default_title": "Weather",//默认鼠标overtitle
    "default_popup": "popup.html"//弹窗页面
  },
    "permissions": [ "tabs", "http://*.weather.com.cn/" ]//跨域请求授权
}

先来个最终效果截图:
chrome天气预报应用最终效果截图

通过背景页面来请求天气数据

chrome天气插件用到了weather.com.cn的三个接口:

  1. 根据ip获取当前用户所在城市天气编号:http://61.4.185.48:81/g/
  2. 根据城市天气编号获取五天内天气:http://m.weather.com.cn/data/'+id+'.html
  3. 根据城市天气编号获取实时天气:http://www.weather.com.cn/data/sk/'+id+'.html
    chrome天气插件使用了jQuery开发,所以我们需要在html的头部添加jquery库:


    `

根据ip获取当前用户所在城市

当用户第一次运行chrome时候,需要请求背景页面,即background.html,这时,我们需要请求接口来获取当前用户所在的城市信息,以根据cityid获取天气情况。代码如下:

$.getScript('http://61.4.185.48:81/g/',function(){
    window.localStorage.cityid = id;//保存cityid到localStorage
    getWeather(id);//获取天气信息
});

根据cityid获取天气信息

上一步,涉及到了一个函数getWeather,这个函数的作用就是做一个xmlHttpRequest请求,获取当前cityid的天气信息,包括实时天气。getWeather中运用了send函数来做xmlHttpRequest请求。

function getWeather(id){
    var url = 'http://m.weather.com.cn/data/'+id+'.html';
    var url2 = 'http://www.weather.com.cn/data/sk/'+id+'.html';
    send(url,function(json){
        json0 = json;
        window.localStorage.json0 = JSON.stringify(json);
        doit++;
        deal();//处理json0
    }).call(this,url2,function(json){
        json1 = json;
        window.localStorage.json1 = JSON.stringify(json);
        doit++;
        deal();//处理json1
    });

}
function send(url,cb){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        var json = JSON.parse(xhr.responseText);//解析json,保证安全性
        typeof cb==='function' && json.weatherinfo && cb(json.weatherinfo);
        xhr = null;
      }
    }
    xhr.send();
    return arguments.callee;
}

chrome扩展应用开发教程之开发chrome应用基础

不得不说chrome做的真的不错,听了貘大大关于chrome插件机制的讲座,就有亲手做个chrome应用的冲动,这个周末终于抽时间做了一个简单的天气预报插件,原理还是很简单的,采用了weather.com.cn的数据,因为比较熟悉这个weather.com.cn的接口,所以很快就搞定一个简单的chrome天气预报应用了。废话不多说了,开始正文。

chrome应用开发基础知识

chrome扩展应用是由html、css和javascript组成的,所以chrome应用的门槛比较低,对于一个前端开发者,只要读懂了chrome的开发文档,就可以很快的上手一个chrome应用。

每个chrome扩展都应该包含下面的文件:

一个包括一个manifest.json文件,是个配置文件,json格式,通过manifest.json可以设置应用的icon,指定默认的background.html或者popup.html……
一个或多个html文件(除非这个应用是一个皮肤)
可选的一个或多个javascript文件
可选的任何需要的其他文件,例如图片

在开发应用(扩展)时,需要把这些文件都放到同一个目录下。发布应用(扩展)时,这个目录全部打包到一个应用(扩展)名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用(扩展),可以自动生成.crx文件。

下图是我天气预报插件的文件列表:
chrome天气预报插件目录结构

chrome应用界面控制

chrome应用会以browser action或page action的形式在chrome浏览器界面上展现出来。每个应用扩展最多可以有一个browser action或page action。当应用(扩展)的图标是否显示出来是取决于单个的页面时,应当选择page action;当其它情况时可以选择browser action。

例如gmail提醒应用使用了browser action,它在工具栏上增加一个图标:

gmail应用使用browser action提示

这个新闻阅读应用也使用了browser action,当点击时会弹出一个气泡窗口popup.html:
news使用的是popup的方式

另外chrome还包括了桌面提醒(gmail新邮件提醒),主题(chrome皮肤),应用设置页面(应用设置页面),选项卡页面(新选项卡页面)等多种界面形式,本文示例使用的是browser action和popup页面来做一个简单的应用。

chrome应用基本架构

绝大多数chrome应用会包含一个背景页面(background page),用来执行chrome应用扩展的主要功能。该背景页面时再manifest.json中设置的:

"background_page": "bg.html",//默认背景页面

chrome通过background.html来实现主要功能[/caption]

上图显示了安装了应用扩展的chrome。黄色图标代表的browser action和蓝色图标代表的page action。在background.html文件里定义了browser action和javascript代码。在两个窗口里browser action都可以工作。

背景页面并不是chrome应用中唯一的页面。例如,本例天气预报插件中还包括了一个弹窗页面(popup.html),此页面也是又html页面实现的。在应用内部还可以使用chrome.tabs.create()或者window.open()来显示内部的HTML文件。

chrome应用的弹窗界面也是可以在manifest.json中设置的:

"browser_action": {
    "default_icon": "icon.png" ,
    "default_title": "Weather",
    "default_popup": "popup.html"
  },

值得一提的是chrome应用里面的HTML页面可以互相访问各自DOM树中的全部元素,或者互相调用其中的函数。

下图显示了一个chrome应用的弹窗的架构。弹窗的内容是由HTML文件(popup.html)定义的web页面。它不必复制背景页面(background.html)里的代码,因为它可以直接调用背景页面中的函数!

chrome应用的弹窗界面

应用文件的引用

任何需要的文件都可以放到应用(扩展)中,但是怎么使用它们呢?一般的说,可以像在普通的HTML文件中那样使用相对地址来引用一个文件。下面的例子演示了如何引用images子目录下的文件myimage.png

<img src="img/myimage.png" alt="">