使用Chrome开发者工具注入Javascript实现额外功能
来源:互联网 发布:淘宝客服的个人介绍 编辑:程序博客网 时间:2024/06/05 20:03
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数组就不赘述了,随便用你拿手的某种语言写都行。
0 0
- 使用Chrome开发者工具注入Javascript实现额外功能
- 【JavaScript】使用Chrome进行调试(如何使用Chrome开发者工具)
- chrome开发者工具使用
- chrome开发者工具使用
- Chrome开发者工具面板功能
- 通过使用Chrome的开发者工具来学习JavaScript
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- chrome 开发者工具使用技巧
- Chrome开发者工具的使用
- Chrome开发者工具使用经验
- chrome开发者工具的使用
- Chrome开发者工具使用技巧
- Chrome开发者工具之JavaScript内存分析
- Chrome开发者工具(javascript内存分析)
- Chrome开发者工具之JavaScript内存分析
- 阿里巴巴2013年校招试题单选解析
- HttpClient4.x 多线程请求
- 获取文件的流
- Android之ContentProvider详解
- 结解
- 使用Chrome开发者工具注入Javascript实现额外功能
- viewpage详解,四大函数
- 网页与HTML语言
- C语言实现随即梯度下降,批量梯度下降法
- 用两个栈实现队列
- 黑马程序员——Java之编程基础(一)
- Nginx RTMP 模块 nginx-rtmp-module 指令详解
- WEB测试方法及注意地方
- Effective STL -- 容器