chrome浏览器扩展

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。

运行截图: