三水清chrome

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

三水清 — Mon, 24 Oct 2011 01:10:02 +0000

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

chrome扩展应用开发教程系列：《开发chrome应用基础》《天气预报应用开发》《调试和打包上线》

chrome应用代码调试

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

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

chrome右上角“扳手图标”→工具→扩展程序
新开个chrome选项卡，然后在地址栏输入：chrome://extensions/回车
右键点击某个扩展，选择管理扩展程序

这样就会看到如下的扩展程序界面：

chrome扩展程序界面

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

如果chrome的扩展代码更新了可以点击“重新载入”就可以使用最新的代码了。

chrome扩展应用的打包

如果你使用 Chrome Developer Dashboard，发布你的扩展，你将无需自己打包。你自己打包一个crx的唯一原因是你需要发布一个非公开版本，比如一个alpha测试版本给测试用户。

当你打包一个扩展到时候。这个扩展获得唯一的一对密钥，其中的公共密钥用于标识这个扩展，私密密钥用于保存私密信息和给这个扩展的各个版本签名。当你需要更新版本只是，需要找个签名文件。

使用扩展程序打包

进入chrome的扩展程序页面，选择“打包扩展程序…”弹出窗口：

chrome扩展打包弹出框

选择chrome扩展所在的文件路径，如果是更新chrome应用需要选择签名文件所在的地址，点击确定打包即可，打包成功会收到如下图的提示信息：

chrome扩展打包成功提示

命令行打包chrome应用

chrome应用打包还支持命令行，只需要运行cmd，然后输入命令行参数即可完成打包过程。
–pack-extension指定扩展所在的文件夹，
–pack-extension-key指定私钥所在的文件位置，
如果你不想看到对话框，请使用 –no-message-box。
命令行打包示例：

chrome.exe --pack-extension=c:\\myext --pack-extension-key=c:\\myext.pem

到此一个chrome扩展就开发完成了。希望《chrome扩展应用开发教程》对你的chrome开发有帮助。

《开发chrome应用基础》

《天气预报应用开发》

《调试和打包上线》

声明：文章未声明为原创文章，本文链接 http://js8.in/841.html. 转载请注明转自 JS8.IN ™

随机文章

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

三水清 — Sun, 23 Oct 2011 04:14:24 +0000

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

chrome扩展应用开发教程系列：《开发chrome应用基础》《天气预报应用开发》《调试和打包上线》

开发前的准备

在开发之前需要统筹下，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的三个接口：

根据ip获取当前用户所在城市天气编号：http://61.4.185.48:81/g/
根据城市天气编号获取五天内天气：http://m.weather.com.cn/data/’+id+’.html
根据城市天气编号获取实时天气：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;
}

天气信息的处理

deal函数是处理天气信息，主要代码如下：

function deal(){
	if(doit===2){
		doit = 0;
	}else{
		return;
	}
	var img = new Image();
	img.onload = function(){
		var context = $('#canvas')[0].getContext('2d');
		context.drawImage(img,0,0,19,19);
                //通过canvas对象改变icon
		chrome.browserAction.setIcon({imageData:context.getImageData(0, 0, 19,19)});
	};
	img.src = "http://m.weather.com.cn/weather_img/"+json0.img1+".gif";
	var strTip = json1.city+'现在温度:'+json1.temp+'℃\n今天：'+
                         json0.weather1+json0.temp1+'\n明天：'+
                         json0.weather2+json0.temp2+'\n后天：'+
                         json0.weather3+json0.temp3;
	strTip += "\n最后更新时间："+new Date().toLocaleTimeString();
	chrome.browserAction.setTitle({title:strTip});//设置鼠标经过title
        //背景颜色
	chrome.browserAction.setBadgeBackgroundColor({color:[0, 97, 255,100]});
        //将实时气温显示在icon上面
	chrome.browserAction.setBadgeText({text:json1.temp.toString()});
}

background.html的全部代码




	
	weather

弹窗页面代码

弹窗页面是当用户点击icon后显示的内容，本实例应用中，点击icon当然是显示完整的天气信息了。数据就不需要再次请求了，在background.html中已经把每次请求下来的数据存入localStorage中，所以可以直接从localStorage中调用完整的天气数据，注意localStorage保存的是string，需要重新解析json哦，不多说了，直接上popup的代码：

到这里一个简单的chrome天气预报插件就已经完成了，当然还需要完善，比如添加设置页面，用户可以设置自己关心城市，添加手动刷新功能，需要做的事情还是很多的，哈哈~不多说了，主要的代码已经出来了，需要的也可以直接下载我打包好的代码来测试。

