用纯客户端JavaScript来写一个有趣的爬虫

scq000 发布于2019-08-20 15:33 / 753人阅读

摘要：拿写爬虫，听起来貌似有些不靠谱爬虫，大多人对于爬虫的理解都停留在使用后端语言如写的爬虫。图中显示的那一个长条是原本不存在与原网站中的，而是通过油猴脚本自动载入脚本来创建的。最大作用是将网站类似于花瓣网中的图片作品快速的抓取下来。

拿JavaScript写爬虫，听起来貌似有些不靠谱？

爬虫，大多人对于爬虫的理解都停留在使用后端语言如Python写的爬虫。但是实际上，使用客户端JavaScript有诸多后端爬虫所无法拥有的优势：

可以方便的分享给其他人用，只要对方电脑里有浏览器

由于跑在客户端，几乎可以无视对方网站的反爬虫机制

可以拥有完善的UI，无开发基础的小白也可以随意使用

这东西应该怎么启动？

而“客户端JavaScript爬虫如何运行”问题，回答这个问题非常简单，大致有3种运行JavaScript的代码：

存浏览器书签，以javascript:打头，点击即可运行

复制到浏览器console中按回车

有个浏览器扩展叫做“油猴子”

这里我们主要看下第三种，油猴脚本方式运行。

或许你听说过油猴扩展，他在Firefox叫做Greasemonkey在Chrome叫做Tampermonkey，你可以轻松的在浏览器的扩展商店找到它。而关于其本身有何作用，一句话

按照规则，在不同的URL额外运行一段JavaScript代码

请参考下面的例子：

// ==UserScript==
// @name          Pxer
// @include       http://www.pixiv.net*
// ==/UserScript==
javascript:void((function() {
    
    document.documentElement.appendChild(
        document.createElement("script")
    ).src="http://pxer-app.pea3nut.org/jsonp.js?"+(+new Date);

})());

==UserScript==是油猴脚本的规则，上面的规则告诉油猴：

当浏览器打开http://www.pixiv.net*的页面时，执行下面的脚本

而脚本的内容则是：通过jsonp的方式向页面引入一个js文件。

这就可以做很多事了。（不是坏事哦~）

优势，还是非常多的

上图是一个二次元插画交流站pixiv.net。图中显示“Pxer 7”的那一个长条是原本不存在与原网站中的，而是通过油猴脚本自动载入JavaScript脚本来创建的。

若想访问图中的原始链接可以点击这里，可能你需要先在pixiv.net注册一个账号

通过油猴脚本自动载入，你可以做到：

在完全不影响原网站使用的情况下，利用强大的JavaScript向用户提供额外的功能

再结合一开始提到的优点：

可以给任何人使用！哪怕是无开发基础的小白

不会被封杀！由真实用户操作，封账号、IP、验证码等反爬虫策略你觉得会对客户端爬虫有效吗？

利用HTML+CSS，构建一个漂亮的UI完美融入原网站，简直不能再简单~

突然莫名的感觉很无敌有木有？

说了这么多，来个实际实现的例子

空说无凭，来看一个实际的客户端JavaScript爬虫开源项目 —— Pxer

Github：https://github.com/pea3nut/Pxer

项目官网：http://pxer.pea3nut.org/

Pxer是一个纯客户端JavaScript编写的爬虫，无需任何配置即可直接在浏览器端运行。

Pxer最大作用是将pixiv.net网站（类似于花瓣网）中的图片作品快速的抓取下来。它不是简单的检索img标签，而是通过一定的算法和Ajax请求来完成更为复杂的功能。

关于项目的详细描述，可以参考项目官网和Github项目主页

良好的jsDOC格式注释和详细的文档都已经为你准备好了~~

https://github.com/pea3nut/Pxer

让JavaScript来的更猛烈些~~

专线服务服务器托管一个有趣的Ajax 有趣的事有趣的python 有趣的数据展示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82335.html

前端知识精选- 收藏集 - 掘金

摘要：这美团点评前端无痕埋点实践前端掘金构建一个数据平台，大体上包括数据采集数据上报数据存储数据计算以及数据可视化展示等几个重要的环节。我认真起来连面试官都怕（块级作用域，事件代理） - 掘金作者混元霹雳手-Ziksang 如果你学完这篇文章之后，你回答完面试官之后，拿一张图告诉面试官在于前端面试，你给面试官讲一些官方名词，我知道react,vue,angular等等，一系列牛B的框架...

XiNGRZ 2019-08-20 16:41 评论0 收藏0
好棒的前端文章 - 收藏集 - 掘金

摘要：你应该知道的种设计模式前端掘金每位开发者都努力写出可维护的易读的可复用的代码。继承关系本前端书籍整理，高清前端掘金发现了一个下载前端书籍的地方，分享给大家。你应该知道的 4 种 JavaScript 设计模式 - 前端 - 掘金每位开发者都努力写出可维护的、易读的、可复用的代码。随着应用变得越来越大，代码的结构也越来越重要。设计模式验证了解决这个挑战的重点——在特定环境中，对同类事物...

Maxiye 2019-08-21 15:55 评论0 收藏0
用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏

摘要：可以通过的提供的直接控制模拟大部分用户操作来进行或者作为爬虫访问页面来收集数据。骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构，直到请求数据返回后再显示真正的页面内容；随着单页应用（ SPA ）的越来越流行，单页应用的用户体验也越来越得到前端开发者的关注；为了优化用户体验，在数据到达用户之前，往往会在页面上加上 loading 的效果，而现在，越来越多的场景倾向于使...

BlackHole1 2019-08-23 12:19 评论0 收藏0
Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南

摘要：实现彩虹画笔绘画板指南作者简介是推出的一个天挑战。这部分不涉及内容，全部由来实现。实现彩虹画笔绘画板效果图项目源码分析源码获取节点支持不支持彩虹效控制笔触大小控制绘制路径源码分析宽高设置属性笔触的形状，有圆平方三种。 Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑...

Ajian 2019-08-20 18:18 评论0 收藏0
Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南

摘要：实现彩虹画笔绘画板指南作者简介是推出的一个天挑战。这部分不涉及内容，全部由来实现。实现彩虹画笔绘画板效果图项目源码分析源码获取节点支持不支持彩虹效控制笔触大小控制绘制路径源码分析宽高设置属性笔触的形状，有圆平方三种。 Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑...

xi4oh4o 2019-08-05 11:43 评论0 收藏0