你有没有过这样的经历打开B站只是想查一个技术教程结果首页推荐了一个“十分钟学会XX”的视频点进去看了五分钟侧边栏又冒出一个“程序员搞笑日常”等回过神来已经刷了一个小时最初要查的问题早就忘得一干二净。这不是你的自制力问题而是现代内容平台精心设计的“注意力陷阱”——它们的目标就是让你停留更久。今天要介绍的BiliFocus就是一款专门为B站Bilibili用户设计的浏览器插件它的核心目标只有一个帮你夺回对注意力的控制权让你在B站上能真正“专注”地学习或工作。它不是一个简单的广告屏蔽工具而是一套针对B站页面结构的深度净化方案。通过隐藏或管理那些最容易导致你分心的元素——如推荐视频流、评论区、直播入口、侧边栏等——BiliFocus能帮你将B站从一个“时间黑洞”变成一个纯粹的“学习工具”或“信息获取平台”。这篇文章将为你带来BiliFocus的完整功能演示、安装配置指南、核心原理剖析以及在不同浏览器Chrome、Edge、Firefox上的使用体验。更重要的是我会结合浏览器插件开发的技术细节告诉你这类工具是如何工作的以及如何根据自己的需求进行自定义配置。无论你是想提升学习效率的学生还是需要专注查阅技术资料的开发者这篇文章都能给你一个清晰、可落地的解决方案。1. BiliFocus 解决了什么问题不仅仅是屏蔽广告很多人第一眼看到“专注插件”会以为它就是个高级广告拦截器。这个理解只对了一半。BiliFocus的独特之处在于它精准地识别并干预了B站特有的、导致用户分心的“信息流设计”。1.1 传统广告拦截的局限性像AdBlock Plus、uBlock Origin这类通用广告拦截器主要针对的是横幅广告、弹窗广告等标准化的广告单元。它们通过维护一个庞大的规则列表如EasyList来匹配和屏蔽这些元素。然而B站的分心源往往不是传统广告个性化推荐视频流首页的“推荐”栏目、视频播放页右侧的“推荐视频”这些是平台的核心功能也是最大的时间杀手。通用规则很难也不应该去屏蔽整个功能区块。动态与关注更新“动态”页里UP主的新视频、新动态会不断刺激你的好奇心。评论区精彩的“课代表”总结和离谱的“神评论”同样让人流连忘返。直播入口、活动横幅、会员购推广这些是B站商业生态的一部分形态多样且经常变化。通用规则对此要么无能为力要么需要用户手动编写复杂的CSS选择器规则门槛很高。1.2 BiliFocus的针对性策略BiliFocus直接针对上述B站特有的分心模块进行手术式处理。它的策略通常包括元素隐藏CSS Display: None直接隐藏指定DOM元素这是最直接有效的方式。内容替换例如将无限滚动的推荐流替换为一个提示语如“专注模式已开启请专心观看当前视频”。功能限制例如限制自动播放下一个视频或者隐藏评论区发布框。界面简化提供一个极简的播放模式只保留视频播放器、进度条和必要的控制按钮。1.3 目标用户画像学生与自学者在B站观看课程、技术教程时需要避免被娱乐内容干扰。研究人员与开发者查找技术分享、会议录像时希望快速获取信息不被社区互动带偏。任何希望提升网络专注力的人意识到自己存在“B站刷不停”问题并希望借助工具进行行为矫正。简单来说如果你在使用B站时有明确的“目的性”学习、查资料而不是“消遣性”浏览那么BiliFocus就是你需要的工具。2. 浏览器插件基础与BiliFocus工作原理在深入使用之前了解一点浏览器插件Extension的工作原理能帮助你更好地理解BiliFocus的能力边界和配置方式。2.1 浏览器插件能做什么浏览器插件是基于Web技术HTML, CSS, JavaScript开发的小程序它们可以操作当前网页的DOM读取、修改、删除网页上的任何元素。这是BiliFocus实现隐藏功能的核心。注入并执行脚本在网页的上下文中运行自己的JavaScript代码从而监听事件、修改页面行为。管理浏览器标签页和窗口例如关闭标签页、创建新窗口。与浏览器原生API交互访问书签、历史记录、下载管理等需要相应权限。拥有自己的界面通过弹出窗口Popup、选项页面Options Page或侧边栏与用户交互。2.2 BiliFocus的核心技术实现BiliFocus这类内容修改插件主要依靠两个关键技术点内容脚本Content Scripts 这是插件中直接与网页交互的部分。当用户访问匹配的网址如*://*.bilibili.com/*时浏览器会自动将内容脚本注入到页面中。内容脚本可以访问页面的DOM但通常运行在一个隔离的执行环境Isolated World与页面本身的JavaScript有一定隔离这是为了安全。Manifest.json 配置文件 这是插件的“身份证”和“说明书”定义了插件的基本信息、权限、需要注入的脚本、后台脚本等。一个简化版的BiliFocus核心配置可能如下所示// manifest.json (示例结构) { manifest_version: 3, // 使用Manifest V3这是Chrome、Edge等现代浏览器的标准 name: BiliFocus - B站专注模式, version: 1.0.0, description: 隐藏B站分心元素助你专注学习与工作。, permissions: [ storage // 需要权限来保存用户的设置如哪些元素要隐藏 ], content_scripts: [ { matches: [*://*.bilibili.com/*], // 匹配所有B站域名下的页面 css: [content-style.css], // 注入用于隐藏元素的CSS js: [content-script.js] // 注入用于动态控制的JavaScript } ], action: { default_popup: popup.html, // 点击插件图标弹出的设置窗口 default_icon: icon.png }, options_page: options.html // 更详细的设置页面 }2.3 实现“隐藏”的两种方式CSS隐藏静态在content-style.css中直接编写规则。这种方式简单高效但不够灵活。/* content-style.css - 示例隐藏首页推荐和右侧推荐栏 */ .bili-feed4, /* 旧版首页推荐容器类名示例用 */ .recommend-list, /* 右侧推荐列表示例用 */ .comment-container { /* 评论区示例用 */ display: none !important; }注意实际的CSS类名需要开发者通过浏览器开发者工具F12分析B站页面结构获得且B站前端可能随时更新类名。JS动态控制动态在content-script.js中通过监听页面变化如SPA路由切换动态地查找并隐藏元素。这种方式更健壮能应对页面动态加载的内容。// content-script.js - 示例动态隐藏元素 function hideDistractions() { // 查找元素这里使用示例选择器 const recommendSidebar document.querySelector(.video-page-special-card); // 右侧推荐栏 const homeFeed document.querySelector(.bili-grid); // 首页视频流 const liveEntry document.querySelector(.live-entry); // 直播入口 const elementsToHide [recommendSidebar, homeFeed, liveEntry]; elementsToHide.forEach(el { if (el) { el.style.display none; } }); } // 页面加载完成后执行一次 document.addEventListener(DOMContentLoaded, hideDistractions); // 监听SPA页面变化如B站从首页跳转到视频页 // 可以使用MutationObserver或监听history/pushState事件这里简化处理 let lastUrl location.href; new MutationObserver(() { const url location.href; if (url ! lastUrl) { lastUrl url; setTimeout(hideDistractions, 1000); // 延迟执行等待新页面内容加载 } }).observe(document, { subtree: true, childList: true });理解了这些原理你就能明白BiliFocus的本质是一套针对B站页面结构的“净化规则”集合。优秀的插件会持续更新这些规则以应对B站前端的改版。3. 环境准备在Chrome、Edge、Firefox上安装BiliFocus由于BiliFocus是一个第三方浏览器插件它可能不会上架到官方的Chrome网上应用店或Firefox附加组件商店AMO。因此安装方式通常是“加载已解压的扩展程序”。下面以Chrome/EdgeChromium内核和Firefox为例。3.1 通用前置步骤获取插件文件从可信来源如GitHub Releases、开发者的博客下载BiliFocus的插件包通常是一个.zip文件或一个包含所有文件的文件夹。将其解压到一个你记得住的、不会轻易删除的本地文件夹中。例如D:\BrowserExtensions\BiliFocus。3.2 在Google Chrome或Microsoft Edge上安装Chrome和Edge基于Chromium的安装流程几乎完全相同。打开浏览器在地址栏输入并访问Chrome:chrome://extensions/Edge:edge://extensions/打开页面右上角的“开发者模式”开关。点击左上角的“加载已解压的扩展程序”按钮。(注此处为描述性文字实际博文可配图)在弹出的文件选择器中导航并选中你刚才解压BiliFocus文件的文件夹例如D:\BrowserExtensions\BiliFocus然后点击“选择文件夹”。安装成功后你会在扩展程序列表中看到BiliFocus并且浏览器工具栏上会出现它的图标。重要提示以这种方式安装的扩展程序在浏览器重启后可能会被禁用并提示“请停用以开发者模式运行的扩展程序”。你可以通过每次启动后点击“继续使用”来启用或者寻找将未签名扩展程序固定安装的方法对于普通用户前者是常见做法。3.3 在Mozilla Firefox上安装Firefox对未签名扩展程序的限制在不同版本中有所变化。以下是通用方法打开Firefox在地址栏输入并访问about:debugging点击左侧菜单中的“此Firefox”。点击右侧的“临时载入附加组件”按钮。(注此处为描述性文字实际博文可配图)在弹出的文件选择器中找到并选择BiliFocus文件夹内的manifest.json文件注意是选择文件不是文件夹。加载成功后插件会出现在列表中并且工具栏上会出现图标。Firefox重要区别临时加载通过about:debugging加载的扩展是临时性的。一旦你关闭Firefox下次启动时扩展就会消失需要重新加载。这对于测试非常方便但对于日常使用很麻烦。永久安装高级用户要永久安装未签名扩展通常需要使用Firefox开发者版Developer Edition或ESR版本并在about:config中将xpinstall.signatures.required设置为false。但这不是推荐给普通用户的做法因为它会降低浏览器的安全性。更推荐的方式是督促开发者将插件提交到Firefox附加组件商店进行签名。3.4 验证安装安装完成后访问B站www.bilibili.com。你应该能立即看到效果首页的推荐视频流可能被隐藏或替换。打开一个视频右侧的推荐列表可能消失。页面可能看起来更“干净”了。如果没效果请检查插件是否已启用在扩展管理页面确认。是否访问了正确的网址BiliFocus通常只对bilibili.com域名生效。尝试刷新页面F5。4. BiliFocus 核心功能演示与配置详解假设我们已经成功安装了一个功能完整的BiliFocus插件。让我们深入看看它通常具备哪些功能以及如何配置。4.1 功能概览一个典型的BiliFocus插件可能提供以下模块的开关控制首页净化隐藏/简化首页的推荐流、热门榜单、动态区。视频页净化隐藏右侧“推荐视频”栏。隐藏或折叠“评论区”。隐藏“直播”入口、“活动”横幅。隐藏视频播放器下方的“相关视频推荐”。禁止视频“自动连播”。全局净化隐藏顶部导航栏的“直播”、“热门”、“赛事”等娱乐性入口。隐藏页面底部的“友情链接”、“备案信息”等可选。专注模式提供一个极简的弹出窗口播放模式只保留最核心的播放控件。4.2 配置界面与操作点击浏览器工具栏上的BiliFocus图标通常会弹出一个小窗口Popup用于快速设置。一个示例性的Popup界面HTML结构可能如下!-- popup.html 示例 -- !DOCTYPE html html head style body { width: 250px; padding: 15px; font-family: sans-serif; } .switch { position: relative; display: inline-block; width: 40px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; } .slider:before { position: absolute; content: ; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked .slider { background-color: #00a1d6; } /* B站主题色 */ input:checked .slider:before { transform: translateX(20px); } .option { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } /style /head body h3BiliFocus 设置/h3 div classoption label forhideHomeFeed隐藏首页推荐/label label classswitch input typecheckbox idhideHomeFeed checked span classslider/span /label /div div classoption label forhideSidebar隐藏右侧推荐栏/label label classswitch input typecheckbox idhideSidebar checked span classslider/span /label /div div classoption label forhideComments隐藏评论区/label label classswitch input typecheckbox idhideComments span classslider/span /label /div div classoption label fordisableAutoplay禁止自动连播/label label classswitch input typecheckbox iddisableAutoplay checked span classslider/span /label /div button idsaveBtn保存设置/button script srcpopup.js/script /body /html对应的JavaScript (popup.js) 负责保存和读取设置// popup.js document.addEventListener(DOMContentLoaded, function() { // 从存储中加载设置 chrome.storage.sync.get([hideHomeFeed, hideSidebar, hideComments, disableAutoplay], function(data) { document.getElementById(hideHomeFeed).checked data.hideHomeFeed ! false; // 默认true document.getElementById(hideSidebar).checked data.hideSidebar ! false; document.getElementById(hideComments).checked data.hideComments || false; // 默认false document.getElementById(disableAutoplay).checked data.disableAutoplay ! false; }); // 保存设置 document.getElementById(saveBtn).addEventListener(click, function() { const settings { hideHomeFeed: document.getElementById(hideHomeFeed).checked, hideSidebar: document.getElementById(hideSidebar).checked, hideComments: document.getElementById(hideComments).checked, disableAutoplay: document.getElementById(disableAutoplay).checked }; chrome.storage.sync.set(settings, function() { alert(设置已保存刷新B站页面生效。); // 通常还需要向内容脚本发送消息通知设置已更新 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: settingsUpdated, settings: settings}); }); }); }); });4.3 内容脚本响应配置变化内容脚本 (content-script.js) 需要监听来自Popup的消息并动态应用新规则// content-script.js (续) // 从存储中读取初始设置并应用 chrome.storage.sync.get([hideHomeFeed, hideSidebar, hideComments, disableAutoplay], applySettings); // 监听来自popup的设置更新消息 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.action settingsUpdated) { applySettings(request.settings); } }); function applySettings(settings) { // 根据settings对象中的布尔值显示或隐藏对应元素 toggleElement(.home-feed-selector, settings.hideHomeFeed); toggleElement(.sidebar-recommend-selector, settings.hideSidebar); toggleElement(.comment-area-selector, settings.hideComments); // 禁止自动连播需要更精细的操作例如找到播放器的autoplay属性并设置 if (settings.disableAutoplay) { const videoPlayer document.querySelector(video); if (videoPlayer) { videoPlayer.autoplay false; // 有时还需要监听视频结束事件阻止自动播放下一个 } } } function toggleElement(selector, shouldHide) { const el document.querySelector(selector); if (el) { el.style.display shouldHide ? none : ; } } // ... 原有的 hideDistractions 函数可以整合进 applySettings 或作为初始调用通过这样的交互用户就可以方便地通过点击插件图标勾选自己需要屏蔽的分心模块实现个性化的B站净化。5. 高级功能与自定义规则对于有动手能力的用户BiliFocus可能还提供高级自定义功能。5.1 自定义CSS选择器有些插件会提供一个文本框允许用户输入自己的CSS选择器来隐藏额外的元素。例如你想隐藏某个特定的广告位或板块可以打开浏览器开发者工具F12使用元素选择器箭头图标点击那个元素在Elements面板中找到其类名或ID然后复制到插件的自定义规则里。5.2 白名单/黑名单功能黑名单模式默认隐藏所有分心元素但可以添加特定UP主或频道到白名单在这些页面放松限制。白名单模式默认不隐藏只对添加到黑名单的特定页面如娱乐分区启用净化。这通常需要插件维护一个URL模式匹配列表并在内容脚本中根据当前URL决定是否执行净化逻辑。5.3 定时与番茄钟集成更高级的插件可能会集成番茄工作法Pomodoro定时器。在专注时间段内强制开启所有净化选项在休息时间段则恢复部分或全部功能。这需要插件使用后台脚本Background Service WorkerManifest V3来管理定时任务。6. 跨浏览器兼容性分析与实战从网络热词可以看到用户对Chrome、Edge、Firefox的插件问题关注度很高。BiliFocus在这三个浏览器上的体验如何6.1 Chrome 与 Microsoft Edge (Chromium内核)兼容性极佳。两者核心扩展API几乎完全一致。为Chrome开发的插件在Edge上几乎可以无缝运行只需重新加载即可。安装方式也完全相同开发者模式加载。性能无显著差异。商店如果插件上架了Chrome网上应用店在Edge的“Microsoft Edge 加载项”商店中也可能找到或者可以通过Edge的“允许来自其他商店的扩展”选项直接安装Chrome商店的版本。主要挑战两者最大的共同挑战是Manifest V3。新版Chrome/Edge强制要求使用Manifest V3它限制了某些API如阻塞式网络请求并引入了Service Worker作为后台脚本。如果BiliFocus依赖某些V2的API可能需要重构才能上架官方商店。但通过“加载已解压扩展程序”方式安装对V2/V3的限制较小。6.2 Mozilla Firefox兼容性需要适配。Firefox使用自己的Gecko引擎和WebExtensions API。虽然现代Firefox的扩展API与Chrome高度相似但仍存在差异API命名空间Chrome使用chrome.*Firefox通常也支持chrome.*和browser.*但browser.*返回的是Promise而chrome.*多用回调。编写跨浏览器插件时需注意。Manifest.json部分字段不同如browser_action与actionbackground.scripts与background.service_worker。权限某些权限的声明方式可能不同。安装如前所述Firefox对未签名扩展的限制更严格临时加载是主要测试方式永久安装较麻烦。最佳路径是开发者将插件提交到Firefox附加组件商店AMO进行签名和分发。性能对于DOM操作类插件性能差异主要取决于页面本身和脚本效率浏览器引擎差异影响不大。6.3 开发跨浏览器插件的建议如果你想自己修改或开发一个类似BiliFocus的插件并希望兼容三大浏览器建议使用WebExtensions标准这是Chrome、Edge、Firefox共同支持的扩展标准。使用browser命名空间并Polyfill可以使用Mozilla官方提供的webextension-polyfill库让代码在所有浏览器中都能以Promise风格统一运行。分别测试在Chrome、Edge、Firefox上分别进行安装和功能测试。关注Manifest版本针对Chrome/Edge的Manifest V3和Firefox的兼容性进行配置。7. 常见问题与排查指南在使用BiliFocus或类似插件时你可能会遇到以下问题问题现象可能原因排查方式解决方案插件安装后无任何效果1. 插件未启用。2. 内容脚本未在B站页面注入。3. B站页面结构已更新CSS选择器失效。1. 检查chrome://extensions/或edge://extensions/页面确认插件已启用。2. 在B站页面按F12打开开发者工具查看“元素”面板检查插件注入的CSS或DOM修改是否生效。3. 查看控制台(Console)是否有插件报错。1. 启用插件并刷新页面。2. 联系开发者反馈或尝试自己更新CSS选择器高级用户。3. 检查插件是否针对SPA路由跳转做了处理尝试手动刷新页面。插件导致B站页面布局错乱插件隐藏了某些容器元素但其兄弟元素使用了浮动或Flex布局导致布局塌陷。使用开发者工具检查布局看是否因为某个关键容器被display: none导致其他元素错位。1. 在插件设置中关闭部分功能看是否恢复。2. 更优雅的隐藏方式是使用visibility: hidden或设置height: 0; overflow: hidden;来保留元素占位但这需要插件支持。部分元素无法隐藏如新出现的广告B站前端更新新增了广告或模块旧的CSS选择器无法匹配。使用开发者工具的元素选择器找到新元素的类名或ID。1. 等待插件作者更新规则。2. 如果插件支持自定义规则手动添加新的CSS选择器。插件图标不显示1. 插件文件缺失图标。2. 浏览器缓存问题。1. 检查插件文件夹中是否有icon.png等图标文件且manifest.json中路径正确。2. 尝试重启浏览器。1. 确保插件文件完整。2. 在扩展管理页面卸载后重新加载。Firefox中插件重启后消失通过about:debugging临时加载的扩展关闭浏览器后失效。确认安装方式。1. 每次启动后重新加载麻烦。2. 寻找已签名版本上架AMO。3. 高级用户可尝试修改about:config不推荐。插件与B站某些功能冲突如无法点赞插件脚本可能意外拦截或影响了页面的正常事件监听。1. 禁用插件看功能是否恢复。2. 在开发者工具的“事件监听器”中检查相关按钮的事件是否被移除。1. 在插件设置中排除特定页面或功能。2. 向开发者反馈具体冲突的功能。8. 安全与隐私注意事项使用第三方浏览器插件尤其是从非官方商店安装的必须关注安全和隐私。权限审查在安装前仔细查看插件的manifest.json文件如果提供或安装时的权限提示。一个专注类插件通常只需要storage保存设置和访问*://*.bilibili.com/*的权限。如果它要求tabs、bookmarks、all_urls等过于宽泛的权限需要高度警惕。代码审计对于开源插件可以查看其GitHub仓库的源代码检查是否有可疑的网络请求如将你的浏览数据发送到第三方服务器、挖矿代码或恶意操作。来源可信尽量从开发者官方GitHub、知名论坛或可信的第三方商店下载。避免使用来路不明的“破解版”或“增强版”。数据存储检查插件的设置是否完全本地化使用chrome.storage.local。好的插件不应依赖外部服务器来存储你的个性化设置。更新机制关注插件的更新频率。一个长期不更新的插件在B站前端改版后很容易失效也可能存在未修复的安全漏洞。9. 总结工具是辅助心智是根本BiliFocus这类浏览器插件是数字时代我们对抗“注意力经济”侵蚀的一件实用工具。它通过技术手段在你和环境之间建立了一道可配置的过滤器帮你减少了大量的外部干扰信号。然而工具的价值在于赋能而非替代。最根本的专注力依然来源于清晰的目标、合理的时间管理和主动的自我控制。BiliFocus可以帮你清理B站页面上的“杂草”但无法阻止你手动在地址栏输入其他娱乐网站的网址。我的建议是明确使用场景将B站的使用场景严格区分。用“工作/学习”浏览器配置文件配合BiliFocus插件专门用于看教程用另一个无插件的配置文件或浏览器用于娱乐休闲。组合使用工具可以将BiliFocus与网站阻断工具如LeechBlock、StayFocusd结合为B站甚至整个娱乐网站群设置每日访问时间限额。保持更新关注你所用插件的更新动态B站前端变化频繁及时更新才能保证最佳效果。适度自定义不要一开始就屏蔽所有功能。可以先从隐藏最干扰你的“右侧推荐栏”开始逐步增加。完全净化的页面有时会让你产生抵触心理反而不利于习惯养成。希望这篇关于BiliFocus功能演示与技术剖析的文章不仅能帮你安装和使用这个工具更能让你理解其背后的原理从而更聪明、更自主地管理自己的数字注意力环境。在信息过载的今天保持专注是一种可贵的技能而合适的工具能让这条修炼之路走得更加顺畅。
你有没有过这样的经历打开B站只是想查一个技术教程结果首页推荐了一个“十分钟学会XX”的视频点进去看了五分钟侧边栏又冒出一个“程序员搞笑日常”等回过神来已经刷了一个小时最初要查的问题早就忘得一干二净。这不是你的自制力问题而是现代内容平台精心设计的“注意力陷阱”——它们的目标就是让你停留更久。今天要介绍的BiliFocus就是一款专门为B站Bilibili用户设计的浏览器插件它的核心目标只有一个帮你夺回对注意力的控制权让你在B站上能真正“专注”地学习或工作。它不是一个简单的广告屏蔽工具而是一套针对B站页面结构的深度净化方案。通过隐藏或管理那些最容易导致你分心的元素——如推荐视频流、评论区、直播入口、侧边栏等——BiliFocus能帮你将B站从一个“时间黑洞”变成一个纯粹的“学习工具”或“信息获取平台”。这篇文章将为你带来BiliFocus的完整功能演示、安装配置指南、核心原理剖析以及在不同浏览器Chrome、Edge、Firefox上的使用体验。更重要的是我会结合浏览器插件开发的技术细节告诉你这类工具是如何工作的以及如何根据自己的需求进行自定义配置。无论你是想提升学习效率的学生还是需要专注查阅技术资料的开发者这篇文章都能给你一个清晰、可落地的解决方案。1. BiliFocus 解决了什么问题不仅仅是屏蔽广告很多人第一眼看到“专注插件”会以为它就是个高级广告拦截器。这个理解只对了一半。BiliFocus的独特之处在于它精准地识别并干预了B站特有的、导致用户分心的“信息流设计”。1.1 传统广告拦截的局限性像AdBlock Plus、uBlock Origin这类通用广告拦截器主要针对的是横幅广告、弹窗广告等标准化的广告单元。它们通过维护一个庞大的规则列表如EasyList来匹配和屏蔽这些元素。然而B站的分心源往往不是传统广告个性化推荐视频流首页的“推荐”栏目、视频播放页右侧的“推荐视频”这些是平台的核心功能也是最大的时间杀手。通用规则很难也不应该去屏蔽整个功能区块。动态与关注更新“动态”页里UP主的新视频、新动态会不断刺激你的好奇心。评论区精彩的“课代表”总结和离谱的“神评论”同样让人流连忘返。直播入口、活动横幅、会员购推广这些是B站商业生态的一部分形态多样且经常变化。通用规则对此要么无能为力要么需要用户手动编写复杂的CSS选择器规则门槛很高。1.2 BiliFocus的针对性策略BiliFocus直接针对上述B站特有的分心模块进行手术式处理。它的策略通常包括元素隐藏CSS Display: None直接隐藏指定DOM元素这是最直接有效的方式。内容替换例如将无限滚动的推荐流替换为一个提示语如“专注模式已开启请专心观看当前视频”。功能限制例如限制自动播放下一个视频或者隐藏评论区发布框。界面简化提供一个极简的播放模式只保留视频播放器、进度条和必要的控制按钮。1.3 目标用户画像学生与自学者在B站观看课程、技术教程时需要避免被娱乐内容干扰。研究人员与开发者查找技术分享、会议录像时希望快速获取信息不被社区互动带偏。任何希望提升网络专注力的人意识到自己存在“B站刷不停”问题并希望借助工具进行行为矫正。简单来说如果你在使用B站时有明确的“目的性”学习、查资料而不是“消遣性”浏览那么BiliFocus就是你需要的工具。2. 浏览器插件基础与BiliFocus工作原理在深入使用之前了解一点浏览器插件Extension的工作原理能帮助你更好地理解BiliFocus的能力边界和配置方式。2.1 浏览器插件能做什么浏览器插件是基于Web技术HTML, CSS, JavaScript开发的小程序它们可以操作当前网页的DOM读取、修改、删除网页上的任何元素。这是BiliFocus实现隐藏功能的核心。注入并执行脚本在网页的上下文中运行自己的JavaScript代码从而监听事件、修改页面行为。管理浏览器标签页和窗口例如关闭标签页、创建新窗口。与浏览器原生API交互访问书签、历史记录、下载管理等需要相应权限。拥有自己的界面通过弹出窗口Popup、选项页面Options Page或侧边栏与用户交互。2.2 BiliFocus的核心技术实现BiliFocus这类内容修改插件主要依靠两个关键技术点内容脚本Content Scripts 这是插件中直接与网页交互的部分。当用户访问匹配的网址如*://*.bilibili.com/*时浏览器会自动将内容脚本注入到页面中。内容脚本可以访问页面的DOM但通常运行在一个隔离的执行环境Isolated World与页面本身的JavaScript有一定隔离这是为了安全。Manifest.json 配置文件 这是插件的“身份证”和“说明书”定义了插件的基本信息、权限、需要注入的脚本、后台脚本等。一个简化版的BiliFocus核心配置可能如下所示// manifest.json (示例结构) { manifest_version: 3, // 使用Manifest V3这是Chrome、Edge等现代浏览器的标准 name: BiliFocus - B站专注模式, version: 1.0.0, description: 隐藏B站分心元素助你专注学习与工作。, permissions: [ storage // 需要权限来保存用户的设置如哪些元素要隐藏 ], content_scripts: [ { matches: [*://*.bilibili.com/*], // 匹配所有B站域名下的页面 css: [content-style.css], // 注入用于隐藏元素的CSS js: [content-script.js] // 注入用于动态控制的JavaScript } ], action: { default_popup: popup.html, // 点击插件图标弹出的设置窗口 default_icon: icon.png }, options_page: options.html // 更详细的设置页面 }2.3 实现“隐藏”的两种方式CSS隐藏静态在content-style.css中直接编写规则。这种方式简单高效但不够灵活。/* content-style.css - 示例隐藏首页推荐和右侧推荐栏 */ .bili-feed4, /* 旧版首页推荐容器类名示例用 */ .recommend-list, /* 右侧推荐列表示例用 */ .comment-container { /* 评论区示例用 */ display: none !important; }注意实际的CSS类名需要开发者通过浏览器开发者工具F12分析B站页面结构获得且B站前端可能随时更新类名。JS动态控制动态在content-script.js中通过监听页面变化如SPA路由切换动态地查找并隐藏元素。这种方式更健壮能应对页面动态加载的内容。// content-script.js - 示例动态隐藏元素 function hideDistractions() { // 查找元素这里使用示例选择器 const recommendSidebar document.querySelector(.video-page-special-card); // 右侧推荐栏 const homeFeed document.querySelector(.bili-grid); // 首页视频流 const liveEntry document.querySelector(.live-entry); // 直播入口 const elementsToHide [recommendSidebar, homeFeed, liveEntry]; elementsToHide.forEach(el { if (el) { el.style.display none; } }); } // 页面加载完成后执行一次 document.addEventListener(DOMContentLoaded, hideDistractions); // 监听SPA页面变化如B站从首页跳转到视频页 // 可以使用MutationObserver或监听history/pushState事件这里简化处理 let lastUrl location.href; new MutationObserver(() { const url location.href; if (url ! lastUrl) { lastUrl url; setTimeout(hideDistractions, 1000); // 延迟执行等待新页面内容加载 } }).observe(document, { subtree: true, childList: true });理解了这些原理你就能明白BiliFocus的本质是一套针对B站页面结构的“净化规则”集合。优秀的插件会持续更新这些规则以应对B站前端的改版。3. 环境准备在Chrome、Edge、Firefox上安装BiliFocus由于BiliFocus是一个第三方浏览器插件它可能不会上架到官方的Chrome网上应用店或Firefox附加组件商店AMO。因此安装方式通常是“加载已解压的扩展程序”。下面以Chrome/EdgeChromium内核和Firefox为例。3.1 通用前置步骤获取插件文件从可信来源如GitHub Releases、开发者的博客下载BiliFocus的插件包通常是一个.zip文件或一个包含所有文件的文件夹。将其解压到一个你记得住的、不会轻易删除的本地文件夹中。例如D:\BrowserExtensions\BiliFocus。3.2 在Google Chrome或Microsoft Edge上安装Chrome和Edge基于Chromium的安装流程几乎完全相同。打开浏览器在地址栏输入并访问Chrome:chrome://extensions/Edge:edge://extensions/打开页面右上角的“开发者模式”开关。点击左上角的“加载已解压的扩展程序”按钮。(注此处为描述性文字实际博文可配图)在弹出的文件选择器中导航并选中你刚才解压BiliFocus文件的文件夹例如D:\BrowserExtensions\BiliFocus然后点击“选择文件夹”。安装成功后你会在扩展程序列表中看到BiliFocus并且浏览器工具栏上会出现它的图标。重要提示以这种方式安装的扩展程序在浏览器重启后可能会被禁用并提示“请停用以开发者模式运行的扩展程序”。你可以通过每次启动后点击“继续使用”来启用或者寻找将未签名扩展程序固定安装的方法对于普通用户前者是常见做法。3.3 在Mozilla Firefox上安装Firefox对未签名扩展程序的限制在不同版本中有所变化。以下是通用方法打开Firefox在地址栏输入并访问about:debugging点击左侧菜单中的“此Firefox”。点击右侧的“临时载入附加组件”按钮。(注此处为描述性文字实际博文可配图)在弹出的文件选择器中找到并选择BiliFocus文件夹内的manifest.json文件注意是选择文件不是文件夹。加载成功后插件会出现在列表中并且工具栏上会出现图标。Firefox重要区别临时加载通过about:debugging加载的扩展是临时性的。一旦你关闭Firefox下次启动时扩展就会消失需要重新加载。这对于测试非常方便但对于日常使用很麻烦。永久安装高级用户要永久安装未签名扩展通常需要使用Firefox开发者版Developer Edition或ESR版本并在about:config中将xpinstall.signatures.required设置为false。但这不是推荐给普通用户的做法因为它会降低浏览器的安全性。更推荐的方式是督促开发者将插件提交到Firefox附加组件商店进行签名。3.4 验证安装安装完成后访问B站www.bilibili.com。你应该能立即看到效果首页的推荐视频流可能被隐藏或替换。打开一个视频右侧的推荐列表可能消失。页面可能看起来更“干净”了。如果没效果请检查插件是否已启用在扩展管理页面确认。是否访问了正确的网址BiliFocus通常只对bilibili.com域名生效。尝试刷新页面F5。4. BiliFocus 核心功能演示与配置详解假设我们已经成功安装了一个功能完整的BiliFocus插件。让我们深入看看它通常具备哪些功能以及如何配置。4.1 功能概览一个典型的BiliFocus插件可能提供以下模块的开关控制首页净化隐藏/简化首页的推荐流、热门榜单、动态区。视频页净化隐藏右侧“推荐视频”栏。隐藏或折叠“评论区”。隐藏“直播”入口、“活动”横幅。隐藏视频播放器下方的“相关视频推荐”。禁止视频“自动连播”。全局净化隐藏顶部导航栏的“直播”、“热门”、“赛事”等娱乐性入口。隐藏页面底部的“友情链接”、“备案信息”等可选。专注模式提供一个极简的弹出窗口播放模式只保留最核心的播放控件。4.2 配置界面与操作点击浏览器工具栏上的BiliFocus图标通常会弹出一个小窗口Popup用于快速设置。一个示例性的Popup界面HTML结构可能如下!-- popup.html 示例 -- !DOCTYPE html html head style body { width: 250px; padding: 15px; font-family: sans-serif; } .switch { position: relative; display: inline-block; width: 40px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; } .slider:before { position: absolute; content: ; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked .slider { background-color: #00a1d6; } /* B站主题色 */ input:checked .slider:before { transform: translateX(20px); } .option { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } /style /head body h3BiliFocus 设置/h3 div classoption label forhideHomeFeed隐藏首页推荐/label label classswitch input typecheckbox idhideHomeFeed checked span classslider/span /label /div div classoption label forhideSidebar隐藏右侧推荐栏/label label classswitch input typecheckbox idhideSidebar checked span classslider/span /label /div div classoption label forhideComments隐藏评论区/label label classswitch input typecheckbox idhideComments span classslider/span /label /div div classoption label fordisableAutoplay禁止自动连播/label label classswitch input typecheckbox iddisableAutoplay checked span classslider/span /label /div button idsaveBtn保存设置/button script srcpopup.js/script /body /html对应的JavaScript (popup.js) 负责保存和读取设置// popup.js document.addEventListener(DOMContentLoaded, function() { // 从存储中加载设置 chrome.storage.sync.get([hideHomeFeed, hideSidebar, hideComments, disableAutoplay], function(data) { document.getElementById(hideHomeFeed).checked data.hideHomeFeed ! false; // 默认true document.getElementById(hideSidebar).checked data.hideSidebar ! false; document.getElementById(hideComments).checked data.hideComments || false; // 默认false document.getElementById(disableAutoplay).checked data.disableAutoplay ! false; }); // 保存设置 document.getElementById(saveBtn).addEventListener(click, function() { const settings { hideHomeFeed: document.getElementById(hideHomeFeed).checked, hideSidebar: document.getElementById(hideSidebar).checked, hideComments: document.getElementById(hideComments).checked, disableAutoplay: document.getElementById(disableAutoplay).checked }; chrome.storage.sync.set(settings, function() { alert(设置已保存刷新B站页面生效。); // 通常还需要向内容脚本发送消息通知设置已更新 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: settingsUpdated, settings: settings}); }); }); }); });4.3 内容脚本响应配置变化内容脚本 (content-script.js) 需要监听来自Popup的消息并动态应用新规则// content-script.js (续) // 从存储中读取初始设置并应用 chrome.storage.sync.get([hideHomeFeed, hideSidebar, hideComments, disableAutoplay], applySettings); // 监听来自popup的设置更新消息 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.action settingsUpdated) { applySettings(request.settings); } }); function applySettings(settings) { // 根据settings对象中的布尔值显示或隐藏对应元素 toggleElement(.home-feed-selector, settings.hideHomeFeed); toggleElement(.sidebar-recommend-selector, settings.hideSidebar); toggleElement(.comment-area-selector, settings.hideComments); // 禁止自动连播需要更精细的操作例如找到播放器的autoplay属性并设置 if (settings.disableAutoplay) { const videoPlayer document.querySelector(video); if (videoPlayer) { videoPlayer.autoplay false; // 有时还需要监听视频结束事件阻止自动播放下一个 } } } function toggleElement(selector, shouldHide) { const el document.querySelector(selector); if (el) { el.style.display shouldHide ? none : ; } } // ... 原有的 hideDistractions 函数可以整合进 applySettings 或作为初始调用通过这样的交互用户就可以方便地通过点击插件图标勾选自己需要屏蔽的分心模块实现个性化的B站净化。5. 高级功能与自定义规则对于有动手能力的用户BiliFocus可能还提供高级自定义功能。5.1 自定义CSS选择器有些插件会提供一个文本框允许用户输入自己的CSS选择器来隐藏额外的元素。例如你想隐藏某个特定的广告位或板块可以打开浏览器开发者工具F12使用元素选择器箭头图标点击那个元素在Elements面板中找到其类名或ID然后复制到插件的自定义规则里。5.2 白名单/黑名单功能黑名单模式默认隐藏所有分心元素但可以添加特定UP主或频道到白名单在这些页面放松限制。白名单模式默认不隐藏只对添加到黑名单的特定页面如娱乐分区启用净化。这通常需要插件维护一个URL模式匹配列表并在内容脚本中根据当前URL决定是否执行净化逻辑。5.3 定时与番茄钟集成更高级的插件可能会集成番茄工作法Pomodoro定时器。在专注时间段内强制开启所有净化选项在休息时间段则恢复部分或全部功能。这需要插件使用后台脚本Background Service WorkerManifest V3来管理定时任务。6. 跨浏览器兼容性分析与实战从网络热词可以看到用户对Chrome、Edge、Firefox的插件问题关注度很高。BiliFocus在这三个浏览器上的体验如何6.1 Chrome 与 Microsoft Edge (Chromium内核)兼容性极佳。两者核心扩展API几乎完全一致。为Chrome开发的插件在Edge上几乎可以无缝运行只需重新加载即可。安装方式也完全相同开发者模式加载。性能无显著差异。商店如果插件上架了Chrome网上应用店在Edge的“Microsoft Edge 加载项”商店中也可能找到或者可以通过Edge的“允许来自其他商店的扩展”选项直接安装Chrome商店的版本。主要挑战两者最大的共同挑战是Manifest V3。新版Chrome/Edge强制要求使用Manifest V3它限制了某些API如阻塞式网络请求并引入了Service Worker作为后台脚本。如果BiliFocus依赖某些V2的API可能需要重构才能上架官方商店。但通过“加载已解压扩展程序”方式安装对V2/V3的限制较小。6.2 Mozilla Firefox兼容性需要适配。Firefox使用自己的Gecko引擎和WebExtensions API。虽然现代Firefox的扩展API与Chrome高度相似但仍存在差异API命名空间Chrome使用chrome.*Firefox通常也支持chrome.*和browser.*但browser.*返回的是Promise而chrome.*多用回调。编写跨浏览器插件时需注意。Manifest.json部分字段不同如browser_action与actionbackground.scripts与background.service_worker。权限某些权限的声明方式可能不同。安装如前所述Firefox对未签名扩展的限制更严格临时加载是主要测试方式永久安装较麻烦。最佳路径是开发者将插件提交到Firefox附加组件商店AMO进行签名和分发。性能对于DOM操作类插件性能差异主要取决于页面本身和脚本效率浏览器引擎差异影响不大。6.3 开发跨浏览器插件的建议如果你想自己修改或开发一个类似BiliFocus的插件并希望兼容三大浏览器建议使用WebExtensions标准这是Chrome、Edge、Firefox共同支持的扩展标准。使用browser命名空间并Polyfill可以使用Mozilla官方提供的webextension-polyfill库让代码在所有浏览器中都能以Promise风格统一运行。分别测试在Chrome、Edge、Firefox上分别进行安装和功能测试。关注Manifest版本针对Chrome/Edge的Manifest V3和Firefox的兼容性进行配置。7. 常见问题与排查指南在使用BiliFocus或类似插件时你可能会遇到以下问题问题现象可能原因排查方式解决方案插件安装后无任何效果1. 插件未启用。2. 内容脚本未在B站页面注入。3. B站页面结构已更新CSS选择器失效。1. 检查chrome://extensions/或edge://extensions/页面确认插件已启用。2. 在B站页面按F12打开开发者工具查看“元素”面板检查插件注入的CSS或DOM修改是否生效。3. 查看控制台(Console)是否有插件报错。1. 启用插件并刷新页面。2. 联系开发者反馈或尝试自己更新CSS选择器高级用户。3. 检查插件是否针对SPA路由跳转做了处理尝试手动刷新页面。插件导致B站页面布局错乱插件隐藏了某些容器元素但其兄弟元素使用了浮动或Flex布局导致布局塌陷。使用开发者工具检查布局看是否因为某个关键容器被display: none导致其他元素错位。1. 在插件设置中关闭部分功能看是否恢复。2. 更优雅的隐藏方式是使用visibility: hidden或设置height: 0; overflow: hidden;来保留元素占位但这需要插件支持。部分元素无法隐藏如新出现的广告B站前端更新新增了广告或模块旧的CSS选择器无法匹配。使用开发者工具的元素选择器找到新元素的类名或ID。1. 等待插件作者更新规则。2. 如果插件支持自定义规则手动添加新的CSS选择器。插件图标不显示1. 插件文件缺失图标。2. 浏览器缓存问题。1. 检查插件文件夹中是否有icon.png等图标文件且manifest.json中路径正确。2. 尝试重启浏览器。1. 确保插件文件完整。2. 在扩展管理页面卸载后重新加载。Firefox中插件重启后消失通过about:debugging临时加载的扩展关闭浏览器后失效。确认安装方式。1. 每次启动后重新加载麻烦。2. 寻找已签名版本上架AMO。3. 高级用户可尝试修改about:config不推荐。插件与B站某些功能冲突如无法点赞插件脚本可能意外拦截或影响了页面的正常事件监听。1. 禁用插件看功能是否恢复。2. 在开发者工具的“事件监听器”中检查相关按钮的事件是否被移除。1. 在插件设置中排除特定页面或功能。2. 向开发者反馈具体冲突的功能。8. 安全与隐私注意事项使用第三方浏览器插件尤其是从非官方商店安装的必须关注安全和隐私。权限审查在安装前仔细查看插件的manifest.json文件如果提供或安装时的权限提示。一个专注类插件通常只需要storage保存设置和访问*://*.bilibili.com/*的权限。如果它要求tabs、bookmarks、all_urls等过于宽泛的权限需要高度警惕。代码审计对于开源插件可以查看其GitHub仓库的源代码检查是否有可疑的网络请求如将你的浏览数据发送到第三方服务器、挖矿代码或恶意操作。来源可信尽量从开发者官方GitHub、知名论坛或可信的第三方商店下载。避免使用来路不明的“破解版”或“增强版”。数据存储检查插件的设置是否完全本地化使用chrome.storage.local。好的插件不应依赖外部服务器来存储你的个性化设置。更新机制关注插件的更新频率。一个长期不更新的插件在B站前端改版后很容易失效也可能存在未修复的安全漏洞。9. 总结工具是辅助心智是根本BiliFocus这类浏览器插件是数字时代我们对抗“注意力经济”侵蚀的一件实用工具。它通过技术手段在你和环境之间建立了一道可配置的过滤器帮你减少了大量的外部干扰信号。然而工具的价值在于赋能而非替代。最根本的专注力依然来源于清晰的目标、合理的时间管理和主动的自我控制。BiliFocus可以帮你清理B站页面上的“杂草”但无法阻止你手动在地址栏输入其他娱乐网站的网址。我的建议是明确使用场景将B站的使用场景严格区分。用“工作/学习”浏览器配置文件配合BiliFocus插件专门用于看教程用另一个无插件的配置文件或浏览器用于娱乐休闲。组合使用工具可以将BiliFocus与网站阻断工具如LeechBlock、StayFocusd结合为B站甚至整个娱乐网站群设置每日访问时间限额。保持更新关注你所用插件的更新动态B站前端变化频繁及时更新才能保证最佳效果。适度自定义不要一开始就屏蔽所有功能。可以先从隐藏最干扰你的“右侧推荐栏”开始逐步增加。完全净化的页面有时会让你产生抵触心理反而不利于习惯养成。希望这篇关于BiliFocus功能演示与技术剖析的文章不仅能帮你安装和使用这个工具更能让你理解其背后的原理从而更聪明、更自主地管理自己的数字注意力环境。在信息过载的今天保持专注是一种可贵的技能而合适的工具能让这条修炼之路走得更加顺畅。