chrome天气预报插件扩展zip包

声明：文章未声明为原创文章，本文链接 http://js8.in/834.html. 转载请注明转自 JS8.IN ™

随机文章

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

三水清 — Sat, 22 Oct 2011 03:55:17 +0000

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

本教程会step by step的讲解我周末的做天气预报插件，教程包括三篇文章《开发chrome应用基础》《天气预报应用开发》《调试和打包上线》，通过实例讲解，希望对大家开发chrome插件有所帮助。本文只是介绍了chrome应用开发的冰山一角，更多的chrome应用开发技巧还是要自己动手查看下google的文档。

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来实现主要功能

上图显示了安装了应用扩展的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

manifest.json中的文件引用也是采用了相对路径的方式，如下面的代码”

{
"name": "My Extension",//名字
"version": "2.1",//版本
"description": "Gets information from Google.",//描述
"icons": { "128": "icon_128.png" },//icon
"background_page": "bg.html",//默认背景page
"permissions": ["http://*.google.com/", "https://*.google.com/"],//跨域请求域名
"browser_action": { 
    "default_icon": "icon.png" ,//界面显示的icon
    "default_title": "Weather",//界面icon鼠标滑过的title
    "default_popup": "popup.html"//弹窗界面
  }
}

chrome应用页面间的通信

前面说到了，一个应用中background页面和popup页面之间可以随意的访问相互的DOM，并且可以使用对方的函数。这是因为同一个应用所有页面是在同一个页面的同一个线程中运行的（来自貘大大的ppt），它们之间可以直接互相调用各自的函数。

可以使用 chrome.extension的方法来获取chrome应用中的页面，例如getViews()和getBackgroundPage()。一旦一个页面拥有了对这个应用中其它页面的引用，它就可以调用其它页面中的函数，并控制它们的DOM树。

chrome应用数据处理

数据存储

开发应用肯定会用到数据的处理，chrome是高级浏览器，所以我们可以使用html5的web storage api来存储数据。

跨域请求数据

作为一个web前端开发者，我们知道普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据，但是它们受限于同源策略。扩展可以不受该限制。

但是chrome应用可以做到跨域请求数据，这是chrome的内置机制保证的。任何chrome扩展只要它先获取了跨域请求许可，就可以进行跨域请求。这个获取跨域请求许可方式就是在manifest.json中配置跨域授权的域名，例如：

"permissions": [  "http://*.weather.com.cn/" ]

跨域允许设置可以使用完整域名, 例如:

“http://www.google.com/”
“http://www.gmail.com/”

或者使用模式匹配, 例如:

“http://*.google.com/”

这里还需要注意访问权限是根据访问协议(匹配模式里的http或者https或者其他协议名)及域名来授予的。例如某个扩展希望同时基于https和http协议访问某个域或者某些域，那么它必须分别获取基于这两种协议的访问允许(类似下面这样的声明):

"permissions": [
  "http://www.google.com/",
  "https://www.google.com/"
]

关于跨域的更多了解，可以访问下面四篇跨域相关文章：

跨域的安全性

跨域必然要面对的一个问题就是安全问题，尤其是chrome应用中，如果一个chrome应用留有安全隐患，那么所有在chrome浏览的页面都有危险，所以我们编写的背景页需要注意不要成为跨域脚本的牺牲品。例如下面的代码，就很危险：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // 警告! 这里有可能执行了一段恶意脚本!
    var resp = eval("(" + xhr.responseText + ")");
    // 警告! 这样处理有可能被注入恶意脚本!
    document.getElementById("resp").innerHTML = xhr.responseText;
    ...
  }
}
xhr.send();

要处理这些问题，需要用到json的解析器JSON.parse，在高级浏览器（比如chrome）中已经集成了JSON的操作，不需要引入json.js就可以操作了，所以上面的代码可以改写成：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // 警告! 这里有可能执行了一段恶意脚本!
    var resp = JSON.parse(xhr.responseText);
    // 警告! 这样处理有可能被注入恶意脚本!
    document.getElementById("resp").innerText= xhr.responseText;
    ...
  }
}
xhr.send();

今天关于chrome应用开发的教程就先写到这里，明天继续！

声明：文章未声明为原创文章，本文链接 http://js8.in/818.html. 转载请注明转自 JS8.IN ™

随机文章

css解决chrome 12px字号限制

三水清 — Sun, 19 Sep 2010 01:07:43 +0000

