🤖 100% AI Generated - 本项目完全使用 Claude Code + Kimi K2.5 Thinking Vibe Coding 开发完成
一个简单实用的 Chrome / Edge 浏览器插件，帮助你在浏览 Bilibili（B站）时自动屏蔽包含特定关键词的内容。
- 智能屏蔽：支持屏蔽视频标题、UP主名称、动态内容、评论等
- 悬停快捷菜单 🆕：鼠标悬停在视频上自动弹出快捷屏蔽菜单，一键屏蔽标题/UP主/当前视频
- OCR 图像识别 🆕：智能识别视频封面和预览画面中的文字，即使标题不包含关键词也能精准屏蔽
- 自定义关键词：自由添加、删除屏蔽关键词（最多 100 个）
- 多种屏蔽模式：
- 完全隐藏：彻底移除相关内容，页面更清爽
- 模糊显示：内容模糊处理，点击可查看
- 半透明：淡化显示，仍可识别
- 屏蔽统计：实时显示已屏蔽内容数量
- 配置导入/导出：方便备份和迁移设置（导入时会自动校验格式）
- 实时生效：无需刷新页面，设置立即生效
- 精准匹配：支持关键词大小写不敏感匹配
- SPA 路由感知：B站站内跳转后自动重新扫描
-
下载本项目文件夹
bilibili-blocker到本地 -
打开扩展程序页面
- Chrome：地址栏输入
chrome://extensions/ - Edge：地址栏输入
edge://extensions/
- Chrome：地址栏输入
-
打开右上角的「开发者模式」开关
-
点击「加载已解压的扩展程序」，选择
bilibili-blocker文件夹 -
浏览器工具栏会出现插件图标，点击即可使用
注意：本插件使用 Manifest V3，不支持 Firefox 的临时加载方式。
- 点击浏览器工具栏的插件图标
- 在输入框中输入要屏蔽的关键词（如：王者荣耀）
- 点击「添加」或按回车键
- 已打开的 B站页面会立即生效，无需刷新
开启「悬停快捷菜单」后，将鼠标悬停在任意视频卡片上 0.8 秒，会自动弹出快捷菜单：
- 屏蔽标题：将该视频标题添加到屏蔽关键词列表
- 屏蔽UP主：将该 UP 主名称添加到屏蔽关键词列表
- 立即屏蔽：仅屏蔽当前这个视频（不影响其他视频）
提示：悬停菜单支持智能识别，即使视频标题很长也会自动截断显示。
开启「智能图像识别」后，插件会：
- 分析视频封面图片中的文字
- 识别视频预览画面中的内容
- 即使视频标题不含关键词，也能根据画面内容精准屏蔽
示例场景：
- 标题为「今日排位上分局」但封面有大大的「王者荣耀」字样 → 被屏蔽
- 标题为「新赛季冲分」但视频内容画面显示王者荣耀 → 被屏蔽
- 完全隐藏：推荐，最清爽的体验
- 模糊显示：内容变模糊，点击屏蔽标记可恢复查看
- 半透明：快速识别被屏蔽内容
# 屏蔽特定UP主
某UP主名字
# 屏蔽特定话题
王者荣耀
原神
抽奖
# 屏蔽特定类型
广告
推广
恰饭
插件会在以下 B站页面生效：
- 首页推荐 (www.bilibili.com)
- 搜索结果 (search.bilibili.com)
- 视频播放页 (www.bilibili.com/video/)
- 动态页面 (t.bilibili.com)
- 个人空间 (space.bilibili.com)
- 番剧/影视 (bangumi.bilibili.com)
本项目采用 Vibe Coding 方式开发，全程由 AI 辅助完成：
| 工具 | 用途 | 贡献 |
|---|---|---|
| Claude Code | 主开发工具 | 架构设计、代码实现、调试优化 |
| Kimi K2.5 Thinking | 辅助开发 | 代码审查、逻辑分析、文档编写 |
💡 从想法到实现，全程自然语言对话编程，零手写代码。
bilibili-blocker/
├── manifest.json # 插件配置文件 (Manifest V3)
├── content.js # 内容过滤脚本（注入 B站页面）
├── content.css # 屏蔽样式（隐藏/模糊/半透明）
├── popup.html # 弹窗界面
├── popup.css # 弹窗样式
├── popup.js # 弹窗交互逻辑
├── lib/ # 第三方库
│ └── tesseract.min.js # OCR 引擎
├── icons/ # 图标文件夹
│ ├── icon.svg
│ ├── icon16.svg
│ ├── icon48.svg
│ └── icon128.svg
├── _locales/ # 国际化
│ ├── zh_CN/
│ └── en/
└── README.md
注意：OCR 中文训练数据（约 10MB）会在首次启用 OCR 时自动从 CDN 下载，无需包含在扩展包中。
- MutationObserver：监听 DOM 变化，动态加载的内容也能被屏蔽
- History API 拦截：监听
pushState/replaceState/popstate，感知 B站 SPA 路由切换 - 防抖存储写入：屏蔽统计使用 500ms 防抖，避免频繁调用
chrome.storage.sync - WeakSet 跟踪：已处理元素使用 WeakSet 记录，配置更新时自动重置并重新扫描
- 配置导入校验：白名单字段过滤 + 类型校验，防止恶意 JSON 注入
- Tesseract.js OCR：基于机器学习的图像文字识别，支持中文和英文
- 防闪烁设计：在
document_start时立即注入 CSS 隐藏内容，避免被屏蔽内容"一闪而过" - 悬停菜单：800ms 延迟触发，避免误触；智能定位防止超出屏幕边界
┌─────────────────┐
│ 检测视频卡片 │
└────────┬────────┘
▼
┌─────────────────┐
│ 提取封面/预览图 │
└────────┬────────┘
▼
┌─────────────────┐
│ Tesseract OCR │──► 识别画面文字
│ (中文+英文) │
└────────┬────────┘
▼
┌─────────────────┐
│ 关键词匹配 │──► 决定是否屏蔽
└─────────────────┘
点击「导出配置」按钮，将当前的关键词列表和设置保存为 JSON 文件。
点击「导入配置」按钮，选择之前导出的 JSON 文件即可恢复设置。导入时会自动校验字段类型，无效的关键词会被过滤。
点击「重置统计」可以清空已屏蔽内容的计数。
- 首次安装后需要刷新已打开的 B站页面
- 关键词上限：最多支持 100 个关键词
- OCR 性能：图像识别会占用一定 CPU 资源，低配电脑如遇卡顿可关闭此功能
- 隐私保护：所有数据保存在本地浏览器中，不会上传到任何服务器；OCR 识别在本地完成
Q: 安装后为什么没有效果？ A: 请刷新 B站页面，或者检查插件是否已启用（点击图标查看开关状态）。
Q: 切换屏蔽模式后已屏蔽的内容没变化？ A: 切换模式后，新屏蔽的内容会使用新模式。如需对已屏蔽内容生效，修改一下关键词（删除再添加）或刷新页面。
Q: 可以屏蔽弹幕吗？ A: 当前版本主要针对页面内容（视频卡片、标题、评论等），弹幕屏蔽建议使用 B站自带的屏蔽功能。
Q: 关键词支持正则表达式吗？ A: 当前版本使用简单文本匹配，暂不支持正则。
Q: OCR 识别准确吗？ A: OCR 基于 Tesseract 引擎，对清晰的文字识别效果较好。艺术字体、复杂背景可能影响识别准确性。
Q: 为什么有些视频封面有关键词但没被屏蔽？ A: 可能是：1) OCR 引擎正在初始化；2) 图片加载失败；3) 文字太小或太模糊。可以尝试刷新页面。
Q: 如何彻底删除插件？ A: 在浏览器的扩展管理页面找到「B站内容屏蔽助手」，点击「移除」即可。
- ✨ 新增悬停快捷菜单：鼠标悬停在视频上 0.8 秒显示快捷屏蔽菜单
- ✨ 新增 OCR 图像识别功能：智能识别视频封面和画面中的文字
- ✨ 新增防闪烁功能：页面加载时立即隐藏视频卡片，避免被屏蔽内容"一闪而过"
- 🔧 修复版本号不一致问题
- 🔧 优化异常处理，添加更详细的错误日志
- 🎨 新增 OCR 状态显示界面
- ⚡ 优化 OCR 队列和缓存机制，减少重复识别
- ⚡ SPA 路由切换时也应用防闪烁效果
- 🐛 修复 Tesseract.js v4/v5 API 兼容性问题
- 🐛 修复图片跨域问题（使用 canvas 转换）
- 🔧 添加详细的 OCR 调试日志
- 🔧 添加图片 alt 属性作为 OCR 备选来源
- 🐛 降低 OCR 置信度阈值到 30%，提高识别率
- ⚡ 升级 Tesseract.js 到 v5 版本，更稳定
- 修复配置更新后已屏蔽元素无法重新扫描的问题
- 修复 CSS 屏蔽模式选择器与 JS 不匹配导致模糊/半透明模式失效
- 修复开关切换时 popup 与 content script 状态不同步的竞态条件
- 优化存储写入：屏蔽统计改为 500ms 防抖，避免频繁写入
- 优化 SPA 路由检测：使用 History API 拦截替代全文档 MutationObserver
- 移除冗余的 2 秒定时扫描和重复 DOM 查询
- 优化文本提取：移除不必要的 DOM 深克隆
- 导入配置增加字段白名单和类型校验
- 首次发布
- 支持关键词屏蔽
- 三种屏蔽模式
- 屏蔽统计功能
- 配置导入/导出
MIT License - 自由使用、修改和分享