简介这是一款基于JavaScript的微博批量隐藏工具可帮助用户快速将所有微博设为“自己可见”适用于需要清理个人主页、保护过往隐私或整理社交账号的普通用户与轻度脚本使用者。资源压缩包体积仅6KB共包含3个文件核心JavaScript脚本、README说明文档以及License许可证文件。脚本利用fetch拉取远程代码后在浏览器控制台执行自动化完成隐藏全部微博的操作省去逐条手动处理的麻烦README中则说明了使用方法与运行原理便于理解脚本逻辑并自行修改。已有760人学习下载适合希望以轻量方式管理微博内容同时通过简单示例接触JavaScript控制台编程的学习者。整体来看这一小体积资源兼顾了实用性与可读性既能直接解决“微博一键全隐藏”的诉求也可作为浏览器自动化操作的入门参考。 坦白讲我做这个脚本的最初动机特别简单——刷微博刷到第40分钟的时候突然意识到自己又被信息流绑架了。weibo-hide-all字面意思就是“把微博全部藏起来”它做的事情也很纯粹打开微博网页版页面上的所有微博内容会瞬间消失只剩下微博的应用框架乍一看就像整条时间线都被设置成了“自己可见”。我最早是在一个讨论“信息降噪”的帖子里提到这个想法的本意只是想给微博做一个“一键清空”的按钮没想到还真有几个人私信想要。后来我把它整理成了一个油猴脚本挂在GitHub上陆续收到一些star和issue中间踩了不少微博改版的坑也积累了一些浏览器脚本开发的经验。这篇文章就把整个项目的来龙去脉、技术实现、踩坑过程以及我后续的一些扩展思路全部写出来给同样想对微博页面做“减法”的朋友一个参考。1. “自己可见”这个梗以及weibo-hide-all的初衷1.1 微博里“自己可见”的另一面在微博语境里“自己可见”是发微博时的一个可见范围选项。选了它这条微博就只有你自己能看见别人点进你的主页也看不到它的存在。这个功能原本是给“私密日记”或者“仅自己留档”的场景用的但放在weibo-hide-all这个工具里它有了另一层意思这里说的“自己可见”其实是把别人发的内容全部隐藏掉让页面回到一种“空无一物”的状态。技术层面讲就是操作DOM把承载微博内容的节点从页面上隐藏。视觉上时间线区域变空白只有你登录的账号信息、顶部导航栏这些框架性的东西还在。你依然在看微博这个网站但你看不到任何一条具体的微博像是给整个首页按下了“静音键”。这个效果听起来有点魔幻但实际体验过的人基本都会给出同一个评价安静。微博的信息流设计本身就是无限滚动的刷起来几乎没有尽头。weibo-hide-all做的事情就是在这个无底洞上面盖一块木板让你在打开微博的第一秒就意识到“我现在是在消费信息而不是被信息消费”。1.2 这个脚本到底适合谁我把这个工具分享出去之后收到的使用反馈大致分为三类第一类是把它当“专注开关”用的人。工作间隙想打开微博看看私信和评论但又怕控制不住自己刷起来于是一打开页面就直接隐藏全部微博内容只看必备的通知入口。第二类是拿它做“主页洁癖”的人。他们受不了微博网页版越来越臃肿信息流里塞满了广告、推荐内容、会员专属卡片索性全部隐藏只留一个清爽的框架。第三类比较特殊是运营和自媒体从业者。他们需要同时登录多个账号做内容管理但又不希望每个账号的首页信息流干扰判断用这个脚本可以快速把干扰信息清空。当然它的边界也很明显它只处理微博网页前端不影响任何后台数据和发布功能。如果你把微博当主要内容阵地这个脚本不会帮你涨粉也不会优化内容分发它只是一个“视觉洁癖”工具。2. 为什么选油猴脚本而不是正经做一个浏览器扩展2.1 三种实现方案的对比做这类“网页减肥”工具摆在面前的无非三条路浏览器扩展、书签脚本、油猴脚本。我把三者的差距实测对比了一下最终选了油猴原因很实在方案安装成本跨浏览器自动更新权限开发门槛Chrome扩展需要开发者模式加载打包发布需审核各浏览器不互通需要维护商店版本需要写manifest、background等成本高书签脚本复制代码到书签点一下执行通用无每次手动复制极低但执行时机不可控油猴脚本安装油猴插件后一键导入支持Tampermonkey/Violentmonkey管理器自动检查更新低只需写userscript注释头浏览器扩展虽然权限更完整但对一个“隐藏页面元素”的小工具来说属于高射炮打蚊子。你得维护一整套扩展工程结构还要为Chrome、Edge、Firefox分别做兼容适配对一个个人小项目来说维护成本太高了。书签脚本倒是轻量但它的执行时机受限于你点击书签的那一刻没法在页面加载的早期就介入。微博这种SPA单页应用页面内容加载是分批次的书签脚本很难做到“全自动隐藏”。油猴脚本卡在中间刚好兼顾了轻量、自动执行、跨浏览器这三点。它本质上还是一个JavaScript脚本但通过插件管理器获得了自动注入、跨域匹配、定时更新这些能力对小工具来说非常够用。2.2 油猴脚本里容易被忽略的两个参数如果你第一次接触油猴脚本有两点配置需要留意它们直接决定了脚本能不能正常工作。第一点是match规则。它规定了脚本在哪些URL下生效。我一开始只写了https://weibo.com/*结果发现用户从搜索页、短链跳转等入口进来时域名会落在https://www.weibo.com/*上脚本直接失效。后来我同时加了这两条match规则才解决问题。第二点是run-at。我使用的是document-idle表示等页面主体加载完成后再执行。这个时机的好处是DOM结构基本稳定隐藏操作不容易被后续加载的脚本覆盖缺点是可能出现极短暂的“闪现”——页面先显示了微博内容然后才被隐藏。如果对闪现零容忍可以考虑document-start。但这个时机太早了微博页面此时连根节点都没准备好你需要挂载MutationObserver等待容器出现代码复杂度会直线上升。我实测下来document-idle配合隐藏标志位比如在body上加一个class就能做到几乎无感知的隐藏效果。3. 核心实现搞懂微博DOM结构后的三行隐藏逻辑3.1 微博网页版的时间线到底长什么样写脚本之前我花了大量时间在Chrome DevTools里分析微博网页版的DOM结构。这个步骤不能省因为选择器写得不好后面就是无穷无尽的修Bug。先打开微博首页按F12进入控制台在Elements面板里选中一条微博。你会看到整个信息流被包裹在一层一层的嵌套容器里但不管怎么嵌套最终呈现出来的微博卡片是有规律可循的。以目前的新版微博网页来说一条微博卡片的基本骨架大致是这样的div>// UserScript // name weibo-hide-all // namespace http://tampermonkey.net/ // version 0.1.0 // description 一键隐藏微博网页版所有微博内容让时间线自己可见 // author yourname // match https://weibo.com/* // match https://www.weibo.com/* // run-at document-idle // grant none // /UserScript (function() { use strict; function hideAllWeibo() { const container document.querySelector(div[data-testid^HomeTimeline_]); if (container) { container.style.display none; } } hideAllWeibo(); })();这段代码在大多数时候是生效的但藏着一个隐患微博信息流是无限滚动的当你往下滚动时新的微博内容会被动态追加到这个容器里。如果我只是把容器设为display: none那追加的内容自然也被一并隐藏了逻辑上没有漏洞。问题出在另一条路径上微博页面里除了主信息流还有右侧的“推荐话题”、顶部的“热门微博”等区块它们用的是独立的DOM分支。这些区块不一定在HomeTimeline_容器里。用“隐藏整个容器”的方案会漏掉一部分散落在其他容器里的微博内容。所以我在第二版里改为“卡片级隐藏”。不再只盯着父容器而是遍历所有命中的article[data-testid^Feed_]节点逐个隐藏。这样不管微博把卡片排列在哪个容器里只要卡片本身被匹配到就一定会被处理。3.3 让隐藏“持久生效”MutationObserver和SPA路由监听第一版脚本交付出去之后很快就有人提issue“我滚动了一下微博又出来了。”我排查之后发现问题出在微博的加载机制上。微博网页版是一个典型的SPA单页应用页面的内容更新不靠整页刷新而是靠前端JavaScript动态操作DOM。更关键的是用户在信息流顶部那个“下拉刷新”动作会触发框架重新渲染整个时间线区域。这个过程会把我之前设置好的display: none清掉重新绘制出来的节点是“干净”的不会被隐藏。要解决这个问题就得监听DOM的变化。这里用到的核心API是MutationObserver。我给它取了个外号叫“DOM界的监控摄像头”它可以观察指定节点下的一切子节点增删和属性变化每次有变化就回调我们的隐藏函数。function observeChanges() { const observer new MutationObserver(() { hideAllWeibo(); }); observer.observe(document.body, { childList: true, subtree: true }); }注意这里观察的是document.body的子节点变化而且是subtree级的这意味着页面上任何角落新增了微博卡片都会触发一次重新隐藏。这样做的好处是“无死角”坏处是性能开销比只看单节点大。实测下来微博信息流在滚动时会非常频繁地触发MutationObserver回调。我的处理方式是给隐藏函数做一个简单的节流处理100毫秒内只执行一次避免同步执行太多次操作导致页面卡顿。let lastHideTime 0; function throttledHide() { const now Date.now(); if (now - lastHideTime 100) return; lastHideTime now; hideAllWeibo(); }除了内容动态加载微博还有一个“换页”的隐藏坑。在微博里点击“首页”“视频”“发现”这些顶部导航URL会变化但页面不会整页刷新而是局部切换渲染区域。如果脚本只在document-idle时执行一次切到新页面之后再切回来隐藏效果就会丢失。这个问题的通用解法是监听popstate和hashchange事件再配合油猴的unsafeWindow来捕获框架内的路由跳转。考虑到微博的导航切换大多会在document.title上留下痕迹我也用document.title的变化作为一个触发条件来重新隐藏聊胜于无反正不会误伤。4. 踩坑实录微博改版我的脚本一夜之间全废4.1 一次典型的失效排查链路这个项目遇到过最严重的事故是某天早上打开微博发现脚本完全失效了。页面上所有微博都活蹦乱跳地显示着我之前精心写的选择器一个都没命中。遇到这种情况我的排查路径是固定的也给同样在写用户脚本的朋友一个参考第一步确认脚本有没有被注入。打开油猴插件的控制台看当前页面是否有weibo-hide-all在执行记录。这一步排除的是脚本管理器的问题。第二步确认选择器是否命中。在DevTools的Console里手动执行一遍document.querySelectorAll(div[data-testid^HomeTimeline_]).length如果返回0说明选择器已经匹配不到任何节点了问题出在DOM结构上。第三步检查微博的前端代码是否更新。去Sources面板里翻一翻首页的JavaScript文件搜索旧的>const HIDE_SELECTORS [ article[data-testid^Feed_], article[data-testid^HomeTimeline_], div[data-testid^HomeTimeline_] article, .card-wrap ]; function findWeiboCards() { for (const selector of HIDE_SELECTORS) { const nodes document.querySelectorAll(selector); if (nodes.length 0) return nodes; } return []; }第二写一个“自检报告”模式。我在脚本里加了一个隐藏的debug开关长按某个快捷键时会在控制台输出当前选择器的命中情况。一旦收到“脚本失效”的issue我能第一眼看到是哪个选择器挂了而不是盲猜。第三不要过度追求“全量隐藏”。我后来把隐藏范围从“所有微博卡片”调整为“只隐藏时间线容器内的卡片”保留用户主动进入某条详情页时正文卡片可见。这样既能保证脚本的语义清晰也能在微博改版导致部分选择器失效时至少保证主时间线被正确隐藏不至于全线崩溃。这些保护策略听着繁琐但对一个要长期挂在浏览器里跑的工具来说是必须的成本。脚本开发最怕的不是第一次写不出来而是写完之后无法面对不断变化的外部环境。5. 实测效果、边界情况与值得扩展的方向5.1 隐藏全部微博之后页面还剩下什么脚本最终效果我在不同账号、不同场景下都实测过。在电脑端Chrome浏览器上启用weibo-hide-all后页面主要保留这些部分顶部黑色导航栏包含微博logo、搜索框、消息通知图标左侧菜单栏包含首页、视频、发现、个人中心等导航入口右侧的“热门话题”“好友推荐”等模块这些不在脚本隐藏范围内页面底部出现一片完全空白的区域需要说明的是脚本默认只处理微博卡片和时间线容器不会去动右侧推荐模块和顶部导航。如果你连这些也想清理可以在脚本配置里把它们加进隐藏列表。不过我不建议这么做因为导航入口和通知图标是微博这个工具真正有价值的部分——你用它来接收信息、处理私信和评论这部分不应该被一刀切掉。单纯的空白时间线会带来一个体验上的小问题当你点进某条微博的评论页再返回首页时浏览器会尝试恢复之前的滚动位置。但由于页面内容被隐藏了滚动位置会诡异地把空白区域往上顶。我处理这个问题的方法是在隐藏容器时给页面根节点加一个固定高度让滚动条保持在一个稳定的范围内document.documentElement.style.height 100vh; document.body.style.height 100vh;这个方法实测下来能解决大部分滚动跳跃的问题副作用是页面无法再往下滚动了。对“不想刷信息流”这个需求来说这反而更像一个正向约束。5.2 从“全隐藏”到“选择性隐藏”的三个扩展设想项目做到中后期我开始收到一些更有趣的需求能不能保留某几个特定账号的微博能不能按关键词屏蔽实现“信息流过滤”这里举三个我自己实验过的扩展方向都和weibo-hide-all的“隐藏”哲学一脉相承。方向一白名单模式。在脚本的配置区维护一个“已关注列表”只保留列表内用户发布的微博其余全部隐藏。实现思路是在MutationObserver的回调里遍历新增卡片读取卡片上的用户ID微博的style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />