chrome插件网页抓取(工具Chrome浏览器中的JS，元素标签寻找法元素事件)

　　chrome插件网页抓取(工具Chrome浏览器中的JS，元素标签寻找法元素事件)

　　工具 Chrome 浏览器

　　Chrome 浏览器是目前最流行的浏览器。它与大多数 w3c 标准和 ecma 标准兼容。前端工程师在开发过程中提供devtools、插件等工具非常方便。在爬取数据的过程中，最常用的应该是开发工具中的Element、Source、Network函数，分别查看DOM结构、源码、网络请求。同时，还有很多基于Chrome浏览器的插件，为我们提供了浏览器级别的数据处理能力。

　　篡改猴子

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

　　资源

　　ReRes 是一个 chrome 插件。可以支持将一个在线的JS重定向到另一个JS，即将原页面中的JS替换为另一个JS。在这个新的JS中，我们可以修改部分逻辑来满足我们的需求。

　　爬行过程

　　如上图所示，抓取分为三个步骤，即观察、刨削和抓取。

　　观察

　　首先是观察。我们需要通过 devtools 中的 Elements 和 Network 选项卡读取要抓取的页面。数据可能在DOM元素中，也可能直接通过Ajax接口返回。简而言之，找出最适合获取数据的位置。.

　　当然，如果在ajax接口返回数据，会很容易抓到，但是有时候我们可能会遇到比较特殊的网站，它会对数据进行加密，返回一个乱码，这个时候我们需要剖析代码。

　　解剖学

　　也就是对页面中的逻辑代码进行拆解分析，找到关键代码供我使用。通常对网站的JS代码进行混淆和压缩。我们可以使用Chrome开发工具中的Source工具对代码进行格式化，方便阅读。然后简单介绍一下我找关键代码的方法：

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

　　当然，这里找关键词的时候，需要用到Chrome开发者工具的搜索功能。

　　元素标签搜索

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

　　元素事件查找方法

　　当我们认为某个元素已经绑定了点击或其他事件并且意义重大时，我们可以在Elements面板的Event Listeners中寻找最可能的事件，然后查看对应的JS代码。

　　当然，如果在Elements面板的DOM结构上直接标注了方法名，如下图，也可以直接全局搜索【CheckInput】。

　　Ajax接口名称查找方法

　　当我们找到自己想要的接口时，可以在Network中找到接口名称，直接全局Seach，或者在Initiator中通过JS调用的栈信息找到具体的调用代码。

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

　　抓住

　　获取数据无非是自动提取数据并保存到指定位置。

　　这里就不得不依赖我们的两个插件，TamperMonkey 和 ReRes。我一般都是把key JS保存在本地进行修改，然后用ReRes把网上的JS映射到本地的JS，然后就可以为所欲为了，比如用封装的解密函数来解密数据，然后把数据保存在索引数据库。

　　使用TamperMonkey主要是定义一些全局变量，启动爬取过程，比如遍历DOM节点，模拟点击事件，记录抓取数据的位置。

　　总结

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