编写chrome插件采集图片

   pic.hao123.com的图片看起来貌似很不错， 想把它做到Android手机上展示。首先要考虑的问题如果采集这些图片信息（如链接、名称、介绍等）并存储到自己的服务器。有一个简单的方法就是使用浏览器插件的方式，定向爬取这个网站上的网页，并分析html元素，提取所需要的信息，并生成json数据，发送到自己的服务器，由服务器存入数据库。

   简单的定向爬取可以把所有链接入栈并标记是否已经访问过，并对每个链接进行分析，一些不符合规则的链接或者已经访问过的链接可以直接跳过。

   使用什么样的规则来分析网页并提取元素呢？

   一是使用正则表达式，这个玩意很强大，不过编写起来有点麻烦，特别是用来分析元素时，得对每个元素应用正则表达式 -_-...

   二是使用jquery的选择器，这个东东很强大也很好用，可以直接提取出所有需要的item, 并对每个item再提取属性、文本等，所以分析元素时，可以考虑这个，大大的。

   实际过程中，可以使用以上两个方法的结合，比如要查找的数据被包含在一段json中，那可以先用正则表达式提取到json数据，然后将json数据转为json对象，然后再使用jquery的选择器功能，提取所需要的元素的值。例如（注释为使用正则表达式的方式，后来发现很多数据不在json里，所以就没有使用这个方法了）：

function extractPicture() {
	/*var searchFilter = "(\\[\\{.*?\\}\\])";
	var searchPattern = RegExp(searchFilter, "gi");
	var matchs = document.documentElement.innerHTML.match(searchPattern);
	if (matchs && matchs[0]) {
		console.log(matchs[0]);
		var dataObj= $.parseJSON(matchs[0]);//转换为json对象 
		alert(dataObj.length);//输出root的子对象数量 
	}
	*/

	var objectArray = new Array();
	var $items = $('.pic-item');
	console.log("item counts: " + $items.length + "\n");
	$items.each(function() {
		var object = new Object();
		$(object).attr('url', $(this).attr('src'));
		$(object).attr('image', $(this).attr('src'));
		$(object).attr('preview', $(this).attr('src'));
		$(object).attr('id', $(this).attr('pid'));
		$(object).attr('title', $(this).find('.pic-intro a').text());
		$(object).attr('referer', document.location.href);
		var width = $(this).find('.poster-link').css('width');
		if (width) {
			$(object).attr('width', width.substr(0, width.length - 2));
		}
		var height = $(this).find('.poster-link').css('height');
		if (height) {
			$(object).attr('height', height.substr(0, height.length - 2));
		}		
		objectArray.push(object);
	});
	console.log(JSON.stringify(objectArray));

}

　　关于如何编写Chrome插件， 可以参考 http://developer.chrome.com/extensions/docs.html