QQ群查看器--chrome浏览器扩展

源码及程序下载地址:http://pan.baidu.com/share/link?shareid=3636190804&uk=1678089569

关于如何创建一个最基本的 chrome扩展,就不细说了。可以参考:

360极速浏览器扩展开发文档:http://open.chrome.360.cn/extension_dev/overview.html

Chome浏览器扩展开发官方文档:https://developer.chrome.com/extensions/getstarted.html

下面说一下关键代码:

//popup.js

window.onload = function() {

         chrome.windows.getCurrent(function(currentWindow) {

                   chrome.tabs.query({active: true, windowId: currentWindow.id},

                            function(activeTabs){

                                     chrome.tabs.executeScript(activeTabs[0].id, {file: "./get_group_list.js", allFrames: false});

                            });      

         });

}

这段代码在扩展页面加载将会执行。作用是获取当前窗口下的活动标签页面,注入javascript代码,执行。

chrome.windows.getCurrent() 获取当前活动浏览器窗口,一个浏览器窗口包含多个标签页,详细参数及用法参考: https://developer.chrome.com/extensions/windows.html#method-getCurrent

chrome.tabs.query() 根据参数查询标签页。详细参数及用法参考:
https://developer.chrome.com/extensions/tabs.html#method-query

由于获取QQ群列表需要在QQ页面执行 Javascript 代码,所以就需要向QQ页面注入Javascript代码并执行。Chome提供了一个chrome.tabs.executescript() 方法动态地向页面注入JavaScript脚本并执行。详细参数及用法参考:
https://developer.chrome.com/extensions/tabs.html#method-executeScript

用于在QQ页面执行码在get_group_list.js中,在此之前,我们还需要知道,如何获取用户所加的QQ群。当然,QQ用户需要先加入几个群,总得有群才能获取吧。呵呵。随便打开一个QQ群空间。在页面顶端就可以查看到用户所加的群。用Fiddler http调试工具抓取http包。分析得到

http://qun.qzone.qq.com/cgi-bin/get_group_list?callbackFun=_GetGroup&uin=453867443&random=0.18549695408314274&g_tk=1705493508

服务器返回json格式的数据,包含了用户所加的群信息。上面的地址中g_tk是一个关键的参数,没有这个参数获取不到数据。计算这个参数的代码在QQ群空间的页面中。

计算g_tk时需要一个Cookie (skey),下面的的代码是获取一个Cookie

function get_cookie(name){

    var r = new RegExp("(?:^|;+|\\s+)"+name+"=([^;]*)");

    var m=document.cookie.match(r);

    return(!m?"":m[1]);

}

计算 g_tk

function get_gtk(){

    var hash=5381;

    str = get_cookie("skey");

    

    for(var i=0, len=str.length; i < len; ++i){

        hash+=(hash<<5)+str.charCodeAt(i);

    }

    return hash&0x7fffffff;

}

这两段代码都可以在QQ群空间页面中查到,我把它提取了出来,稍作了修改。

有了这些就可以通过 ajax向腾讯服务查询QQ群了

//get_group_list.js

//定义一个回调函数

function _GetGroup_Callback(obj) {

    //向扩展送一个请求。

    chrome.extension.sendRequest(obj);

}

var get_group_list_url = "http://qun.qzone.qq.com/cgi-bin/get_group_list?callbackFun=_GetGroup&uin=" + get_login_uin() +"&random=0.18549695408314274&g_tk=" + get_gtk();

xhr = new XMLHttpRequest();

xhr.open("GET", get_group_list_url);

xhr.onreadystatechange = function() {

    if(xhr.readyState == 4) {

        eval(xhr.responseText);

    }

} 

 xhr.send();

由于返回的数据有一个回调函数,所以需要定义一个回调用,并用 eval 进行调用。

获取到了数据之后,就要把数据传回给扩展了,chrome提供了一个chrome.extension.sendRequest() 方法,可以向扩展发送消息。详细参数及用法参考:

