使用Chrome开发者工具注入Javascript实现额外功能

Chrome开发者工具介绍

在Chrome或Chromium浏览器里按下组合键Ctrl+Shift+I会打开开发者工具.

• Elements标签页，可以查看、编辑DOM元素。
  
• Network标签页，上可以查看HTTP请求以及回复报文的详信息，包括HTTP回应码、POST时提交的表单等。
• Sources标签页，设断点调试时会跳到这里。当在js脚本里加debug关键字设置断点时，会用到。
• Timeline标签页，没用过。
• Profiles标签页，没用过。
• Resources标签页，没用过。
• Audits标签页，没用过。
• Console标签页，在这里可以手工注入额外的脚本，在当前页面环境下执行。另外console.log方法输出的内容正存放于此。

说吧用户主页分析与注入

主页地址：http://www.shuobar.cn/user/index.html

打开该页面后，调出开发者工具，然后右键对准“保存联系人”按钮按下并松开，在弹出的菜单中选择审察元素。

这时自动跳转到Elements标签页，定位到该元素的HTML代码并高亮显示。

可以看到该元素添加了onclick事件的响应代码“books_add()”。

同样的原理可以得到姓名文本输入框的id为fname, 号码文本输入框的id为fphone。

通过查看页面源码得知该页面包含了jQuery-1.8.3. 因此测试用Javascript代码如下：

name = '名字';
$('#fname').val(name);
number = '15000000000';
$('#fphone').val(number);
books_add();

将上述四行代码合并成一行，复制粘贴到Console标签页中并回车，那么这四条代码就被注入执行了。

可以发现成功地上传了一条指定的通讯录条目。

批量导入用Javascript脚本

var contacts = [
['姓名1', '15000000000'],
['姓名2', '15000000001'],
['姓名3', '15000000002']];
var $fname = $('#fname');
var $fphone = $('#fphone');
for(var i = 0; i < contacts.length; i++) {
    var contact = contacts[i];
    $fname.val(contact[0]);
    $fphone.val(contact[1]);
    books_add();
}

contacts数组来源问题

从Android导出的通讯录为vcf格式，可以使用该Web应用转换成更易处理的csv格式， http://labs.brotherli.ch/vcfconvert/。推荐设置Separator为Tab字符，一般该字符不会出现在字段值中。

至于如何从简单的csv文本中提取出姓名与号码，并生成js数组就不赘述了，随便用你拿手的某种语言写都行。