如何用Tampermonkey和Express JS刮擦网站：指南
#javascript #node #webscrapping #express

选择浏览器脚本而不是自动刮擦方法是一个更好的选择，有几个原因。最常见的原因之一是，一些网站已经实施了防止自动刮擦的安全措施，例如验证码，IP阻塞或其他形式的机器人检测。使用浏览器脚本，您可以绕过这些安全措施并访问所需的数据而无需触发任何警报。此外，使用浏览器脚本可以提供对刮擦过程的更详细的控制，可以自定义以满足您的特定要求项目。

可用于浏览器脚本的一种流行工具是TampermonKey。此刮刀提供了一个强大而灵活的选项，可用于从网站收集数据，因为它使您可以编写可以与页面交互并提取所需信息的自定义JavaScript代码。 TampermonKey提供了一个简单而直观的接口，用于管理用户脚本，使安装，编辑和运行脚本在不同的网站上容易。

但是，您可能需要一个存储刮擦数据的地方。这是数据库发挥作用的地方。您可以创建一个API将刮擦数据发送到数据库。在此问题上，您可以将Express.js用作选项之一。

express.js是快速有效地创建API的流行解决方案。该框架建立在Node.js的顶部，使其成为构建Web应用程序和API的多功能工具。通过使用Express.js，您可以轻松地在刮擦数据和数据库之间创建一个桥梁，从而简单地存储，检索和操纵项目的数据。

安装和设置Tampermonkey

TampermonKey是一种多功能浏览器扩展，与许多流行的浏览器兼容，包括Chrome，Firefox，Edge和Safari。要下载Tampermonkey，您可以简单地在线搜索“ Tampermonkey扩展名”，然后为浏览器选择适当的链接。

安装TampermonKey后，应在浏览器工具栏中出现一个新图标，从而使您可以轻松访问Tampermonkey仪表板。请注意，仪表板的外观和功能可能会根据您使用的TampermonKey版本而有所不同；在撰写本文时，可用的最新版本为4.18.1。

Tampermonkey dashboard

您将看到在Tampermonkey仪表板上创建新脚本的选项。虽然您可以在本文档中直接编写脚本代码，但目前，我们将使用所需的功能来加载本教程中的文件脚本。我们还使用express.js通过URL访问此文件。

在TampermonKey中创建新脚本时要注意的一件事是必不可少的配置选项之一，即匹配字段。该字段允许您指定脚本中的哪些URL。

例如，您可以将脚本配置为仅在特定网站，一组页面或与特定模式匹配的任何网站上运行。通过仔细配置匹配字段，您可以确保您的脚本仅按照您的意愿直接执行并避免在其他网页上引起意外副作用。

进行练习，我们将使用工具从网站http://books.toscrape.com/中提取书籍数据。一旦刮擦数据，我们将尝试获取每本书的详细信息，例如标题，价格和描述。这可能涉及导航多个网页并使用各种数据解析技术来提取相关信息。

设置Express JS服务器

在使用Express.js创建用于存储刮擦数据的API之前，您必须确保在计算机上安装了Node.js并正确配置。 node.js是一个JavaScript运行时，可让您在Web浏览器环境外执行JavaScript代码，并且是使用Express.js。

的先决条件。

验证了Node.js已安装并正确工作后，您可以安装Express.js。安装Express.js的方法有很多，包括使用NPM（NODE.JS软件包管理器）或直接从Express.js网站下载源代码。重要的是要注意，安装过程可能会根据您使用的操作系统以及已安装的Node.js的哪个版本来有所不同。

要开始安装Express.js，您可以参考其网站的官方教程和文档。这些资源提供了用于安装和配置Express.js，示例以及使用框架构建API和Web应用程序的最佳实践的分步说明。使用Express.js安装和配置，您将准备创建自定义API，以存储刮擦数据并从其他应用程序或服务访问。

配置Express.js以服务静态脚本

使用express.js应用程序中的URL服务脚本文件时，必须完成一些事情。首先，设置适当的中间件很重要。在这种情况下，代码段包括必须实现的三个中间件功能。

