试做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通知发出。
posted @ 2016-08-01 09:49  tdifg  阅读(516)  评论(0编辑  收藏