30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度你是否也有过这样的经历本想打开B站学习一个技术教程却被首页眼花缭乱的推荐、侧边栏的直播通知、评论区有趣的“梗”吸引不知不觉刷了几个小时学习计划完全泡汤。这种“信息过载”和“注意力分散”是当代学习者、开发者乃至所有内容消费者面临的共同挑战。B站作为一个内容丰富的平台其本身的设计目标就是最大化用户停留时间这恰恰与我们的“专注”需求背道而驰。今天要介绍的BiliFocus就是一款为解决此痛点而生的浏览器插件。它并非官方出品而是由社区开发者贡献的一款开源工具其核心目标非常纯粹帮助你在B站bilibili.com上获得一个更干净、更专注的浏览与学习环境。通过屏蔽非必要的页面元素、自定义界面布局它能让你像使用一个“学习模式”或“阅读模式”一样使用B站将注意力真正聚焦在视频内容本身。本文将为你带来BiliFocus插件的完整功能演示与实战配置指南。无论你是想用它来高效学习编程课程、观看技术分享还是单纯想减少无意义的刷站时间这篇文章都将带你从零开始了解其原理、掌握其安装与配置方法并深入每一个功能细节。文章内容覆盖Chrome、Edge、Firefox三大主流浏览器的安装方式并提供详细的配置代码示例与排错思路确保你能顺利部署并定制属于自己的“专注版B站”。1. BiliFocus是什么它能解决什么问题在深入实操之前我们有必要先厘清BiliFocus的定位和边界。它不是一个内容过滤或广告拦截的万能工具其功能范围严格限定在bilibili.com域名下通过修改网页的CSS样式和DOM结构来实现界面净化。1.1 核心功能概述BiliFocus主要从以下几个维度对B站页面进行改造首页与推荐流净化可以隐藏或大幅简化B站首页的动态、热门推荐、排行榜等板块让你进入B站后直接看到搜索框或自己的收藏夹避免被算法推荐带偏。视频播放页专注模式这是核心场景。它可以隐藏视频右侧的推荐视频列表、下方的相关视频、直播挂件、评论区或仅保留顶部评论、充电按钮、分享区等一切可能分散注意力的元素让播放器占据视觉中心。侧边栏与顶栏简化可选项包括隐藏顶部的游戏中心、会员购、动态等导航标签以及侧边栏的直播入口、活动通知等。自定义样式与布局允许用户通过自定义CSS进一步调整播放器大小、页面背景色、字体等打造极致的观影或学习界面。1.2 技术实现原理浅析作为浏览器插件BiliFilter通常以两种方式实现用户样式管理器如Stylus这是一类允许用户为特定网站注入自定义CSS样式的插件。BiliFocus的功能可以通过编写一套针对B站的CSS规则来实现这种方式轻量、安全但功能相对静态。内容脚本Content Script这是更强大的浏览器扩展能力。插件可以向B站页面注入JavaScript脚本动态地监听页面变化、操作DOM元素、与插件后台通信。这可以实现更复杂的功能如根据URL模式动态启用规则、提供用户交互的开关按钮等。从“BiliFocus”这个名称和其追求的功能深度来看它很可能是一个完整的浏览器扩展Extension而非简单的用户样式。这意味着它拥有自己的弹出页面Popup、选项页面Options、后台脚本Background Script和内容脚本能够提供丰富的交互和配置能力。1.3 适用人群与场景学习者与学生观看公开课、技术教程、知识区UP主视频时需要长时间专注。效率追求者希望减少娱乐性推送干扰将B站作为纯粹的信息获取工具。前端开发者/爱好者对其实现原理感兴趣希望学习如何通过扩展修改网页样式与行为。任何受B站信息流困扰的用户想要主动夺回对自己注意力的控制权。2. 环境准备浏览器选择与插件安装BiliFocus作为一个浏览器插件其安装方式因浏览器而异。主流的Chromium内核浏览器Chrome, Edge, 新版Opera等和Firefox都支持扩展但安装源和步骤稍有不同。2.1 浏览器版本要求确保你的浏览器版本不是过于陈旧以支持现代的Web扩展API。Google Chrome: 版本 88 或更高推荐使用最新稳定版。Microsoft Edge: 版本 88 或更高基于Chromium的版本。Mozilla Firefox: 版本 85 或更高。你可以通过在浏览器地址栏输入chrome://version、edge://version或about:support(Firefox) 来查看具体版本。2.2 安装渠道与步骤由于BiliFocus可能未上架官方商店我们主要讨论两种安装方式从源码加载开发者模式和从第三方扩展商店安装。2.2.1 方案一从源码加载适用于开发者或尝鲜者这是最直接的方式前提是你已经获得了插件的源码包通常是一个包含manifest.json、脚本和资源的文件夹。获取源码从GitHub等开源仓库克隆或下载BiliFocus的发布包Release ZIP。假设解压后文件夹名为bili-focus-master。打开扩展管理页面Chrome: 地址栏输入chrome://extensions/并回车。Edge: 地址栏输入edge://extensions/并回车。Firefox: 地址栏输入about:addons然后点击左侧“扩展”菜单。开启开发者模式Chrome/Edge在扩展管理页面右上角打开“开发者模式”开关。Firefox在“扩展”页面右上角通常有“设置”齿轮图标确保已启用调试功能或直接进行下一步。加载已解压的扩展程序Chrome/Edge点击出现的“加载已解压的扩展程序”按钮。Firefox点击“调试附加组件”或类似选项然后点击“临时载入附加组件”。选择文件夹在弹出的文件选择器中导航并选中你解压得到的bili-focus-master文件夹点击“选择文件夹”。确认安装如果成功扩展列表中将出现BiliFocus的图标和名称。在Firefox中可能还需要点击“启用”按钮。注意这种方式加载的扩展在浏览器重启后可能会被禁用Chrome/Edge会提示Firefox为临时加载。每次重启后可能需要重新加载。2.2.2 方案二从第三方商店或直接安装包安装有些开源扩展会发布在Chrome Web Store、Microsoft Edge Add-ons或Firefox Add-ons以外的第三方商店如chrome.google.com仍是主要商店。如果BiliFocus已发布至这些平台安装最简单。访问商店页面在对应的浏览器中打开扩展的商店链接。点击“添加到 Chrome/Edge/Firefox”。确认权限仔细阅读扩展请求的权限例如“读取和更改您在 bilibili.com 上的数据”确认后点击“添加扩展程序”。安全提醒从非官方来源安装扩展时务必确认其来源可信如知名的开源项目GitHub仓库。警惕来路不明的.crx或.xpi安装文件。2.3 安装后验证安装成功后你的浏览器工具栏通常位于地址栏右侧会出现一个新的图标。点击它可能会显示一个简单的弹出窗口Popup用于快速开启/关闭功能或进行基础设置。同时在扩展管理页面你应该能看到BiliFocus处于“已启用”状态。3. BiliFocus核心功能详解与配置实战假设我们已经成功安装了BiliFocus插件。接下来我们以访问bilibili.com为例逐一演示其核心功能点并解释其背后的配置逻辑。由于BiliFocus的具体实现可能不同以下示例将结合常见的功能点和可能的配置方式进行说明。3.1 首页与推荐流净化目标进入B站首页(www.bilibili.com)时隐藏推荐流、热门榜单、动态等板块。操作与效果打开B站首页正常情况下你会看到满屏的视频推荐。BiliFocus生效后你可能看到以下变化推荐流区域变为空白或只保留一个搜索框和导航栏。顶部横幅/活动入口被隐藏。侧边栏可能只保留“首页”、“动态”、“收藏”等核心导航移除“直播”、“热门”、“排行榜”等入口。配置原理示例 插件很可能通过CSS选择器来隐藏这些元素。例如在插件的content.css或通过动态注入的样式中可能包含如下规则/* 隐藏首页推荐流 */ .home-popular, .recommended-container, .bili-grid { display: none !important; } /* 隐藏热门榜单 */ .rank-list, .hot-list { display: none !important; } /* 隐藏顶部活动横幅 */ .banner-row, .promote-box { display: none !important; } /* 简化侧边栏只保留特定项 */ .nav-menu li:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) { display: none; }这些CSS规则使用了!important来覆盖B站原有的样式确保隐藏生效。插件的选项页面可能允许你勾选需要隐藏的模块。3.2 视频播放页专注模式目标在观看视频时 (www.bilibili.com/video/BVxxx)最大化播放区域移除所有干扰元素。操作与效果任意打开一个B站视频。BiliFocus生效后的理想状态播放器可能被放大至占据浏览器窗口的绝大部分宽度甚至全屏化非全屏模式。右侧栏包含“推荐视频”、“UP主其他视频”、“评论区预览”的整个右侧区域被隐藏。下方区域视频简介下方的“相关视频推荐”、“直播推荐”等模块被隐藏。评论区可以完全隐藏或通过插件按钮折叠/展开。页面其他元素顶部的导航栏、底部的页脚等可能被简化或隐藏。配置原理示例 视频页的DOM结构更复杂插件需要更精确的选择器。/* 隐藏右侧推荐栏 */ #arc_toolbar_report, .video-page-aside, .bili-aside { display: none !important; } /* 隐藏视频下方的相关推荐 */ .video-recommend-container, .related-panel { display: none !important; } /* 隐藏评论区 - 激进模式 */ .comment-container, .reply-box { display: none !important; } /* 或者折叠评论区点击才展开 - 温和模式 */ .comment-container { max-height: 200px !important; overflow-y: hidden !important; position: relative; } .comment-container::after { content: 评论区已折叠 (由BiliFocus处理); display: block; text-align: center; padding: 10px; background: #f0f0f0; cursor: pointer; } /* 放大播放器容器 */ .player-container, .bpx-player-container { max-width: 100% !important; margin: 0 auto !important; }更高级的实现会通过JavaScript监听页面路由变化SPA跳转确保从首页点击视频进入播放页后专注模式依然能立即生效。3.3 插件选项配置详解一个成熟的扩展会提供选项页面Options Page供用户自定义。打开方式通常为右键点击工具栏图标 - “选项”或在扩展管理页面点击BiliFocus的“详细信息”-“扩展选项”。假设BiliFocus的选项页面包含以下配置项我们来看看如何设置!-- 这是一个模拟的选项页面结构用于说明 -- form idbiliFocusOptions h3界面元素控制/h3 label input typecheckbox namehideHomeRecommend checked 隐藏首页视频推荐流 /labelbr label input typecheckbox namehideTrending checked 隐藏热门榜单 /labelbr label input typecheckbox namehideVideoSidebar checked 隐藏视频页右侧推荐栏 /labelbr label input typecheckbox namehideComments 完全隐藏评论区 /labelbr label input typecheckbox namecollapseComments checked 折叠评论区点击展开 /labelbr h3播放器设置/h3 label 播放器最大宽度 input typerange nameplayerMaxWidth min70 max100 value90 span idwidthValue90%/span /labelbr label 默认播放画质 select namedefaultQuality option valueauto自动/option option value1080p1080P/option option value720p720P/option option value480p480P/option /select /labelbr h3高级自定义CSS/h3 textarea namecustomCSS rows10 cols80 placeholder在此处添加你自己的CSS规则将覆盖默认样式。 /* 示例将页面背景设为深色 */ body { background-color: #1a1a1a !important; color: #ccc !important; } /textareabr button typesubmit保存设置/button /form配置说明复选框用于开关各个功能模块。checked属性表示默认启用。滑块用于无级调整播放器宽度提供更灵活的布局。下拉框用于选择默认播放画质这需要插件通过脚本与B站播放器交互来实现。文本域供高级用户输入自定义CSS实现更个性化的界面修改。这里输入的规则拥有最高优先级。保存与生效点击“保存设置”后插件会通过chrome.storage.sync或browser.storage.syncAPI将配置保存到云端如果登录了浏览器账号或本地。内容脚本会读取这些配置并动态应用或移除相应的样式规则。3.4 功能开关与白名单除了全局开关插件还应提供便捷的临时禁用方式。工具栏图标点击点击插件图标弹出菜单应包含“在当前网站禁用”、“全局开启/关闭”等选项。快捷键可以在浏览器的扩展快捷键设置中如chrome://extensions/shortcuts为BiliFocus设置一个快捷键如CtrlShiftB用于快速切换启用状态。白名单功能有时你可能想在某个特定B站页面如查看自己作品的数据分析页禁用净化。高级插件会允许你将特定URL模式加入白名单。4. 手动实现核心净化功能原理与代码示例如果你是一名开发者或者BiliFocus插件暂时不符合你的需求理解其原理后你甚至可以手动创建自己的“专注脚本”。这里介绍两种轻量级方法。4.1 使用用户样式管理器StylusStylus是一个流行的用户样式管理插件允许你为任何网站编写并应用CSS。安装Stylus插件从Chrome或Firefox商店安装Stylus。为B站创建新样式访问B站任意页面。点击浏览器工具栏中的Stylus图标选择“为此网站查找更多样式”或者直接点击“管理”-“编写新样式”。在代码编辑区粘贴我们前面提到的CSS规则如隐藏右侧栏、推荐流等。在顶部的“应用样式于”区域确保URL匹配规则包含bilibili.com/*。给样式起个名字例如“B站专注模式”然后保存。优点简单、安全、性能开销小。缺点功能静态无法实现复杂的交互逻辑如点击折叠、保存配置到云端。4.2 使用用户脚本管理器TampermonkeyTampermonkey油猴更强大可以注入JavaScript实现动态功能。安装Tampermonkey插件。创建新脚本点击Tampermonkey图标 - “创建新脚本”。编写脚本以下是一个简单的示例隐藏视频页右侧栏和推荐。// UserScript // name B站简易专注模式 // namespace http://tampermonkey.net/ // version 0.1 // description 隐藏B站视频页的右侧推荐和下方相关视频 // author You // match *://*.bilibili.com/video/* // match *://*.bilibili.com/bangumi/play/* // grant none // /UserScript (function() { use strict; // 定义需要隐藏的元素选择器 const selectorsToHide [ #arc_toolbar_report, // 右侧栏 .video-page-aside, .bili-aside, .video-recommend-container, // 下方相关推荐 .related-panel, .bpx-player-sidebar, // 播放器侧边栏可能包含弹幕列表等 ]; // 创建一个函数来隐藏元素 function hideElements() { selectorsToHide.forEach(selector { const elements document.querySelectorAll(selector); elements.forEach(el { el.style.display none; }); }); } // 初始执行一次 hideElements(); // 监听DOM变化B站是单页应用页面动态加载 const observer new MutationObserver(hideElements); observer.observe(document.body, { childList: true, subtree: true }); // 也可以添加一个开关按钮到页面高级功能 // const toggleButton document.createElement(button); // toggleButton.innerText 专注模式开关; // toggleButton.style.position fixed; // toggleButton.style.top 10px; // toggleButton.style.right 10px; // toggleButton.style.zIndex 9999; // document.body.appendChild(toggleButton); // let isHidden true; // toggleButton.onclick () { // isHidden !isHidden; // const displayValue isHidden ? none : ; // selectorsToHide.forEach(selector { // document.querySelectorAll(selector).forEach(el el.style.display displayValue); // }); // }; })();说明match指定了脚本生效的URL模式。MutationObserver用于监听页面内容变化确保新加载的内容也能被处理。你可以取消注释最后一部分代码在页面上添加一个浮动按钮来手动切换功能。优点功能强大、灵活可实现交互逻辑。缺点需要一定的JavaScript知识脚本质量参差不齐可能存在安全风险。5. 常见问题与排查思路在使用BiliFocus或类似工具时你可能会遇到一些问题。以下是常见问题的排查指南。问题现象可能原因解决思路插件安装后无效果1. 插件未在B站域名下启用。2. 插件权限未正确获取。3. B站页面结构已更新选择器失效。4. 与其他扩展如广告拦截器冲突。1. 检查扩展管理页面确保BiliFocus在bilibili.com上处于“已启用”状态。2. 点击插件图标检查弹出菜单是否有“已禁用”提示尝试重新启用。3. 右键点击B站页面元素“检查”查看其CSS类或ID是否变化需要更新插件或自定义规则。4. 暂时禁用其他可能修改页面的扩展逐一排查。页面布局错乱或功能异常1. 插件CSS规则过于激进隐藏了必要元素。2. 自定义CSS语法错误。3. 脚本执行时机过早或过晚。1. 进入插件选项关闭部分过滤规则特别是“隐藏顶栏”、“隐藏底栏”等。2. 检查自定义CSS区域确保没有语法错误。可以先清空自定义CSS测试。3. 如果是自己写的用户脚本尝试调整脚本执行时机如使用window.onload或DOMContentLoaded。插件导致B站部分功能无法使用1. 关键交互元素被隐藏如点赞、投币按钮。2. 脚本干扰了B站原有的JavaScript逻辑。1. 在插件选项中仔细检查每一项隐藏规则取消勾选你认为必要的功能区域。2. 考虑使用白名单功能在需要完整功能的特定页面禁用插件。插件图标不显示或无法点击1. 扩展被浏览器禁用或损坏。2. 工具栏图标被隐藏。1. 前往扩展管理页面查看BiliFocus状态。尝试“重新加载”扩展或重新安装。2. 在扩展管理页面点击“详细信息”找到“扩展选项”或“固定到工具栏”的选项。配置无法保存或同步1. 浏览器存储权限问题。2. 未登录浏览器账号云同步失效。1. 检查浏览器设置中的Cookie和站点数据权限。2. 确认登录了Chrome/Firefox账号。同步功能依赖于此。通用排查步骤刷新页面B站是单页应用有时需要完全刷新CtrlF5才能让新规则生效。检查控制台按F12打开开发者工具查看“控制台”(Console)是否有来自插件的错误信息。禁用所有其他扩展在无痕模式下通常扩展默认不启用测试可以最快判断是否是扩展冲突。6. 最佳实践与进阶建议为了让BiliFocus或任何网页净化工具发挥最大效用同时保证浏览体验和安全这里有一些建议。6.1 安全与隐私第一权限审查安装任何扩展前仔细阅读其请求的权限。一个B站净化插件只需要“读取和更改您在 bilibili.com 上的数据”即可。如果它请求“读取您在所有网站上的数据”或“管理您的下载”就需要高度警惕。来源可信优先从官方扩展商店Chrome Web Store, Firefox Add-ons或项目官方Git仓库安装。避免下载来路不明的.crx/.xpi文件。定期更新扩展作者会修复漏洞并适配网站改版。确保扩展保持更新。6.2 精细化配置按需使用不要一刀切初期可以启用所有净化规则体验极简效果。随后根据实际需求逐步放回你可能需要的功能比如“评论区”用于技术交流或“相关视频”用于寻找系列教程。利用白名单/黑名单如果你只在学习时才需要专注模式可以为你的学习收藏夹或特定UP主页面设置规则。其他娱乐时间则可以禁用插件或使用宽松规则。组合使用工具BiliFocus负责界面净化你还可以结合网站拦截工具如LeechBlock, StayFocusd直接限制访问B站的总时长或时间段。广告拦截器如uBlock Origin拦截页面广告和跟踪器进一步提升体验。6.3 对于开发者贡献与自定义开源项目如果BiliFocus是开源项目大概率是遇到问题或有好想法可以去GitHub仓库提交Issue或Pull Request。学习资源通过阅读这类插件的源码你可以学习到Chrome/Firefox扩展开发的基本结构manifest.json, background scripts, content scripts, popup。如何与DOM交互编写高效的CSS选择器和JavaScript操作。如何使用存储API管理用户配置。创建你自己的版本如果你有特定需求比如只针对某个特定分区净化完全可以基于开源代码或从零开始打造专属工具。这是一个很好的前端实战项目。6.4 平衡专注与体验技术的目的是服务于人而不是制造新的束缚。使用BiliFocus的终极目标是帮助你更高效地获取有价值的信息而不是将B站变成一个毫无生气的工具。当你需要放松、寻找灵感或进行社交时不妨暂时关闭它享受算法带来的那份偶然的惊喜。主动控制工具而非被工具控制这才是数字时代真正的专注力。通过本文你应该已经全面了解了BiliFocus这类浏览器插件的价值、安装方法、核心功能配置以及背后的技术原理。无论是直接使用现成插件还是手动编写几行CSS、JavaScript代码你都已经掌握了在信息洪流中为自己开辟一片“学习绿洲”的能力。从今天开始尝试重新设计你的B站浏览体验把注意力真正还给自己投入到那些真正重要的视频内容中去吧。如果在配置过程中遇到任何问题欢迎在评论区交流探讨。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度