const express = require("express");
const cors = require("cors");
const cookieParser = require("cookie-parser");
const app = express();
const port = 3000;

app.use(cors());
app.use(express.static("public"));
app.use(cookieParser());

第一个中间件功能是“ CORS”。此安全功能允许向服务器提出交叉原始请求。从另一个域中使用CORS中间件时，使用CORS中间件至关重要。默认情况下，大多数Web浏览器都会将请求阻止到不同域，以防止未经授权访问敏感信息。

第二个中间件功能是“ express.static”。此功能告诉express.js在哪里可以找到将向客户端服务的静态文件。在这种情况下，指定“公共”文件夹，并将存储脚本文件的目录。当客户端请求脚本文件时，Express.js将在“ public”文件夹中查找并将其返回给客户端。

第三个中间件功能是“ cookieparser”，该功能在每个请求中都会解析cookie。 cookie是存储在客户端的小文本文件，并存储以存储有关用户或其会话的信息。 express.js可以解析这些cookie并使用数据来个性化用户的体验或通过此cookieparser的中间件

执行其他操作

编写刮擦脚本

现在，我们准备编写一个脚本，负责从Booktoscrape网站上删除书籍列表的集合。收集书籍列表后，脚本将通过单击“下一个”按钮导航到下一页，然后在下一页上重复列表收集过程。

function runJob() {
    var data = [];

    document.querySelectorAll(".product_pod").forEach(function(product) {
        var title = product.querySelector("h3 a");
        var image = product.querySelector("img")
        var color = product.querySelector(".price_color");

        data.push({
            image: image && image.getAttribute("src"),
            price: color && color.innerText,
            title: title && title.getAttribute("title"),
            url: title && title.getAttribute("href"),
        });
    });

    GM_xmlhttpRequest({
        method: "POST",
        url: "http://localhost:3000/api/list",
        data: JSON.stringify({
            list: data,
        }),
        headers: {
            "Content-Type": "application/json",
        },
        onload: function(response) {
            var resp = JSON.parse(response.response);
            var respData = resp.data;

            console.log("Response:");
            console.log(respData);

            setTimeout(() => {
                console.log(document.querySelector(".pager .next a"))
                document.querySelector(".pager .next a").click();
            }, 10000);
        },
    });
};

runJob();

我们创建称为“ runjob”的JavaScript函数，该函数执行以下操作：

  1. 创建一个称为“数据”的空数组。
  2. 使用“ document.queryselectorall”方法选择所有类“ product_pod”的元素。
  3. 使用“ foreach”方法循环通过每个选定的元素，并通过在每个元素上使用“ querySelector”方法提取书的标题，图像，颜色和URL。
  4. 将包含提取数据的对象推入每个书的“数据”数组中。
  5. 使用TampermonKey提供的“ GM_XMLHTTPREQUEST”方法将邮政请求发送到http://localhost:3000/api/list的本地服务器。该请求将数据阵列作为请求正文中的JSON字符串作为JSON字符串。
  6. 当收到响应时，该函数解析响应JSON，将响应数据记录到控制台，并使用“ settemeout”方法等待10秒钟，然后单击“下一个”按钮以移至书籍的下一页。

此代码的目的是从网站刮擦书籍数据，并将其发送到本地服务器以进行进一步处理。可以重复调用“ runjob”函数以从多个网站页面刮擦数据。

Tampermonkey元数据

Tampermonkey元数据是一组配置参数，其中包含在用户脚本文件的顶部，以向TampermonKey提供有关脚本的信息。在运行浏览器上的脚本之前，我们需要编写一些配置。

// ==UserScript==
// @name         Book Scrapper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://books.toscrape.com/catalogue/category/books_1/*
// @require      http://localhost:3000/list.js?ver=1.0.2
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        GM_xmlhttpRequest
// ==/UserScript==

上面的元数据几乎没有什么可以注意的。首先，“匹配”行指定了该脚本应在内的网页。在这种情况下，该脚本仅在与模式https://books.toscrape.com/catalogue/category/books_1/*匹配的URL上运行。最后的星号是与任何字符匹配的通配符，因此该脚本将在该URL开头的任何页面上运行，并在其后面包含任何其他字符。

