使用Chrome开发者工具注入Javascript实现额外功能
2015-03-13 15:26
471 查看
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代码如下:
将上述四行代码合并成一行,复制粘贴到Console标签页中并回车,那么这四条代码就被注入执行了。
可以发现成功地上传了一条指定的通讯录条目。
批量导入用Javascript脚本
contacts数组来源问题
从Android导出的通讯录为vcf格式,可以使用该Web应用转换成更易处理的csv格式, http://labs.brotherli.ch/vcfconvert/。推荐设置Separator为Tab字符,一般该字符不会出现在字段值中。
至于如何从简单的csv文本中提取出姓名与号码,并生成js数组就不赘述了,随便用你拿手的某种语言写都行。
在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数组就不赘述了,随便用你拿手的某种语言写都行。
相关文章推荐
- 使用 Chrome 开发者工具实现网站快速开发的12个小技巧
- [译]通过使用Chrome的开发者工具来学习JavaScript
- 使用Chrome的开发者工具来学习JavaScript
- 通过使用Chrome的开发者工具来学习JavaScript
- 通过使用Chrome的开发者工具来学习JavaScript
- 使用用Chrome开发者工具(Timeline、Profiler)做JavaScript性能分析
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- 【JavaScript】使用Chrome进行调试(如何使用Chrome开发者工具)
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- javaScript使用Lodop实现网页表格套打功能
- Chrome开发者工具不完全指南(一、基础功能篇)
- Chrome开发者工具(javascript内存分析)
- JavaScript中使用webuploader实现上传视频功能(demo)
- 【JavaScript】基于H5 canvas实现的画板绘图工具(类似你画我猜)——整合颜色选取、保存图片到本地功能
- 使用JavaScript实现单击复选框实现全选与全不选功能并通过ajax实现批量删除功能
- Chrome开发者工具不完全指南(一、基础功能篇)
- 用Chrome开发者工具做JavaScript性能分析
- JavaScript使用键盘输入控制实现数字验证功能