无需关注也能看全文？用油猴插件破解网页’秘密门’！
前言
在日常浏览网页的过程中，我们经常遇到一些网站内容被隐藏，只有在满足特定条件（如关注公众号、订阅博客等）后才能查看。这种做法虽然在一定程度上合理，它帮助内容提供者增长粉丝和提升用户互动，但同时也可能给急需信息的用户带来不便。
为了解决这一问题，本文将介绍如何利用油猴插件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像素，并且任何超出这个高度的内容都会被隐藏不显示。这就是一个很典型的隐藏网页内容的做法！
所以接下来，我们只需要实现如下两点：
遍历页面上的所有元素，检查它们的style属性。
对于同时包含height和overflow: hidden;的元素，将overflow修改为visible，并移除height属性。
这样就可以显示这些原本被隐藏的内容了。
油猴插件(Tampermonkey)简介
油猴插件允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序，可用于向网页添加新功能或修改现有功能。使用 油猴，可以轻松在任何网站上创建、管理和运行这些用户脚本。
在油猴插件的社区中，你可以找到各种各样有趣的脚本！
安装和配置
参考 文档 | Tampermonkey：https://www.tampermonkey.net/documentation.php?locale=zh
Tampermonkey 是一款流行的用户脚本管理器，可安装在多数主流浏览器上。安装方法如下：
打开您的浏览器的扩展/插件商店。
搜索 Tampermonkey 并选择安装。
安装完成后，您将看到浏览器工具栏中出现 Tampermonkey 的图标，表示安装成功。
（安装过于简单！不具体做介绍了。）
编写油猴脚本
针对隐藏内容的情况，我们可以编写一个脚本来动态修改这些元素的CSS属性，将overflow从hidden改为visible，并移除height属性，以显示被隐藏的内容。
打开 Tampermonkey 插件，选择“添加新脚本”。
在脚本编辑器中粘贴以下的脚本代码
保存脚本，然后刷新受影响的网页查看效果。（可以看到有个小数值）
你会发现，被隐藏的内容都显示出来了！
// ==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来优化你的网页浏览体验，解锁那些被不必要条件限制的内容。记住，使用这些技术时，请始终尊重网站的版权和隐私政策，合理合法地使用技术。
探索无界，共享无限。 愿每一位读者都能在油猴脚本的世界中找到乐趣，不断学习，不断创造！