试做Chrome插件——whatweb的chrome插件(从老博客转)

引子

最近一个月每天早上在学Javascript，刚学完基础语法和一点点jQuery，今天忍不住写个Chrome玩玩看看自己对JavaScript的掌握怎么样了。

目标

考虑了一下，打算做个小东西，但是总不能因为要做而做，没有意义。想到了做一个whatweb的探测插件。因为它们的官网上直接有查询功能，所以只需要一个post请求就行了。

思路

F12看一下包就知道只需要发一个post请求，里面包含一个target参数指向你需要查询的地址。然后会返回整个页面，所以解析一下取出第一个pre标签即可。

难点记录

最开始完全不知道插件怎么写，参考的是360的某某浏览器（他们的文档完全是chrome的翻译！我从未见过有如此厚颜无耻之人！），但是写了半天才发现这套文档已经过时了很久。最后没办法，看了下大致思路，然后对着英文的api文档写出了代码。其实只要明白了几个关键点，剩下的就是如何调用浏览器api而已。

效果图片

关键代码

$(document).ready(function(){
	chrome.tabs.query({active:true,currentWindow:true},function(xxx){
		var current_url =  xxx[0].url;
		data = {'target': current_url};
		$.post("http://whatweb.net",data,function(result){
			$('#show').html($(result).find('pre')[0].innerHTML.replace(/],/g,'],<br/>'));
		});
	});	
});

就是这么简单的代码……

存在问题

依靠别人的服务器，而且人家做了限制，所以一个站点几分钟内不能再查。所以下个版本打算加上设置页面，可以设置自己的服务器页面，服务器只需要调用下whatweb返回结果就行，很好写。

下载地址

链接：http://pan.baidu.com/s/1pJ1f8Qf 密码：3vxe

第二版

下载地址

链接：http://pan.baidu.com/s/1dDEX9dR 密码：dka0

更新

1. 可自定义服务器地址，注意服务器这里需要接受一个POST请求，参数是target，内容是目标url，返回应该是一个html格式文本，其中用pre标签修饰结果。
2. 增加一小时提醒一次时间的功能，提醒会由Chrome通知发出。