【油猴脚本】00037 案例 Tampermonkey油猴脚本,爬虫, 仅用于学习,不要乱搞。网页数据获取器-遮罩提升层级不遮挡。Jquery爬虫,HTML+Css+JavaScript编写

Tampermonkey脚本入门：网页数据获取器

Tampermonkey是一个流行的浏览器扩展，允许用户编写和运行自定义的JavaScript脚本，以增强网页功能或获取数据。这些脚本可以在特定的网站上自动执行，你可以利用它们进行网页爬虫、数据提取等。

在这篇文章中，我们将探讨如何使用Tampermonkey编写一个小型的网页数据获取器。在实现这个功能时，我们将使用jQuery库，方便我们操作DOM元素。我们将构建一个简单的示例，创建一个“遮罩提升层级”的功能，使得提取数据时不受到页面其他元素的遮挡。

Tampermonkey安装

首先，你需要在浏览器中安装Tampermonkey扩展。在Chrome商店或Firefox附加组件中搜索“Tampermonkey”，并按照提示完成安装。

编写脚本

以下是一个基本的Tampermonkey脚本示例，它可以帮助你获取网页数据，并通过遮罩提升层级的方式展示结果。

// ==UserScript==
// @name         网页数据获取器
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  一个简单的网页数据获取器
// @author       你
// @match        *://*/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建遮罩层
    const overlay = $('<div id="data-overlay" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); display:none; z-index:9999; color:white; text-align:center; font-size:20px; padding-top:200px;">数据加载中...</div>');
    $('body').append(overlay);

    // 获取数据的函数
    function fetchData() {
        overlay.show(); // 显示遮罩层

        // 模拟异步数据获取
        setTimeout(() => {
            // 这里是获取数据的逻辑，假设你想获取所有文章标题
            const titles = [];
            $('h2').each(function() {
                titles.push($(this).text());
            });

            // 隐藏遮罩层并显示数据
            overlay.hide();
            alert('获取到的标题:\n' + titles.join('\n'));
        }, 2000); // 模拟2秒后获取数据
    }

    // 添加获取数据的按钮
    const button = $('<button id="fetch-button" style="position:fixed; top:10px; right:10px; z-index:10000;">获取数据</button>');
    $('body').append(button);

    // 绑定按钮点击事件
    button.on('click', fetchData);
})();

代码解析

1. 脚本头部信息：我们使用// ==UserScript==和// ==/UserScript==标识脚本的元数据，包括脚本名称、版本、描述、匹配网址等信息。@require指令引入了jQuery库。

2. 遮罩层的创建：我们使用jQuery创建一个全屏覆盖的遮罩层。通过设置z-index值，我们确保这个遮罩层位于页面其他元素的上方。

3. 获取数据的逻辑：fetchData函数是获取数据的主要逻辑。这里我们模拟异步数据获取。通过选择页面中所有的h2标签，我们将它们的文本内容存入一个数组。

4. 按钮的添加与事件绑定：我们在页面右上角添加一个“获取数据”的按钮，并给它绑定点击事件，当点击后执行fetchData函数。

注意事项

• 本示例仅用于学习和研究目的，因此在实际使用时，请注意遵循相关法律法规。
• 在实际应用中，建议对获取数据的目标网站进行适当的请求频率控制，避免对目标网站造成负担。

通过这个简单的示例，你已经学会了如何使用Tampermonkey和jQuery创建一个基本的网页数据获取器。希望这对你有所帮助！