本文是 BiliCompact 的产品设计演示文稿的文字版，涵盖从用户痛点分析到技术方案落地的完整思考过程。

01 — 痛点：B 站首页的”信息过载”

打开 B 站首页，扑面而来的是：

• 直播流 — 大量正在直播的推荐
• 番剧推荐 — 你不一定感兴趣
• 广告 / 推广 — 商业内容
• 付费课程 — 推销入口

真正想看的视频，被淹没在其中。

1
2
3
4
5

直播 ████████████████████████████████████ 100%
番剧 ██████████████████████████████ 80%
广告 ████████████████████ 50%
付费 ██████████ 20%
真正想看的 ██████ 12%

02 — 解决方案：精简布局

之前：3 列密集网格，信息拥挤

1
2
3
4
5
6

┌─────┐ ┌─────┐ ┌─────┐
│     │ │     │ │     │
└─────┘ └─────┘ └─────┘
┌─────┐ ┌─────┐ ┌─────┐
│     │ │     │ │     │
└─────┘ └─────┘ └─────┘

之后：2 列宽松布局，一目了然

1
2
3
4
5
6

┌───────┐ ┌───────┐
│       │ │       │
└───────┘ └───────┘
┌───────┐ ┌───────┐
│       │ │       │
└───────┘ └───────┘

03 — 它能干什么？

BiliCompact 是一个非侵入式的 B 站首页精简用户脚本，核心功能：

• 数量限制 — 设置首页最大显示视频数量
• 智能过滤 — 排除直播 / 广告 / 番剧 / 付费课程
• 白名单 — 保留指定 UP 主的内容
• 一键切换 — 悬浮按钮开关，随时恢复
• 评论净化 — 删除 @ 提及，隐藏短评论
• 配置持久化 — 跨页面保存设置

04 — 配置面板

提供直观的配置界面（通过 Tampermonkey 菜单打开）：

每种页面可以独立配置数量：首页 10、热门 8、分区 10、动态 6、搜索 10。

05 — 过滤规则

预设的过滤项目，一键勾选即生效：

• ✅ 排除直播
• ✅ 排除广告 / 推广
• ✅ 排除番剧
• ⬜ 排除付费课程
• ✅ 保留推广位

06 — 评论净化 (Comment Purifier)

B 站评论区充斥着大量的 @ 提及，严重干扰阅读。

净化前：

1
2
3
4

@user123 这视频真不错 @foobar 哈哈哈 @test 再来看看
@张三 前排占位 @李四 说的对
@anonymous +1 @nobody 已三连
@abc 好活 @xyz 当赏

净化后：

1
2
3
4

这视频真不错 / 哈哈哈 / 再来看看
前排占位 / 说的对
+1 / 已三连
好活 / 当赏

技术实现上，BiliCompact 通过 Shadow DOM 穿透 技术，深入 B 站自定义组件内部：
<bili-comments> → <bili-comment-thread-renderer> → <bili-comment-renderer> → <bili-rich-text> → #contents

找到所有 <a data-type="mention"> 标签并删除，同时隐藏有效内容不足 5 字的短评论。

07 — 安装方式

只需三步：

1

① 安装 Tampermonkey  →  ② 点击安装脚本  →  ③ 刷新 B 站

脚本已发布到 GreasyFork，自动更新。

08 — 设计哲学：非侵入式

很多同类脚本会在页面中注入自己的 UI 元素（按钮、面板、遮罩层），破坏原生体验。

BiliCompact 的非侵入式设计：

• ❌ 不在页面注入任何 UI 元素
• ❌ 不修改 B 站原有 DOM 结构
• ❌ 不添加额外的样式覆盖
• ✅ 仅通过 display: none 隐藏元素
• ✅ 可通过 Tampermonkey 菜单进入配置
• ✅ 一键恢复所有隐藏内容

09 — 技术架构：四层选择器探测

B 站频繁改版，CSS 类名经常变化。BiliCompact 采用多层级降级探测策略：

1
2
3
4
5
6

第一层  id / class 精准选择器              覆盖 2%
第二层  data-* 属性探测 (data-video-id)     +3%
第三层  宽泛属性选择器 [class*="video"]      +5%
第四层  链接文本回退 (<a href="/video/">)    +80%
────────────────────────────────────────
最终覆盖率                                  99%+

每次加载页面时自动探测有效的 CSS 选择器，并缓存结果，避免重复开销。

10 — MutationObserver + 节流

为了应对 B 站 SPA（单页应用）动态加载内容，BiliCompact 使用 MutationObserver 监听 DOM 变化：

1
2
3

DOM 变化 → MutationObserver触发 → 防抖/节流(200ms) → 执行精简
                                                                 ↕
                                                         定时回查(5s)

• 200ms 节流：防止高频触发
• 300ms 防抖：等待 DOM 稳定后再执行
• 5s 定时回查：兜底处理动态加载的内容

11 — Grid 塌陷处理

B 站使用 CSS Grid 布局，简单地 display: none 卡片元素不会让网格塌陷，会留下空白。

BiliCompact 的处理方式：

1
2
3
4
5
6
7

原始网格 → 隐藏中间卡片 → height: 0 + position: absolute 压缩
┌───┐ ┌───┐     ┌───┐ ┌───┐         ┌───┐ ┌───┐
│   │ │   │     │   │ │   │         │   │ │   │
└───┘ └───┘     └───┘ └───┘         └───┘ └───┘
┌───┐ ┌───┐     ┌───┐ ┌───┐
│   │ │   │     │   │ │   │
└───┘ └───┘     └───┘ └───┘

通过同时设置 height: 0, padding: 0, position: absolute, overflow: hidden 等样式，确保网格完全塌陷，不留空白。

12 — Shadow DOM 穿透

B 站新版评论区使用 Web Components 技术，评论内容在多层 Shadow DOM 内部：

1
2
3
4
5

#shadow-host
  └── #shadow-root
        └── <bangumi>
              └── #app
                    └── #contents ✅ (目标位置)

BiliCompact 通过递归访问 element.shadowRoot 属性，穿透所有 Shadow DOM 层，直接操作内部 DOM 元素。

同时会检测用户是否同时安装了 BilibiliBlocker，自动进入兼容模式。

13 — 国际化 (i18n)

支持三种语言，自动检测浏览器语言切换：

1

简体中文  ➤  繁體中文  ➤  English

• 完整翻译了所有日志、菜单、配置面板文本
• 语言可在配置面板中手动切换
• 切换后立即生效

14 — 开源信息

• 协议: MIT License
• 源码: 完全开放，可自由使用、修改、分发
• 安装: GreasyFork 安装链接

15 — 功能速览

保持精简 · 保持专注 — BiliCompact