实在是找不到一个自己喜欢的英文单词来诠释这个小工具，BaibianJS(百变JS) is a little and amazing mini chrome extension!It will help you to inject js and send cross domain xhr request by setting Access-Control-Allow-Origin.百变JS是一个小巧实用的Chrome插件，主要2个功能，1是能帮您任性注入JS，2是通过让您任性跨域！
为什么会有BaibianJS
实战背景
要求爬取所有接口规格，找到带有特定参数的接口。
为了爬取接口进行分析，用到了hookAjax.js（有bug，有小影响），但是为了省事就将就用了。但是hook js需要注入js，同时结果需要存储到自己的数据库里，于是经过几天的探索，整理出一个BaibianJS。你可能看到的结果就一个小巧的Chrome插件，但是过程却很曲折。
我们原来的尝试过的方案（踩过的坑）:
1.winform+webbrowser 通过js调winform，能跨域，js替换上出莫名其妙的问题。搬来fiddler进行请求模拟替换js，js注入进去了，但是还是有些bug问题，好像是hookAjax对ie的兼容问题。折腾了许久，此方案没有完全执行下去。因为有点厌倦了webbrower的调试，感觉不爽，也许自己的调试方式不对。
2.chrome+fiddler
用Fiddler替换掉js是没有问题，成功将jq.js替换成了hook.js(实际是hookAjax.js+jq.js)，但是收集完成接口请求后，保持数据成了问题，提示跨域！采用动态生成script标签的形式跨域到是成功了，不过，传的数据过多，就报错了。URL毕竟是有长度限制。只是想用在内嵌一个页面，实现get转post，还未实战，不过，理论上是完全OK.
3.纯Chrome插件方案
Chrome插件是可以直接监控请求的，但是…嗯…不知道为什么有点晕晕的，没有用这个方案。因为对Chrome插件还是了解的一半一半的，时间有限，就不深挖了。
4.反向代理方案+
反向代理方案主要是通过反向代理服务器替换掉目前js，主要是jq.js，换成改造后的带hook的js，将一个存数据的请求反向配置到自己的站点。理论上也是完美的。虚拟机里的centos 7也安装了一个反向代理环境，不过，虚拟机吃内存，就…跳过了。
5.Chrome插件BaibianJs+hookAjax 【当前方案，已验】
用BaibianJS实现了反向代理的效果，直接配置替换掉原站的jq.js，换成注入后的js，同时BaibianJS关掉了跨域限制，直接将数据存到自己的站点
BaiBianJS充分利用了Chrome Extension的机制，几行代码就实现了。
=====看代码啦==============================
chrome.webRequest.onBeforeRequest.addListener( function(info) { //here to set your magic hook js //在这里设置你修改过的js，比如把自己的代码放到jq的最下面 return {redirectUrl:’http://localhost:6366/hook.min.js‘}; }, { // here to set which js be replaced //这里是设置哪个js要被替换掉，从jq下手，最好了 urls: [ “http://www.jishudao.com/js/jquery-1.7.1*” ], types: [“script”] }, [“blocking”]); //if you need to change more,add a new Listener
//set Access-Control-Allow-Origin chrome.webRequest.onHeadersReceived.addListener(function(details) { details.responseHeaders.push({name:’Access-Control-Allow-Origin’,value:”*”}); console.log(details.responseHeaders) return {responseHeaders:details.responseHeaders}; },{urls: [“”]}, [“responseHeaders”,”blocking”]);
=====看代码啦==============================
BaibianJS的定位
BaibianJS是给开发人员的一个小插件产品，使用上不是傻瓜式的，看不懂js的，可以绕行了。也没有提供管理界面，感觉这么简单的使用就好了。
How to use
Step 1
下载BainbianJS插件文件，background.js\manifest.json，真正起作用的就这两个，放到一个BianbianJS文件夹里。进入Chrome Extension插件界面，选加载安装，选择BianbianJS文件夹，安装成功。
如何进入Chrome Extension插件管理界面
在谷歌浏览器中输入 chrome://extensions/
Step 2
安装成功后，要依据自己的使用情况修改backgroud.js中的配置，配置要替换的JS，非常简单，就不废话了。修改JS记得重载加载插件哦！
直接Github下载代码 https://github.com/Lancker/BaibianJS
与我互动
请关注我的公众号
捐助
如果你觉得不错，想捐助献爱心，请扫码 
发表回复
要发表评论，您必须先登录。