在扩展中需要定义一个监听器,以便监听页面发来的消息。

//popup.js

chrome.extension.onRequest.addListener(function(obj){

    //显示群列表

    show_group_list(obj);

});

显示获取到的数据就很简单了,会点html,css,javascript都会做的。不再说了。程序有个缺陷,只能在打开的QQ空间,QQ群空间,WebQQ页面下才能获取到数据,具体是因为需要用的这些页面的Cookie。

运行截图:

chrome浏览器扩展--QQ群查看器(1)的更多相关文章

  1. Chrome浏览器扩展开发系列之十九:扩展开发示例

    翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...

  2. Chrome浏览器扩展开发系列之七:override页面

    Chrome浏览器通常提供了一些默认页面,如标签管理器页面chrome://bookmarks.浏览历史记录页面chrome://history或新建Tab页面chrome://newtab等. Ch ...

  3. wpf 仿QQ图片查看器

    参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...

  4. 哇塞,原来自己写 Google Chrome 浏览器扩展(插件)这么容易!

    1. 首先新建一个记事本,命名为 manifest.json,这是写 Google Chrome 浏览器扩展必须的文件 { "manifest_version": 2, " ...

  5. Chrome浏览器扩展开发系列之十四

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59      阅读:1361      评论:0      收藏:0    ...

  6. Chrome浏览器扩展开发系列之十八:扩展的软件国际化chrome.i18n API

    i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...

  7. Chrome浏览器扩展开发系列之十七:扩展中可用的chrome.events API

    chrome.events中定义了一些常见的事件类型,可以供Chrome浏览器扩展程序发出对应的事件对象. 对于关注的事件,首先要通过addListener()在对应的事件上注册监听器,示例如下: c ...

  8. Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  9. Chrome浏览器扩展开发系列之十五:跨域访问的XMLHttpRequest对象

    XMLHttpRequest对象是W3C的标准API,用于访问服务器资源.XMLHttpRequest对象支持多种文本格式,如XML和JSON等.XMLHttpRequest对象可以通过HTTP和HT ...

随机推荐

  1. android开发之路05

    一.获取res资源文件下values中内容的方式: 1.string.xml文件-------------------------------> 取值方式:getResource().getSt ...

  2. [Doc ID 1666646.1]如何使用功能管理员清除缓存?

    文档内容   目标   解决方案 适用于: Oracle iProcurement - 版本 11.5.1 到 12.0.0 [发行版 11.5 到 12] 本文档所含信息适用于所有平台 目标 怎样通 ...

  3. Js获取下拉框的值和文本select

    $("#camera").change(function () {        var obj = this;        $("#camera_Name" ...

  4. CentOS 6.x安装gcc 4.8/4.9/5.2

    1.gcc 4.8 cd /etc/yum.repos.d wget http://people.centos.org/tru/devtools-2/devtools-2.repo -gcc -bin ...

  5. Python 基础【第九篇】运算

    Python的运算符比较通俗和其他语言的几乎没什么区别 一.算数运算符 " + " 加法运算 >>> 1+3 4 加法运算扩展 "增强赋值操作" ...

  6. [引]ASP.NET MVC 4 Content Map

    本文转自:http://msdn.microsoft.com/en-us/library/gg416514(v=vs.108).aspx The Model-View-Controller (MVC) ...

  7. java常用linux命令

    1.ifconfig查看ip 2.查询 例如:find / -name httpd.conf 3.查看是否有tomcat进程 ps –ef|grep tomcat 来查看是否有tomcat进程 4.杀 ...

  8. hadoop的相关资料链接

    hadoop的资料整理博客 http://www.itpub.net/thread-1588509-1-1.html

  9. nodejs 微信中使用file组件上传图片在某些机型上点击无反应

    看下下面的代码: <form action="/" class="file_upload" method="post" enctype ...

  10. 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...