接下来，“需要”行指定当前脚本所需的脚本文件。在这种情况下，脚本需要一个名为“ List.js”的文件，位于http://localhost:3000的本地Web服务器上。值得注意的是，该文件需要将文件定向到Express.js服务器上的public文件夹，以使脚本能够正确访问。

最后，“授予”行指定脚本需要使用GM_XMLHTTPREQUEST函数请求HTTP的权限。当第一次运行脚本时，将出现一个新选项卡，请允许发布这些请求。此安全功能是在TamperMonkey中内置的，以防止脚本未经用户的知识或同意而提出未经授权的请求。

express.js在服务器上捕获数据 

app.use(express.json({ limit: "50mb" }));
app.use(express.urlencoded({ limit: "50mb", extended: true, parameterLimit: 50000 }));

app.post("/api/list", async (req, res) => {
    const list = req.body.list;
    console.log(list);
    // Other script
    res.status(200).json({
        success: true,
        message: "Success post list",
        data: list,
    });
});

此代码创建一个Express.js服务器，以接收“/api/list”端点的发布请求。该请求应包含一个带有“列表”属性的JSON对象。然后，服务器将接收到的列表记录到控制台并将JSON响应发送给客户端。

前两行代码设置了中间件，用于解析传入请求。 Express.json中间件用于解析JSON编码的请求主体。限制选项设置为“ 50MB”，该选项指定字节中的最大请求车身大小。同样，Express.URLENCODED中间件用于解析URL编码的请求主体。限制选项设置为“ 50MB”，扩展选项设置为true以启用请求主体中嵌套对象的使用，并且参数limit选项设置为50000以限制URL编码的参数。

app.post方法将邮政请求处理为“/api/list”。它需要两个参数：第一个参数是路由路径，第二个是一个回调函数，可处理请求并发送响应。在这种情况下，回调函数将接收请求对象REQ和响应对象res。 req.body.list属性用于访问请求主体中发送的列表，并登录到控制台。您可以添加其他代码，例如将数据保存到数据库并处理其他数据。

最后，服务器以成功标志，消息和接收的列表作为数据向客户端发送JSON响应。 Res.Status（200）方法将HTTP响应状态设置为200个OK，Res.json方法以JSON格式发送响应。响应包含一个成功标志，设置为true，带有文本“成功帖子列表”的消息以及带有接收列表的数据属性。此响应将发送回提出请求的客户端。

运行脚本

现在您需要运行服务器和TampermonKey。以下脚本应在express.js：
中添加 

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
});

此代码启动了在特定端口上倾听的服务器。 App变量是Express.js应用程序的实例。收听方法在指定的网络端口上绑定并倾听传入请求。该方法采用两个参数：要侦听的端口号和服务器开始侦听时执行的可选回调函数。

在此代码中，回调函数将消息记录到控制台，表明服务器已在指定的端口上开始侦听。当服务器启动时，此消息显示在服务器的控制台窗口中，使开发人员可以确认服务器已成功启动。

运行一切后，尝试访问https://books.toscrape.com/catalogue/category/books_1/index.html。如果成功，数据将在浏览器和服务器控制台上记录。

Data log on browser console

Data log on server console

Web Scraper已成功创建，数据已发送到服务器。现在可以添加其他过程，例如存储和分析数据。

最后的想法

使用TampermonKey之类的浏览器脚本在Web刮擦方面可以提供好处。 TampermonKey是一种强大的工具，可允许用户通过注入自定义脚本来自定义和修改网页。使用此工具，可以刮擦具有安全措施的网站，这通常会阻止标准刮擦方法工作。

但是，未经明确许可的刮擦网站可能会导致法律和道德并发症，尤其是当被刮擦的信息被视为私人或敏感时。因此，重要的是要在此之前考虑刮擦网站的道德含义，因为它可能违反使用条款或违反网站的隐私政策。