很早之前断桥残雪写过一篇关于chrome最小字体12px的解决方法，但是没有提出来在CSS中的解决方法，今天看了芒果的文章，终于找到了解决的方法了。要解决chrome中最小字体为12px的问题，我们可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决，比如下面的代码就可以成功的解决，通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下：

#chrome10px{
-webkit-text-size-adjust:none;
font-size:10px;
}

纠结了大半年的chrome字体12px的限制问题终于找到了CSS的解决方法了！
上图看看：

css解决chrome字体限制12px

声明：文章未声明为原创文章，本文链接 http://js8.in/625.html. 转载请注明转自 JS8.IN ™

随机文章

发现Chrome下提交表单的一个bug

三水清 — Wed, 02 Dec 2009 09:44:31 +0000

之前在文章《Chrome字体最小值12px问题及解决方法》中提到Chrome需要配置一些软件才能显示小于12px的字，默认如果在css中设置更小的字号却是12px。这个是要前端人员很头疼的事情，并且前端开发者除了css hack不能要每个用户都配置软件，以达到更好地浏览效果~

昨天晓亮对于我写的打印页面提出一个问题：在chrome下，打印按钮只能使用一次，今天我写了一个简单的表单，只有一个input的，加一个submit，可是chrome还是提交了一次，一次之后任你狂点，都不会做出任何的举动。

更有趣的是，我发现在iGoogle上的搜索按钮，在chrome也是存在类似的问题~不知道是chrome为了防止重复提交表单故意设计，还是Chrome的一个程序设计bug，不管怎样我还是把bug提交给了google官方，希望官方尽快给予答复。
特此记录一下~

声明：文章未声明为原创文章，本文链接 http://js8.in/356.html. 转载请注明转自 JS8.IN ™

随机文章

chrome字体最小值12px问题及解决方法

三水清 — Fri, 20 Nov 2009 02:30:31 +0000

昨天我修改自己的WordPress天气插件的时候，发现一个比较有趣的问题：chrome竟然最小的字体是12px，而小于12px的数值，百分比之类的都不起左右，都是显示12px。
对于这个问题，我上google搜索了半天也没有结果，本来因为是css出现了问题，测试了好多次都不行，于是最后来了个style=”font-size:10px”都没有显示成功，之后我写了一段代码在本地测试，还是不行，问了同事，同事都是表示不知道。
后来是怀疑自己的html声明写错了，可是更换了标准声明还是不行，至今还是表示疑惑，找到了客户端设置chrome的方法，而没有css hack的方法没有找到，希望高手给个css hack解决的方法。
WordPress天气预报插件地址：http://js8.in/mywork/weather
demo地址：http://js8.in/mywork/weather/demo.php?city=0532

解决方法

1.将chrome的界面语言改成英文,方法:扳手-选项-高级选项-更改字体和语言设置-语言-谷歌浏览器语言将这里的改成英语(美国)之类
2.

Basically, the Chrome browser is based on WebKit. There are some webkit internal font setting options for font family, font size, etc.
Using text editor to open “Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences”
You will find the “webkit”: { “webprefs”: { in the file. Those settings are for WebKit.
In my setting example:
“webkit”: {
“webprefs”: {
“default_fixed_font_size”: 11,
“default_font_size”: 12,
“fixed_font_family”: “Bitstream Vera Sans Mono”,
“minimum_font_size”: 12,
“minimum_logical_font_siz”: 12,
“sansserif_font_family”: “Times New Roman”,
“serif_font_family”: “Arial”,
“standard_font_is_serif”: false,
“text_areas_are_resizable”: true
}
}
The minimum_font_size and minimum_logical_font_size prevent Chrome to use very small font size for display.
Remember to close Chrome first before you edit the file, or the file you saved will be overwritten by Chome after exiting.

声明：文章未声明为原创文章，本文链接 http://js8.in/341.html. 转载请注明转自 JS8.IN ™

随机文章

	今天	明天	后天	第四天	第五天

实时气温:℃
风向:
湿度:

猜你喜欢：
chrome扩展应用开发教程之开发chrome应用基础	chrome扩展应用开发教程之调试和打包上线	发布WordPress来访者天气预报插件	六个精美的WordPress圣诞插件
无觅

猜你喜欢：
解决IE6不支持max-height的bug	css解决chrome 12px字号限制	最新版wBox 解决IE6 背景太小bug	解决IE下setTimeout传参数的bug
无觅

猜你喜欢：
Opera Chrome Safari浏览器的CSS Hack方法	使用if IE hack注释解决CSS以及JS的兼容问题	css解决chrome 12px字号限制	主流浏览器的CSS Hack方法整理
无觅