尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

前端技术实战:利用CSS与JavaScript定制微博信息流,去除广告与干扰模块

前端技术实战:利用CSS与JavaScript定制微博信息流,去除广告与干扰模块 最近刷微博时是不是总被开屏广告、信息流里的“博主赞过”和各种推广内容打断想找个清爽的浏览体验却感觉无从下手。其实通过一些简单的配置和工具我们完全可以自定义微博的展示内容打造一个更纯净、更聚焦的信息流。本文将手把手教你如何利用浏览器扩展、脚本以及微博自身的设置实现“干掉”烦人广告、隐藏特定模块让你刷微博的体验直线上升。无论你是前端爱好者想了解实现原理还是普通用户只想求个清净都能从本文中找到可操作的方案。1. 微博页面“不速之客”分析与实现原理在动手清理之前我们有必要了解一下这些干扰内容是如何出现在页面上的以及我们有哪些“武器”可以对付它们。1.1 常见干扰类型及其技术实现微博页面的干扰内容主要分为以下几类其背后的技术原理也决定了我们的清理策略开屏广告通常是页面初始化时加载的一个全屏或半屏的div容器内部通过 iframe 或直接嵌入广告代码。它往往有一个独立的 CSS 类名或 ID例如splash-ad、launch-ad等。信息流推广“广告”标识这类内容被插入在正常微博流中。前端开发中它们通常有特定的数据属性如>/* 示例隐藏所有类名包含‘ad’的元素 */ div[class*ad] { display: none !important; }JavaScript 脚本操作DOM对于更复杂的情况比如元素是动态加载的、没有固定类名或者需要在移除前执行一些逻辑如取消事件监听就需要使用 JavaScript。我们可以监听 DOM 的变化当目标元素出现时立即将其移除或修改。// 示例使用 MutationObserver 监听动态加载的‘博主赞过’模块 const observer new MutationObserver((mutations) { mutations.forEach((mutation) { mutation.addedNodes.forEach((node) { if (node.nodeType 1 node.querySelector([node-typelike_feed])) { node.remove(); // 直接移除该节点 } }); }); }); observer.observe(document.body, { childList: true, subtree: true });1.3 实施路径用户脚本与浏览器扩展普通用户不可能直接去修改微博的源代码。因此我们需要借助能在浏览器中运行自定义代码的工具用户脚本User Script一段 JavaScript 代码通过脚本管理器如 Tampermonkey、Violentmonkey在指定的网站加载时自动执行。它是实现定制化功能的主力。浏览器扩展Extension功能更强大的插件除了能注入脚本还能修改请求头、管理缓存等。一些专注于广告拦截的扩展如 uBlock Origin本身就通过维护庞大的过滤规则列表来屏蔽广告。接下来我们将从最简单的设置开始逐步深入到高级定制。2. 环境与工具准备工欲善其事必先利其器。我们需要准备好以下工具它们都是免费且安全的。2.1 浏览器选择推荐使用Google Chrome、Microsoft EdgeChromium 内核或Firefox。这些浏览器对扩展和用户脚本的支持最完善。2.2 必备工具安装我们将主要依赖两个工具广告拦截扩展uBlock Origin作用基于规则列表拦截广告和跟踪器能处理大部分开屏广告和横幅广告。安装打开浏览器的扩展商店Chrome Web Store 或 Firefox Add-ons搜索 “uBlock Origin”认准作者Raymond Hill点击“添加到浏览器”。用户脚本管理器Tampermonkey作用管理并运行我们编写的或从社区安装的针对特定网站的用户脚本。它是实现高度自定义的关键。安装同样在扩展商店搜索 “Tampermonkey” 并安装。安装后浏览器工具栏会出现其图标。安装完成后你的浏览器扩展栏应该类似下图图示为 Chrome[扩展图标] uBlock Origin | Tampermonkey3. 基础清理使用微博官方设置与广告拦截器首先我们利用微博自带的功能和通用广告拦截器解决一部分问题。3.1 微博网页版个性化设置登录微博网页版 (weibo.com)点击右上角头像 -“账号设置”-“隐私设置”。个性化内容推荐可以尝试关闭“个性化内容推荐”和“个性化广告推荐”。这虽然不能完全移除广告但可能减少基于你兴趣的精准推广。注意这些设置位置可能随微博改版而变动且效果有限。3.2 配置 uBlock Origin 增强过滤uBlock Origin 默认的规则列表已经能屏蔽很多广告。我们可以为其添加针对微博的强化规则。点击浏览器工具栏的 uBlock Origin 图标 (uBlock图标)。点击弹出窗口底部的齿轮图标“打开仪表板”。切换到“规则列表”选项卡。在底部“自定义”区域点击“导入”。粘贴以下针对微博的过滤规则这是一些社区维护的规则示例! 屏蔽微博开屏广告 ||simg.s.weibo.com/weibo$image,domainweibo.com ! 屏蔽信息流推广 weibo.com##div[class*ads] weibo.com##div[node-typefeed_list_ad] ! 屏蔽侧边栏热门话题等 weibo.com##.PCD_pictext weibo.com##.UG_slider点击“应用更改”。然后回到“我的规则”选项卡你可能会看到刚刚导入的规则。确保它们已启用。重要提示以上规则是示例微博的 DOM 结构经常变化规则可能失效。uBlock Origin 更擅长处理基于 URL 和通用广告模式的拦截对于“博主赞过”这类功能模块效果不佳。这就需要我们动用 Tampermonkey。4. 高级定制使用 Tampermonkey 编写用户脚本这是实现“干掉”所有干扰内容的核心步骤。我们将创建一个自己的用户脚本。4.1 创建新脚本点击浏览器工具栏的 Tampermonkey 图标选择“创建新脚本”。你会看到一个编辑器界面里面有一些预设的模板代码。4.2 编写脚本元信息替换编辑器中的全部内容为以下代码。这部分定义了脚本的基本信息。// UserScript // name 微博清爽计划 - 去广告与净化 // namespace http://tampermonkey.net/ // version 1.0.0 // description 移除微博开屏广告、信息流推广、“博主赞过”等模块净化信息流。 // author You (请替换为你的名字) // match *://weibo.com/* // match *://*.weibo.com/* // match *://weibo.cn/* // grant none // run-at document-end // /UserScriptmatch: 指定脚本在哪些网址生效。这里覆盖了微博的主要域名。run-at: 指定脚本在页面加载的哪个阶段运行。document-end表示在 DOM 加载完成后运行确保我们能找到页面元素。4.3 编写核心清理函数在元信息代码块下方继续编写 JavaScript 函数。我们将功能模块化便于维护。(function() { use strict; // 工具函数延迟执行 const delay (ms) new Promise(resolve setTimeout(resolve, ms)); // 1. 移除开屏广告 function removeSplashAd() { // 常见开屏广告选择器需根据实际情况更新 const adSelectors [ .splash-ad, .launch-ad, #splashAd, div[class*splash], div[style*position: fixed][style*z-index: 9999] // 高权重固定定位元素 ]; for (const selector of adSelectors) { const adElement document.querySelector(selector); if (adElement) { adElement.remove(); console.log([微博清爽] 已移除开屏广告: ${selector}); break; // 移除一个即可 } } } // 2. 移除信息流中的推广微博 function removeFeedPromotions() { // 推广微博通常有特定标识 const promotionSelectors [ [node-typefeed_list_ad], // 微博的广告节点类型 .adsbox, .promotion, div[class*ad-], a:has( span:contains(“广告”)), // 包含“广告”文字的链接 div:has( div span:contains(“推广”)) // 包含“推广”文字的容器 ]; promotionSelectors.forEach(selector { document.querySelectorAll(selector).forEach(el { // 尝试向上找到整个微博卡片容器并移除 let card el.closest([mid]) || el.closest(.WB_feed) || el.closest(.WB_cardwrap); if (card) { card.remove(); console.log([微博清爽] 已移除推广微博: ${selector}); } else { el.remove(); } }); }); } // 3. 隐藏或移除“博主赞过”模块 function removeLikedByAuthor() { // “博主赞过”模块的选择器关键需要你自行查找 const likedModuleSelectors [ [node-typelike_feed], // 可能的节点类型 .WB_feed_like, // 可能的类名 div:has( h2:contains(“博主赞过”)), // 通过标题文字定位 div:has( div span:contains(“赞过”)) ]; likedModuleSelectors.forEach(selector { document.querySelectorAll(selector).forEach(el { el.style.display none; // 或者直接移除: el.remove(); console.log([微博清爽] 已隐藏“博主赞过”模块: ${selector}); }); }); } // 4. 移除侧边栏杂项热门话题、可能感兴趣的人等 function removeSidebarClutter() { const sidebarSelectors [ .PCD_pictext, // 热门话题 .UG_slider, // 可能感兴趣的人 .WB_side_a, // 侧边栏广告位 .title .S_txt1:contains(“热门”) // 包含“热门”的标题栏 ]; sidebarSelectors.forEach(selector { document.querySelectorAll(selector).forEach(el { // 找到其父级侧边栏区块进行整体移除更干净 const parentSection el.closest(.WB_side) || el.closest(.PCD_sidebar); if (parentSection) { parentSection.remove(); } else { el.remove(); } console.log([微博清爽] 已清理侧边栏模块: ${selector}); }); }); } // 主执行函数 async function main() { console.log([微博清爽] 脚本开始执行); // 初始清理 removeSplashAd(); removeFeedPromotions(); removeLikedByAuthor(); removeSidebarClutter(); // 微博是单页应用(SPA)内容动态加载需要持续监听 const observer new MutationObserver((mutations) { // 当观察到 DOM 变化时重新执行清理 removeFeedPromotions(); removeLikedByAuthor(); }); // 开始监听 body 子元素的变化 observer.observe(document.body, { childList: true, subtree: true }); // 额外监听路由变化针对 SPA 页面跳转 let lastUrl location.href; setInterval(() { const currentUrl location.href; if (currentUrl ! lastUrl) { lastUrl currentUrl; console.log([微博清爽] 检测到页面跳转重新执行清理); // 短暂延迟后执行等待新内容加载 setTimeout(() { removeSplashAd(); removeFeedPromotions(); removeLikedByAuthor(); removeSidebarClutter(); }, 1000); } }, 500); } // 等待页面基本元素加载后执行 if (document.readyState loading) { document.addEventListener(DOMContentLoaded, main); } else { main(); } })();4.4 保存并启用脚本按Ctrl S(Windows/Linux) 或Cmd S(Mac) 保存脚本。关闭编辑器。在 Tampermonkey 的管理面板中确保你刚创建的脚本开关是启用Enabled状态。5. 关键步骤如何定位元素选择器上面脚本中的selector选择器是核心。微博前端代码会更新选择器可能失效。你需要学会自己找到它们。5.1 使用浏览器开发者工具在微博页面右键点击你想移除的元素例如“博主赞过”的标题栏选择“检查”或“检查元素”。开发者工具会打开并定位到该元素对应的 HTML 代码。在元素上右键选择“Copy”-“Copy selector”或“Copy JS path”。但这种方式得到的路径可能很长且脆弱。更推荐的方法在元素面板中仔细观察该元素及其父级元素的class、id或node-type等属性。寻找一个相对稳定、唯一的特征。例如你可能发现“博主赞过”的整个模块在一个div里它的node-type属性是like_feed。那么选择器就是[node-typelike_feed]。或者它的类名是WB_feed_like那么选择器就是.WB_feed_like。5.2 更新脚本中的选择器一旦你找到了新的、有效的选择器就回到 Tampermonkey 编辑器修改removeLikedByAuthor函数中的likedModuleSelectors数组将新的选择器字符串添加进去。const likedModuleSelectors [ [node-typelike_feed], // 你发现的有效属性 .WB_feed_like, // 你发现的有效类名 div:has( h2:contains(“博主赞过”))’ // 备用方案 ];保存脚本后刷新微博页面即可生效。6. 常见问题与排查思路在实施过程中你可能会遇到以下问题问题现象可能原因排查与解决思路脚本安装后没有任何效果1. 脚本未启用。2.match规则不匹配当前网址。3. 选择器全部失效。1. 检查 Tampermonkey 面板确保脚本开关是绿色。2. 确认你访问的是weibo.com或weibo.cn。3. 按第5节的方法检查并更新选择器。开屏广告仍然出现1. 广告加载时机早于脚本运行。2. 广告元素的选择器不对。1. 尝试将脚本的run-at改为document-start需谨慎可能影响页面功能。2. 使用开发者工具检查开屏广告元素更新removeSplashAd函数中的选择器。“博主赞过”模块去不掉选择器失效。这是最常见的情况。这是关键步骤必须使用开发者工具第5节找到当前页面上该模块最新的、稳定的属性如class,node-type并更新脚本。页面布局错乱或功能缺失脚本误删了非目标元素。检查脚本中的选择器是否过于宽泛如div[class*ad]可能误伤。尽量使用更精确的选择器或改为style.display‘none’以便恢复。可以在脚本中console.log输出移除的元素便于调试。动态加载的内容清理不掉MutationObserver未正确工作或选择器对动态内容无效。确保observer.observe的参数包含了subtree: true。检查动态加载的元素是否使用了不同的 HTML 结构可能需要为动态内容编写单独的选择器。uBlock Origin 规则不生效规则语法错误或规则被覆盖。在 uBlock Origin 仪表板的“我的规则”中检查规则。可以暂时禁用其他规则列表进行测试。微博的广告 URL 可能频繁更换通用规则容易失效。7. 最佳实践与进阶建议为了让你的“清爽微博”体验更稳定、更安全请遵循以下建议选择器精确性原则尽量使用唯一的id、特定的node-type或组合选择器。避免使用*包含这类模糊匹配除非必要。例如用[node-typefeed_list_ad]比div[class*ad]要好得多。最小影响原则优先使用display: none隐藏元素而不是直接remove()。这样如果脚本有 bug你可以通过浏览器控制台临时将display改回来恢复布局。只有在确认无误后再改为移除。脚本维护微博前端大约每几周或几个月会有一次较大的改版。养成习惯当发现广告或干扰模块重新出现时就用开发者工具检查一下花几分钟更新选择器。你可以将脚本版本号version更新。社区资源利用你并非孤军奋战。访问像Greasy Fork这样的用户脚本分享网站搜索“weibo”或“微博”可以找到许多其他人维护的类似脚本。你可以学习他们的选择器或者直接安装使用注意安全审查代码。但自己编写和修改能让你更了解原理适应性更强。移动端怎么办上述方法主要针对微博网页版。对于手机 App由于系统限制普通用户无法直接注入脚本。但你可以尝试使用第三方客户端一些由开发者维护的第三方微博客户端可能内置了去广告功能。使用去广告的修改版App注意安全风险这类应用可能被植入恶意代码务必从可信来源获取。路由器层面广告过滤在家庭路由器上安装如 AdGuard Home 等 DNS 过滤服务可以在网络层拦截部分广告域名对 App 和网页都有效但无法处理“博主赞过”这类功能模块。合法与合理使用去除广告会影响微博的平台收入。请将此技术学习用于个人体验优化勿用于商业用途或大规模分发。理解并尊重平台通过广告获得收入的商业模式。通过本文的步骤你不仅获得了一个清爽的微博浏览环境更重要的是掌握了前端调试、选择器定位和用户脚本编写这些非常实用的开发者技能。下次再遇到任何网页上的“不速之客”你都知道该如何“请走”它们了。动手试试定制你的专属浏览体验吧。
返回列表