chrome插件网页抓取(工具chrome浏览器浏览器插件)

　　chrome插件网页抓取(工具chrome浏览器浏览器插件)

　　工具chrome浏览器

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

　　篡改猴子

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

　　资源

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

　　爬行过程

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

　　观察

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

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

　　解剖学

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

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

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

　　元素标签搜索

　　当我们找到一个key的dom元素时，你觉得页面js会不会对这个元素进行操作，比如value、delete等，可以通过这个元素自带的id或者class来搜索。通常，这些 id 和 class 名称不会混淆，可以直接找到。

　　元素事件查找方法

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

　　当然，如果在elements面板中直接在dom结构上标注方法名，如下图，可以直接全局搜索【checkinput】。

　　Ajax接口名称查找方法

　　当我们找到自己想要的接口时，可以在网络中找到接口的名称，直接全局搜索，或者通过发起者中js调用的栈信息找到具体的调用代码。

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

　　抓住

　　获取数据无非是以自动化的方式提取数据并将其保存到指定位置。

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

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

　　总结

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