CiliCili 专注首页

为 Firefox 上的哔哩哔哩首页换成一个只看关注内容的工作区。

CiliCili 是运行在 https://www.bilibili.com/ 首页的 Firefox 扩展。它移除推荐流，保留官方搜索和导航，并将首页改为已关注 UP 主的投稿行与订阅合集。

体验

• 专注视觉：石墨色几何 C 扩展图标、紧凑字标与分段导航；桌面四列大封面，兼顾深色、移动端与减少动画设置。
• 只看关注：首页不展示推荐、热搜或自动播放内容。
• UP 主投稿行：每位 UP 主占一行，行内分页浏览视频；只有接近视口的行才按需加载投稿。
• 纵深无限画布：UP 主与合集列表向下滚动自动续载，没有“加载更多”按钮。
• 自动增量刷新：页面打开后自动追平上次访问以来的新投稿；页面驻留期间每 3 分钟、动态未读数上升或页面重新可见时自动扫描；右侧刷新按钮随时手动触发，先查最新视频动态，再续扫上次未完成的历史游标，不需要重抓全部投稿。
• 实时播放量：当前视口内行的视频卡片每 30 秒从单 UP 最新动态刷新播放/弹幕数；未查看的内容保持缓存值。
• 动态入口：显示官方未读数，桌面端悬停可展开最近动态；面板正文独立滚动，滚到底或点“加载更早的动态”会按官方游标继续回溯，不再只显示固定几条。置顶动态会标注“置顶”，且不会被当成新投稿插入 UP 行。进入动态后会在本地确认当前水位，只在官方计数变化时重新提示。
• 自定义排序：完整关注目录可按账号调整显示顺序，仍按每批 20 行展示。
• 合集分组：创建、重命名、排序或删除分组；合集以“分组标题 + 封面网格”排列，未分组内容单独显示。
• 本地缓存与离线播放：悬停任意视频卡片点右上角下载按钮即可缓存该视频。顶栏“本地缓存”是一个独立页面：可按全部/视频/番剧分类浏览、内嵌播放（带关闭按钮）、逐条删除，也可以粘贴任意哔哩哔哩链接、BV 号、av 号或番剧 ep 号缓存首页之外的视频，并选择清晰度（自动 / 4K / 1080P60 / 1080P / 720P / 480P / 360P）。下载过程中悬停顶栏图标可以看到实时进度。音视频轨存入页面源 IndexedDB，播放走 blob: + MediaSource，全程不经过网络。
• 官方入口新标签页：头像、动态、收藏、创作中心和 UP 主链接都在新标签页打开，不会离开当前工作区。
• 回到官方页面：视频、合集、搜索、动态、收藏和创作中心均使用官方链接在新标签页打开。

隐私与边界

• 使用 Firefox 已有的哔哩哔哩登录状态，不读取或保存密码、Cookie、请求头。
• 不爬取页面、不代理请求，也不发送遥测或站外统计。
• 只有你主动点击“缓存到本地”时才会下载该视频的媒体分片，不预取、不批量下载；缓存只存在本机浏览器里。
• 关注目录、投稿缓存、增量游标和布局设置仅保存在 Firefox 扩展存储中；账号数据按 viewerMid 隔离。
• 哔哩哔哩数据来自其网页内部接口，接口字段或路径未来可能变化。解析异常时扩展不会推进增量水位，以避免静默漏项。

安装

已签名 XPI

当前 AMO unlisted 签名包为 v0.2.21：

web-ext-artifacts/b501d1c96b2c4f58aa70-0.2.21.xpi

SHA-256：c28d31e9aa6f00409bfeeec8e716de684c0c80144fe8f3ccb3ce80753f56a138

未签名构建产物为 artifacts/cilicili-focus-0.2.21.zip，供临时加载与自动化 smoke 使用。

下载 XPI 后，在 Firefox 中打开或拖入 about:addons 安装。安装或更新后，重新打开已存在的哔哩哔哩首页标签页；旧内容脚本不会自动替换。

开发版

要求 Node.js 22+ 与 Firefox 142+。

npm install
npm run verify

然后打开 about:debugging#/runtime/this-firefox，选择“临时载入附加组件”，并选取 dist/manifest.json。Firefox 重启后临时扩展会失效。

没有哔哩哔哩账号时，可载入 dist-mock/manifest.json 查看 Mock 界面：

npm run build:mock

开发与验证

npm run build          # 生产构建：dist/
npm run build:mock     # Mock 构建：dist-mock/
npm test               # 单元测试
npm run typecheck      # TypeScript 严格类型检查
npm run lint           # 生产构建与 web-ext manifest lint
npm run verify         # 全部单元、类型、构建与 lint 门禁
npm run test:browser   # Firefox 响应式、深色、减少动画与交互 smoke
npm run test:install   # ZIP 实装 Firefox smoke
npm run package        # artifacts/cilicili-focus-<version>.zip
npm run sign           # 申请 AMO unlisted 签名

npm run sign 从 AMO_API_KEY 和 AMO_API_SECRET 环境变量读取 AMO 凭据；密钥不得提交到仓库。

签名包也使用相同安装测试，通过 PACKAGE_PATH 指定 XPI 时执行非临时安装，保留 Firefox 默认签名校验：

PACKAGE_PATH=web-ext-artifacts/b501d1c96b2c4f58aa70-0.2.21.xpi node scripts/install-smoke.mjs

架构

FeedSource 定义关注目录、投稿分页、视频动态增量、订阅合集和当前账号的数据访问契约：

• BilibiliFeedSource 是生产实现，通过页面上下文请求官方网页接口。
• MockFeedSource 是测试和界面开发实现。
• CachedFeedSource 负责持久缓存、账号隔离、增量页锚点与跨标签页协调。

LayoutSource 定义账号级 UP 排序和合集分组：生产环境使用 Firefox storage.local，Mock 环境使用内存实现。构建时按目标选择生产或 Mock 数据源，避免将模拟数据带入正式包。

缓存键、增量算法、请求预算、故障排查及发布流程见 架构、缓存与请求运维手册。

许可证

本仓库当前未声明许可证；在复用或分发代码前请先取得维护者许可。