30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度在B站学习或工作时我们常常被推荐视频、弹幕、评论区、直播入口等元素分散注意力。一个名为BiliFocus的浏览器插件正是为了解决这个问题而生的。它通过屏蔽B站网页版上的非核心干扰元素帮助你回归视频内容本身实现更高效的观看和学习。无论你是需要专注备考的学生还是希望提升工作效率、避免信息过载的开发者这个工具都能提供实质性的帮助。本文将带你从零开始理解BiliFocus插件的核心功能并亲手将其部署到Chrome、Edge或Firefox浏览器中。我们不仅会完成插件的安装和基础配置还会深入其实现原理探讨如何根据个人需求进行自定义并解决安装和使用过程中可能遇到的各种问题。最终你将获得一个完全受控、高度定制化的B站浏览环境。1. 理解浏览器插件与BiliFocus的工作原理在动手之前有必要先理解我们使用的工具是什么以及它是如何工作的。这能帮助你在遇到问题时知道从哪里着手排查。1.1 浏览器插件是什么浏览器插件Browser Extension有时也被称为扩展程序是一种可以修改和增强浏览器功能的小型软件。它通常由HTML、CSS、JavaScript和JSON配置文件组成。与需要安装的独立应用程序不同插件运行在浏览器的沙箱环境中权限受到严格限制主要通过与浏览器提供的API交互来操作网页内容、管理标签页、修改网络请求等。一个典型的插件包含以下核心文件manifest.json插件的“身份证”和“说明书”定义了插件名称、版本、权限、需要注入的脚本和资源文件等元数据。浏览器通过这个文件来识别和管理插件。content_scripts内容脚本。这是实现网页内容修改如屏蔽B站侧边栏的关键。这些脚本会在页面加载时被注入到匹配的网页中并可以直接访问和操作该网页的DOM文档对象模型。background.js后台脚本。它独立于任何网页运行用于处理需要长期运行或跨页面协调的任务例如监听浏览器事件、管理插件状态。popup.html/popup.js弹出窗口的界面和逻辑。当你点击浏览器工具栏上的插件图标时显示的那个小窗口就是它常用于提供快捷设置和开关。1.2 BiliFocus的核心机制如何实现“专注”BiliFocus这类内容屏蔽插件的核心工作流程可以概括为“匹配 - 注入 - 查找 - 隐藏或移除”。匹配目标网站在manifest.json中通过matches字段声明插件需要作用于哪些网址。对于BiliFocus通常会匹配https://www.bilibili.com/*和https://m.bilibili.com/*等模式。注入内容脚本当用户访问符合匹配规则的B站页面时浏览器会自动将插件中定义的content_scriptsCSS和JS注入到该页面。定位干扰元素注入的JavaScript脚本会使用document.querySelector、document.querySelectorAll等DOM API根据CSS选择器来查找页面上的特定元素。这些选择器对应着B站页面的各种组件例如推荐视频侧边栏.bili-video-card(可能位于.recommended-container内)热门直播入口.live-card评论区某些板块.comment-header(特定类型)浮动弹幕按钮等。执行屏蔽操作找到目标元素后脚本通常会采取两种方式之一隐藏Hide设置元素的CSS样式为display: none !important;或visibility: hidden;。这种方式元素仍在DOM中只是不可见插件关闭后可以快速恢复。移除Remove直接调用element.remove()方法将元素从DOM树中删除。这种方式更彻底但恢复稍显复杂。BiliFocus的本质就是一份预先编写好的、包含大量针对B站页面元素CSS选择器的列表以及执行隐藏/移除操作的脚本。2. 环境准备与插件获取在开始安装前你需要确认两件事一是使用哪种浏览器二是如何获取BiliFocus插件文件。由于输入材料中没有提供具体的插件文件来源我们将基于开源社区常见的模式来指导你。2.1 浏览器选择与版本要求BiliFocus这类插件通常遵循WebExtensions API标准这使得它能在Chrome、Edge、Firefox等现代浏览器上运行。请确保你的浏览器版本不是过于陈旧。浏览器推荐版本备注Google Chrome88 或更高Chrome的扩展生态最丰富开发者工具对插件调试支持完善。Microsoft Edge88 或更高Edge基于Chromium与Chrome插件完全兼容安装方式相同。Mozilla Firefox86 或更高Firefox同样支持WebExtensions但部分Chrome插件可能需要微调。注意虽然Firefox也支持但一些专门为Chrome/Edge编写的插件如果使用了Firefox不支持的API或Manifest V3的特定特性可能在Firefox上无法正常工作。如果遇到问题优先在Chromium内核的浏览器上尝试。2.2 获取BiliFocus插件文件由于项目正文未提供具体来源这里列出几种常见的获取方式。请务必从可信来源获取以避免安全风险。开源代码仓库如GitHub这是最推荐的方式。搜索“BiliFocus”或类似关键词你可能会找到开源项目。如果找到通常你需要将整个项目代码下载Clone或Download ZIP到本地。一个完整的插件项目目录应包含manifest.json,content.js,background.js,popup等文件。浏览器应用商店在Chrome网上应用店或Edge外接程序商店中搜索“BiliFocus”、“B站专注”等关键词。如果能找到直接点击“添加到Chrome/Edge”是最安全便捷的方式。本文后续的“手动加载”步骤将不适用。第三方插件下载站不推荐。这些站点可能提供修改过或捆绑了恶意代码的插件文件存在隐私泄露和安全隐患。假设场景为了教程的完整性我们假设你从一个GitHub仓库下载到了一个名为BiliFocus-Extension-master.zip的压缩包并解压到了D:\Extensions\BiliFocus目录下。这是后续所有操作的起点。2.3 检查插件完整性在安装前快速检查下载的文件夹是否包含插件必需的核心文件manifest.json(必须存在)content.js或content_scripts目录 (至少有一个内容脚本)popup.html或options.html(可选但通常有)打开manifest.json文件确认其基本结构。一个最简单的示例如下{ manifest_version: 3, name: BiliFocus - B站专注模式, version: 1.0.0, description: 屏蔽B站干扰元素助你专注内容。, permissions: [storage], content_scripts: [ { matches: [https://www.bilibili.com/*, https://m.bilibili.com/*], js: [content.js], css: [content.css] } ], action: { default_popup: popup.html } }关键字段说明manifest_version: 目前主流是3Manifest V3部分旧插件可能是2。content_scripts.matches: 定义了插件生效的网站。content_scripts.js/css: 定义了要注入的脚本和样式文件。3. 在Chrome/Edge中手动加载插件如果插件不是从官方商店安装就需要以“开发者模式”手动加载已解压的扩展程序。Chrome和Edge的操作流程几乎完全相同。3.1 开启开发者模式打开Chrome或Edge浏览器。在地址栏输入并访问chrome://extensions/(Chrome) 或edge://extensions/(Edge)。在页面右上角找到并开启“开发者模式”开关。开启后页面会刷新并出现新的按钮。3.2 加载已解压的扩展程序点击新出现的“加载已解压的扩展程序”按钮。在弹出的文件选择器中导航到你存放插件源代码的文件夹例如D:\Extensions\BiliFocus选择整个文件夹然后点击“选择文件夹”。加载成功后扩展程序列表中将出现BiliFocus插件并显示其图标、名称和描述。3.3 验证安装与基本操作固定到工具栏点击扩展程序列表旁的“拼图”图标找到BiliFocus点击其右侧的“图钉”图标将其固定在浏览器工具栏方便快速访问。访问B站测试新开一个标签页访问https://www.bilibili.com。如果插件生效你应该会立即看到页面发生变化推荐视频栏、直播入口等可能已经消失。使用弹出窗口点击工具栏上的BiliFocus图标通常会弹出一个小窗口里面可能包含开关、屏蔽项勾选等简单配置。4. 在Firefox中安装插件Firefox的安装方式略有不同它主要支持通过官方附加组件商店AMO安装签名插件。对于本地未签名的插件需要使用临时加载或调试模式。4.1 通过about:debugging临时加载适合开发/测试在Firefox地址栏输入about:debugging并访问。点击左侧菜单中的“此Firefox”。在右侧页面点击“临时载入附加组件…”按钮。选择你的插件目录中的manifest.json文件。加载成功后插件会出现在列表中并有一个“禁用”按钮。同时工具栏上会出现插件图标。重要通过此方式加载的插件在浏览器重启后会失效需要重新加载。这主要用于插件开发测试。4.2 通过about:config永久加载未签名插件不推荐Firefox默认禁止安装未签名的扩展。虽然可以通过修改about:config中的xpinstall.signatures.required为false来绕过但这严重降低了浏览器的安全性不建议普通用户操作。最佳实践是将插件提交给Firefox附加组件商店审核上架。5. BiliFocus核心功能详解与自定义一个基础的BiliFocus插件可能已经屏蔽了常见干扰。但你可能希望自定义屏蔽规则例如保留评论区但屏蔽“相关推荐”或者只在特定时间启用。5.1 理解插件配置结构通常插件的配置逻辑写在content.js和popup.js中。我们需要找到定义“屏蔽规则”的地方。打开content.js你可能会看到类似这样的代码// 示例一个简单的元素选择器列表和屏蔽函数 const selectorsToHide [ // 首页推荐 .bili-video-card.is-rcmd, .recommended-container, // 侧边栏直播 .live-card, .live-home-card, // 浮动元素 .international-header .bili-banner, // 评论区热评、推广等可选 // .comment-header.hot, // .comment-item.ad ]; function hideDistractingElements() { selectorsToHide.forEach(selector { const elements document.querySelectorAll(selector); elements.forEach(el { // 方式1隐藏 el.style.display none; // 方式2移除更彻底 // el.remove(); }); }); } // 页面加载后执行 if (document.readyState loading) { document.addEventListener(DOMContentLoaded, hideDistractingElements); } else { hideDistractingElements(); } // 监听SPA页面变化如B站从首页跳转到视频页 const observer new MutationObserver(hideDistractingElements); observer.observe(document.body, { childList: true, subtree: true });5.2 如何自定义屏蔽规则如果你想修改屏蔽的内容你需要找到正确的CSS选择器在B站网页上按F12打开开发者工具。使用左上角的“元素选择器”工具箭头图标点击你想屏蔽的元素。在开发者工具的“元素”面板中该元素会被高亮。你需要找到一个能唯一、稳定标识该元素的CSS类名或ID。优先使用类名以.开头如.bili-video-card。右键该元素选择“复制” - “复制选择器”可以获得完整路径但通常过于复杂需要简化。修改插件代码打开插件的content.js文件。在selectorsToHide数组中添加或删除对应的选择器字符串。例如你想屏蔽视频播放页面的“下一个视频”自动预览可能需要添加.bpx-player-auxiliary-area(这是一个示例实际选择器需自行查找)。保存文件。重新加载插件回到chrome://extensions/页面。找到BiliFocus插件点击其下方的“刷新”图标或先关闭再打开开关。刷新B站页面查看修改是否生效。5.3 实现配置界面进阶一个成熟的插件应该提供用户界面来动态管理屏蔽规则而不是让用户直接修改代码。这通常通过以下步骤实现在popup.html中创建复选框列表每个复选框对应一个屏蔽项。在popup.js中读取用户选择并通过chrome.storage.sync或chrome.storage.localAPI 保存配置。在content.js中通过chrome.storage.onChanged监听配置变化或每次执行时读取存储的配置动态决定屏蔽哪些元素。一个简化的popup.js示例// popup.js document.addEventListener(DOMContentLoaded, function() { const checkboxes { hideRecommend: document.getElementById(hideRecommend), hideLive: document.getElementById(hideLive), hideComments: document.getElementById(hideComments) }; // 从存储中加载保存的设置 chrome.storage.sync.get([settings], function(result) { const settings result.settings || {}; checkboxes.hideRecommend.checked settings.hideRecommend ! false; // 默认true checkboxes.hideLive.checked settings.hideLive ! false; checkboxes.hideComments.checked settings.hideComments true; // 默认false }); // 当复选框变化时保存设置 Object.keys(checkboxes).forEach(key { checkboxes[key].addEventListener(change, function() { chrome.storage.sync.get([settings], function(result) { const settings result.settings || {}; settings[key] checkboxes[key].checked; chrome.storage.sync.set({settings: settings}, function() { // 通知内容脚本配置已更新 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: settingsUpdated, settings: settings}); }); }); }); }); }); });对应的content.js需要增加监听消息和根据配置执行屏蔽的逻辑。6. 常见问题排查与解决方案在安装和使用BiliFocus过程中你可能会遇到一些问题。以下是常见问题的排查路径。6.1 插件安装失败或无法加载问题现象可能原因检查与解决方案“无法加载清单文件”manifest.json文件格式错误、缺失或版本不兼容。1. 检查manifest.json是否存在且位于根目录。2. 用JSON验证工具检查文件语法。3. 确认manifest_version是2或3并与浏览器版本兼容。“扩展程序无效”插件目录结构不正确或关键文件缺失。确保manifest.json中引用的所有JS、CSS文件都存在于正确路径。加载后不显示图标插件没有定义action或browser_action。检查manifest.json中是否包含action或browser_action字段并正确指向popup.html。在Firefox中无法永久安装插件未签名。使用about:debugging临时加载或考虑将插件提交至Firefox附加组件商店。6.2 插件已启用但无效果问题现象可能原因检查与解决方案访问B站页面无变化1. 内容脚本未注入。2. 选择器失效。3. 页面结构已更新。1. 按F12在“控制台”查看是否有插件报错。2. 在“元素”面板查看目标元素是否存在其CSS类名是否已改变。3. 刷新插件并强制刷新B站页面CtrlF5。只有部分功能生效屏蔽规则列表不完整或选择器过于具体。1. 检查content.js中的selectorsToHide数组是否包含了所有你想屏蔽的元素。2. 使用更通用的父级选择器例如用.recommended-container代替其内部复杂的子元素选择器。页面布局错乱插件CSS隐藏了某些容器元素导致其兄弟元素布局异常。修改屏蔽逻辑尝试使用visibility: hidden或设置height: 0; overflow: hidden;代替display: none或者只隐藏内部子元素而非整个容器。6.3 插件导致浏览器变慢或崩溃问题现象可能原因检查与解决方案打开B站时页面响应变慢内容脚本选择器过于宽泛或MutationObserver监听过于频繁。1. 优化CSS选择器使其更精确。2. 为MutationObserver设置更合适的监听选项或增加防抖debounce逻辑。浏览器偶尔无响应插件脚本陷入死循环或与页面其他脚本冲突。1. 检查content.js中是否有循环逻辑错误。2. 在扩展管理页面暂时禁用其他插件排查冲突。6.4 配置无法保存或同步问题现象可能原因检查与解决方案弹出窗口的设置重启后丢失使用了chrome.storage.local但未正确处理。确保在popup.js和content.js中正确调用chrome.storage.local.get/setAPI并处理异步回调。配置在不同电脑间不同步使用了chrome.storage.local而非chrome.storage.sync。local存储仅限本地sync会随Chrome账号同步。根据需求在manifest.json的permissions中声明并正确使用。7. 最佳实践与安全建议使用第三方浏览器插件尤其是手动加载的需要格外注意安全和隐私。优先选择官方商店Chrome网上应用店和Firefox附加组件商店有安全审核机制能降低恶意插件风险。审查插件权限在安装前仔细查看插件要求的权限。一个内容屏蔽插件通常只需要“存储”和访问特定网站数据的权限。如果它要求“读取和更改您在所有网站上的数据”就需要高度警惕。定期更新B站前端页面会频繁改版导致旧的CSS选择器失效。关注插件GitHub仓库的更新或定期手动检查规则是否需要调整。最小化屏蔽原则不要过度屏蔽。只隐藏真正干扰你的元素保留必要的导航和功能以免影响正常使用。可以从一个较短的规则列表开始逐步添加。自行构建与审计如果具备前端开发能力最安全的方式是fork开源项目自行审查代码后构建。你可以清晰地知道插件做了什么并完全控制其行为。生产环境与学习环境如果你在办公或学习的关键电脑上使用建议只安装经过严格验证的插件。在用于开发、测试或娱乐的电脑上可以更自由地尝试新插件。通过以上步骤你不仅成功安装和配置了BiliFocus插件还深入理解了其工作原理并掌握了自定义和排错的能力。这种从使用到理解再到改造的过程正是技术实践的核心价值。你可以将这套方法应用到任何类似的浏览器插件上从而真正掌控自己的浏览体验。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度