引子

最近一个月每天早上在学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通知发出。

试做Chrome插件——whatweb的chrome插件(从老博客转)的更多相关文章

  1. Trac常用插件描述! - wang_xf的Study home - 博客频道 - CSDN.NET

    Trac常用插件描述! - wang_xf的Study home - 博客频道 - CSDN.NET

  2. 如何通过Gitalk评论插件,5分钟为你的博客快速集成评论功能

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  3. 为什么你应该试试用Sublog写博客

    HI 这篇文章发布后,收到了一些反馈,在不同的阅读媒体上(浏览器,RSS,evernote)等,会有样式兼容问题,特别是之前的代码显示行号的实现方式,使用浮动code块,兼容问题比较严重,所以做了一个 ...

  4. 关于Chrome浏览器不能使用Java插件的问题

    最近测试的“上海电信宽带测速系统”中HTTP测试需要用到java插件,之前装过好多次插件,装好后还是提示java插件未安装,郁闷了N久,最近问题终于得到了解决,故做分享~ 关于Chrome浏览器不能使 ...

  5. chrome http Request Header 修改插件

    chrome http Request Header 修改插件 2013-05-31 11:03:03|  分类: JavaScript |  标签:chrome  extensions  chang ...

  6. Chrome 百度搜索热点过滤插件 - 开源软件

    学习时,为了搜集最全的中文资料,有时候不得不使用Baidu搜索引擎.在你还是个小菜鸡的时候你可能会花费大量时间在百度上! 但是,时间久了你会发现,你总会被网络上一些奇奇怪怪或者有趣的事情吸引过去而逐渐 ...

  7. chrome浏览器好用的插件

    1.Chrome批量保存所有选项卡网址 + 批量打开复制网址小插件 批量保存所有选项卡网址插件:Copy All Urls 经常搜索一些东西,下班时无法处理完所有网页内容,比如做笔记什么的,又不舍得关 ...

  8. Chrome,本地页面和插件

    今天测试一款Chrome插件,这款插件提供了一些本地页面做测试用,在解决一些技术问题之后,在插件的官网上可以测试成功了,但是在本地页面上测试时Chrome始终会拦截插件,即使在右上角的地址栏中允许该本 ...

  9. 【转】NPAPI 插件无法在 Chrome 42 版及更高版本上正常运行

    原文网址:https://support.google.com/chrome/answer/6213033 NPAPI 插件无法在 Chrome 42 版及更高版本上正常运行 您可以利用插件在浏览器中 ...

随机推荐

  1. NX二次开发-UFUN按类选择对话框UF_UI_select_with_class_dialog

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //按类选择对话框 char sCue[] = "按类选择对话 ...

  2. NX二次开发-NXOPEN工程图导出CAD图纸DxfdwgCreator *dxfdwgCreator1;

    没有什么可以看的,NXOPEN直接录制一下导出CAD就可以了.录制出来自己挑需要的代码拿过来改一下. NX9+VS2012 #include <NXOpen/Part.hxx> #incl ...

  3. ES6 箭头函数this指向

    箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使 ...

  4. CF1265B Beautiful Numbers

    题意 给一个长度为\(n\)的排列\(P\),求对于\(1\) 到 \(n\)中的每个数\(m\),是否能找到一段长度为\(m\)的区间使得区间内的数是一个\(1\)到\(m\)的排列. 输出一个\( ...

  5. go modules学习

    https://github.com/golang/go/wiki/Modules https://tonybai.com/2018/07/15/hello-go-module/ https://ww ...

  6. ionic:创建 APP

    ylbtech-ionic:创建 APP 1.返回顶部 1. ionic 创建 APP 前面的章节中我们已经学会了 ionic 框架如何导入到项目中. 接下来我们将为大家介绍如何创建一个 ionic ...

  7. Redis基于主从复制的RCE(redis4.x 5.x)复现

    使用docker建立redis 拉取镜像 运行 查看 可以连接,存在未授权 https://github.com/Ridter/redis-rce 发送poc i:正向连接 r:反弹 反弹成功

  8. 文本数据增量导入到mysql

    实现思路:       实现Java读取TXT文件中的内容并存到内存,将内存中的数据和mysql 数据库里面某张表数据的字段做一个比较,如果比较内存中的数据在mysql 里存在则不做处理,如果不存在则 ...

  9. java程序——CPU过高100%及内存泄露排查

    CPU过高 这类问题可以使用 top 命令观察一些,CPU 是不是都被 Java 程序占用了.比如下面这个截图: 服务器的 CPU 大多都被 Java 占用了.这正是我们之前生产上 CPU 过高的一个 ...

  10. qt5下面中文显示异常

    在源文件中插入# pragma execution_character_set("utf-8")即可