chrome 插件 抓取网页qq聊天记录(微信的JSAPI没法调试（只能打log来定位问题来）)

　　chrome 插件 抓取网页qq聊天记录(微信的JSAPI没法调试（只能打log来定位问题来）)

　　背景

　　我们在开发微信webview时经常会遇到比较头疼的问题：

　　微信的JSAPI无法调试（只能用log定位问题） 微信的登录状态（getA8key服务）在PC上很难模拟（需要抓log看ui,key或者用web微信跳）。连接到开发机器（不在网段）。

　　我曾尝试在PC端使用Android模拟器调用微信APP，这样可以在PC端调试网页，同时也可以访问开发机，但是使用模拟器非常耗费资源，在PC上很难成功运行。

　　为了解决这个调试难的问题，尝试使用浏览器的Javascript插件来实现一个类似于微信webview的功能：微信webview模拟器

　　支持模拟微信登录功能（默认绑定测试账号）模拟微信JSAPI，部分有UI界面，所有API均可在控制台查看。通话记录可以连接到PC上的开发机，甚至是本地静态网页，或者使用浏览器开发工具调试网页采集到朋友圈、发送给朋友、采集等常用API的模拟接口。

　　目前仅支持 Chrome 浏览器

　　启动模拟器

　　先创建书签访问开发机上写的JS插件：

　　成功访问页面后，点击刚刚创建的书签栏中的“微信网络模拟器”，页面会自动加载微信登录状态，为jsapi的初始化做准备。此时可以看到这个界面：

　　使用F12调出开发者工具面板，可以调试页面元素和Javascript，也可以在控制台面板看到所有的JSAPI调用。

　　实现过程

　　首先使用书签执行JS，可以在任意域名下执行脚本，没有跨域操作（假设我访问过）。

　　第一步：首先绘制iPhone界面，在中间的webview区域使用一个带有src=""的iframe。可以发现外部宿主环境也在最底层，iframe也在最底层，这样我们就可以做接下来的事情了。

　　第2步：*敏*感*词*iframe加载后，动态插入一个我们写的js到iframe中，因为第一步解释了同域下允许这个操作：

　　可以看到，当iframe加载时，jsapi.js会在这里执行。这个JS负责模拟微信webview的JSAPI hook。先回过头来看看微信的JSAPI是怎么调用的：

　　这很容易。既然我们在监控文档中的WeixinJSBridgeReady事件，那我们就模拟一下吧。

　　第三步：在jsapi.js中模拟WeixinJSBridgeReady事件

　　我在触发这个事件之前已经初始化了所有的JSAPI钩子，也就是上图第一行的WeixinJSBridge对象。

　　第四步：模拟WeixinJSBridge对象的所有调用接口

　　基本模拟如下接口即可完成90%的工作：

　　微信JSBridge.on

　　微信JSBridge.call

　　微信JSBridge.invoke

　　这里的实现没什么好说的。如果做起来简单，直接把调用的所有输入参数打到console.log。我也模拟了分享到朋友圈、分享给朋友等UI操作：

　　第五步：剩下的就是微信登录状态了。

　　这是内部服务，这里不用放。我只要在内网上建一个cgi，让我拿到登录状态就可以完成，只需要记录步骤即可。

　　总结

　　目前这个小插件对于调试现网问题或者调试开发都很方便，而且使用非常简单，不需要配置很多东西，只需要配置一个HOST+添加书签即可。

　　PS：目前该插件不支持HTTPS页面，因为HTTPS无法加载HTTP资源。因此，如果开发机上可以构建HTTPS服务，插件会自动识别并加载不同协议下的插件JS。

　　本文链接：微信webview模拟器