chrome 插件 抓取网页qq聊天记录(工具Chrome研发工具中的一部分逻辑代码的拆解和预测)

　　chrome 插件 抓取网页qq聊天记录(工具Chrome研发工具中的一部分逻辑代码的拆解和预测)

　　工具 Chrome 浏览器

　　Chrome 浏览器是现在比较流行的浏览器。那里没人。它与大多数 w3c 标准和 ecma 标准兼容。前端工程师在开发过程中提供devtools和软件工具非常方便。在爬取数据的过程中，最常见的应该是开发工具中的Element、Source、Network函数，分别查看DOM结构、源码、网络请求。同时，还有很多基于Chrome浏览器的插件，赋予我们浏览器级别的品质来处理数据。

　　篡改猴子

　　Tampermonkey 是一个 chrome 插件、一个免费的浏览器扩展和最流行的用户脚本管理器。简单的说就是可以指定进入这些页面后读取指定的JS代码，这样我们就可以将页面中的数据组织起来存储在localStorage或者indexeddb中。

　　资源

　　ReRes是一款chrome软件chrome插件，用于抓取网页QQ聊天记录。它可以支持将一个在线的JS重定向到另一个JS，即把原来页面中的JS替换成另一个JS，这个新的JS我们可以设置部分逻辑来满足我们的愿望。

　　爬行过程

　　如上图所示，抓的方法有观察、刨、抓三种。

　　观察

　　首先是观察，我们必须使用devtools中的Elements和Network选项卡来读取要读取的页面。数据可能在DOM元素中，也可能通过Ajax接口直接返回。简而言之，我们必须找到最合适的地方来获取数据。.

　　当然，即使是Ajax接口方法返回的数据，也会很容易捕捉到，但是有时候我们可能会遇到比较特殊的网站，它对数据进行加密，返回一个乱码，之后我们必须剖析代码。

　　解剖学

　　即对页面中的逻辑代码进行反汇编和预测，找到关键代码供我使用。通常对网站的JS代码进行混淆和压缩。我们可以使用Chrome研发工具中的Source工具对代码进行格式化，方便阅读。然后简单介绍一下我找到关键代码的方式：

　　元素标签搜索方法 元素事件搜索方法 Ajax接口名称搜索方法

　　当然，搜索关键字后，还需要使用Chrome开发者工具的搜索功能。

　　元素标签搜索

　　当我们找到一个关键的DOM元素时，你认为页面JS会对这个元素进行取值、删除等操作，可以使用这个元素的id和class来搜索，通常，这些id和class的名称不会混淆，可以直接找到。

　　元素事件查找方法

　　当我们觉得某个元素绑定了点击或其他事件时，chrome插件抓取网页QQ聊天记录，具有重要意义，我们可以使用Elements面板中的Event Listeners查找更多可能的事件，以及然后查看对应的JS代码。

　　当然，即使在Elements面板的DOM结构上直接标注原理名称，如下图，也可以直接全局搜索【CheckInput】。

　　Ajax接口名称查找方法

　　当我们找到自己想要的接口时，在Network中找不到这个接口的名称，直接全局Seach，或者在Initiator中使用JS调用的栈信息来查找准确调用的代码。

　　通过这三步，我们已经基本找不到我们需要的业务代码了。剩下的就是在此基础上不断寻找加密和解释的逻辑，同样借助断点，然后在Source面板的Callbacks中寻找函数调用。堆栈，然后找到其他逻辑。

　　抓住

　　抓取数据只是通过自动化方法提取数据并将其保存到指定位置。

　　这里我们也依赖我们的两个插件，TamperMonkey 和 ReRes。我经常把key JS保存在本地做修改，然后用ReRes把网上的JS映射到本地的JS，然后就可以为所欲为了，比如用打包好的解密函数来解密数据并保存数据到 indexeddb。

　　使用TamperMonkey主要是定义一些全局函数并启动爬取过程，比如递归DOM节点、模拟点击事件、记录抓取数据的位置等。

　　总结

　　依靠Chrome浏览器来获取数据只是一种方便快捷的获取方式，当然不是很实用，因为Chrome无法直接操作数据库，我们的数据还是缓存在浏览器中，导出需要一些时间。本文只讲个人数据采集的方式。具体可以使用Puppeteer、Phantomjs等工具进行抓包。