无需关注也能看全文？用油猴插件破解网页’秘密门’！

前言

在日常浏览网页的过程中，我们经常遇到一些网站内容被隐藏，只有在满足特定条件（如关注公众号、订阅博客等）后才能查看。这种做法虽然在一定程度上合理，它帮助内容提供者增长粉丝和提升用户互动，但同时也可能给急需信息的用户带来不便。

为了解决这一问题，本文将介绍如何利用油猴插件Tampermonkey编写一个简单的脚本，以显示这些原本被隐藏的内容，从而提升我们的网页浏览效率和体验。并深入探索介绍油猴插件的强大功能。

重要提醒：在使用此类脚本时，请考虑内容提供者的版权和隐私政策。本文仅用于教育和研究目的。

案例展示

出于某些考虑，本文不提供具体案例，但我们将通过截图展示通用的隐藏内容场景。

通常，需要关注博主或关注公众号才可阅读全文的提示如下截图所示：

HTML网页原理

网页的内容和样式通常由HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）共同决定。HTML负责结构和内容，而CSS负责样式和布局。在一些情况下，内容提供者可能会通过设置CSS的overflow属性为hidden和固定height属性的值来隐藏部分内容。

如以下两张截图：

主要是看 style属性的这一部分内容（以第一张为展开）

• position: relative;：这表示元素的定位是相对的。相对定位意味着元素在正常的文档流中占据空间，但可以相对于其正常位置进行偏移。这不会影响其他元素的布局。
• height: 2800.39px;：这设置了元素的高度为2800.39像素。这是一个精确的高度值，说明内容或容器被设计为占据特定的垂直空间。
• overflow: hidden;：这个属性用于控制一个元素的内容溢出时的行为。hidden值意味着超出指定高度（在这里是2800.39px）的内容将被隐藏，不会显示也不可访问。

综合来看，这段样式将一个元素设置为相对定位，高度为3157.38像素，并且任何超出这个高度的内容都会被隐藏不显示。这就是一个很典型的隐藏网页内容的做法！

所以接下来，我们只需要实现如下两点：

1. 遍历页面上的所有元素，检查它们的style属性。
2. 对于同时包含height和overflow: hidden;的元素，将overflow修改为visible，并移除height属性。

这样就可以显示这些原本被隐藏的内容了。

油猴插件(Tampermonkey)简介

油猴插件允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序，可用于向网页添加新功能或修改现有功能。使用 油猴，可以轻松在任何网站上创建、管理和运行这些用户脚本。

在油猴插件的社区中，你可以找到各种各样有趣的脚本！

安装和配置

参考 文档 | Tampermonkey：https://www.tampermonkey.net/documentation.php?locale=zh

Tampermonkey 是一款流行的用户脚本管理器，可安装在多数主流浏览器上。安装方法如下：

1. 打开您的浏览器的扩展/插件商店。
2. 搜索 Tampermonkey 并选择安装。
3. 安装完成后，您将看到浏览器工具栏中出现 Tampermonkey 的图标，表示安装成功。

（安装过于简单！不具体做介绍了。）

编写油猴脚本

针对隐藏内容的情况，我们可以编写一个脚本来动态修改这些元素的CSS属性，将overflow从hidden改为visible，并移除height属性，以显示被隐藏的内容。

1. 打开 Tampermonkey 插件，选择“添加新脚本”。

   

2. 在脚本编辑器中粘贴以下的脚本代码

   

3. 保存脚本，然后刷新受影响的网页查看效果。（可以看到有个小数值）

   

4. 你会发现，被隐藏的内容都显示出来了！

// ==UserScript==
// @name         显示隐藏内容
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  显示隐藏内容✨
// @author       小菜
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict'; // 严格模式

    // 使用querySelectorAll('*')选择页面上的所有元素
    var allElements = document.querySelectorAll('*');

    // 遍历所有选中的元素
    allElements.forEach(function (el) {
        // 获取当前元素的style属性值
        var style = el.getAttribute('style');

        // 检查style属性是否存在，并且同时包含'height'和'overflow: hidden;'
        // 这里使用includes()方法检查style字符串是否包含特定的子字符串
        if (style && style.includes('height') && style.includes('overflow: hidden;')) {
            // 使用replace()方法删除包含'height'属性的部分
            var modifiedStyle = style.replace(/height:\s*\d+(\.\d+)?px;\s*/, '');
            // 使用正则表达式替换overflow: hidden;为overflow: visible;
            modifiedStyle = modifiedStyle.replace(/overflow:\s*hidden;/, 'overflow: visible;');
            // 使用setAttribute()方法更新当前元素的style属性，应用修改后的样式字符串
            el.setAttribute('style', modifiedStyle);
            console.log('bingo'); // 打印bingo表示修改成功
        }
    });
})();

应用场景和强大功能

上面展示了使用油猴插件显示被隐藏的网页内容，但它的应用场景远不止于此。

安装了 Tampermonkey 插件后，我们可以进入庞大且多样化的用户油猴脚本社区。在这个社区中，无数的开发者和技术爱好者分享他们的创作，这些脚本可以帮助我们解决各种网页使用中的小问题，或是提升我们的浏览体验。以下是一些可以在社区中找到的有趣脚本的例子：

• 自动化任务：自动填写表单、自动点击按钮等，极大提升了浏览效率。
• 广告屏蔽：移除网页上的广告和弹窗，让浏览体验更加清爽。
• 用户界面改善：自定义网页布局和风格，改善不方便的用户界面设计。
• 数据抓取：帮助从各种网页上快速提取和下载所需的信息。
• 增强社交媒体功能：如自动加载更多的推文，或是批量下载 Instagram 图片。
• 视频网站增强：自动跳过 YouTube 广告，或是在各大视频网站上默认启用画中画模式。
• 网页阅读优化：为各大新闻网站提供去除广告和弹窗的干净阅读界面。
• 在线购物助手：自动应用最佳优惠券代码，或是比较不同网站上的商品价格。
• 学术资源访问：帮助您绕过学术论文的支付墙，直接访问文献资源。

这些只是冰山一角，实际上，几乎任何你想要改变或优化的浏览体验，都可以尝试用油猴脚本来实现。

截图示例：

学习资源和社区

想要深入学习如何编写油猴脚本，或对web开发感兴趣？这里有一些推荐资源：

• MDN Web Docs：覆盖HTML、CSS、JavaScript等所有web技术的官方文档和教程。
• JavaScript.info：从基础到高级的JavaScript教程。
• Greasy Fork：一个分享和发现用户脚本的社区。
• Userscript.Zone：一个分享和发现用户脚本的社区。
• OpenUserJS：另一个流行的用户脚本共享网站，可以找到很多优质的脚本资源。

如何安全地使用社区脚本

虽然社区中有很多有趣且有用的脚本，但在安装使用它们时，也需要注意安全性。请务必只从信誉良好的平台下载脚本，并查看其他用户的评价和反馈。在安装脚本之前，最好先阅读其源代码，确保没有潜在的恶意行为。记住，安全第一，不要轻易信任来源不明的脚本。

结语

通过本文的介绍和指南，希望你能够轻松地使用 Tampermonkey来优化你的网页浏览体验，解锁那些被不必要条件限制的内容。记住，使用这些技术时，请始终尊重网站的版权和隐私政策，合理合法地使用技术。

探索无界，共享无限。 愿每一位读者都能在油猴脚本的世界中找到乐趣，不断学习，不断创造！