☰

Bilibili CC字幕实时显示插件（含AI翻译）- 修复版

在B站播放器中集成CC字幕列表，支持DeepSeek AI实时翻译，提供"双语双行"字幕渲染。已修复AI字幕URL不包含CID导致的识别失败问题。

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！）

作者
corde
今日安裝
2
安裝總數
10
評價
0 0 0
版本
1.2
建立日期
2026-01-02
更新日期
2026-01-05
尺寸
49.8 KB
授權條款
MIT
腳本執行於

Bilibili CC Subtitle Extractor with AI Translation - 说明文档

Bilibili CC Subtitle Extractor with AI Translation
(B站 CC 字幕实时 AI 翻译插件)

此脚本引用了 zane-yang 的开源代码，特别感谢！


Version 1.2
License MIT

📖 简介 | Introduction

这是一个用于 Bilibili 网页版的增强脚本。它能自动提取视频自带的 CC 字幕（Closed Caption），在右侧侧边栏生成可点击的字幕列表，并集成 DeepSeek AI 接口实现高质量的实时翻译。

核心亮点： 支持“双语双行”字幕渲染，拥有独立的悬浮窗显示，并完美解决了 B 站自动续播（如直接空降 P5）导致的 URL 参数未更新从而加载错误字幕（P1）的问题，以及解决了新版字幕 URL 使用 Hash 导致识别失败的问题。

✨ 功能特性 | Features

  • AI 实时翻译：集成 DeepSeek API，支持将字幕实时翻译为印尼语、中文、英语等（需配置 API Key）。
  • 智能 CID 纠错：
    • 自动识别 URL 中未显式指定 p 参数的情况（例如自动续播）。
    • 通过嗅探播放器内部状态，自动纠正字幕源，防止在播放 P5 时错误加载 P1 的字幕。
    • 支持识别不含显式 CID 的 Hash 格式字幕 URL。
  • 双语沉浸式显示：
    • 在视频画面上方渲染双行字幕（翻译文 + 原文）。
    • 支持全屏模式下的样式自适应。
  • 交互式字幕列表：
    • 集成在弹幕/推荐列表区域。
    • 点击跳转：点击任意一句字幕，视频自动跳转到对应时间点。
    • 高亮跟随：当前播放句自动高亮并滚动。
  • 悬浮窗模式：提供一个可拖拽、可缩放的独立悬浮窗，方便在小窗播放或多任务时查看字幕，并显示当前 BV 号和 CID 信息。
  • 智能预加载：利用缓存机制预读取未来 3 分钟的字幕并进行翻译，减少卡顿。

🛠️ 安装指南 | Installation

  1. 安装浏览器扩展程序 Tampermonkey (油猴)。
  2. 新建脚本，将源代码复制并保存。
  3. 打开任意带有 CC 字幕的 Bilibili 视频页面即可生效。

⚙️ 配置 AI 翻译 (DeepSeek) | Configuration

要使用 AI 翻译功能，你需要拥有 DeepSeek 的 API Key。

  1. 打开 B 站视频页，脚本加载后，在右侧“CC 字幕列表”标题栏点击 【AI 翻译】 按钮，或者点击悬浮窗上的 ⚙️ (设置) 图标。
  2. 在弹出的设置面板中填写以下信息：
    • 功能开关：勾选“启用 AI 翻译”。
    • API Key：填入你的 DeepSeek API Key (例如 sk-xxxxxxxx)。
    • Base URL：默认为 https://api.deepseek.com (如使用代理或中转站请修改)。
    • 目标语言：选择你希望翻译成的语言（默认印尼语，支持切换为中文/英语）。
  3. 点击 【保存】。

提示：首次配置后，可能需要刷新页面或拖动一下进度条来触发翻译请求。

🖥️ 使用说明 | User Guide

1. 界面概览

脚本启动后，你会在两个地方看到变化：

  • 右侧侧边栏（通常在弹幕列表上方）：新增了一个“CC 字幕列表”折叠面板。
  • 视频区域：出现透明的字幕渲染层。

2. 字幕列表

  • 点击标题栏可 展开/折叠 列表。
  • 列表中的字幕支持 鼠标悬停预览。
  • 单击 任意一行字幕，视频将立即跳转到该时间点。

3. 悬浮窗

  • 如果不希望字幕遮挡视频，可以查看悬浮窗。
  • 拖拽：按住标题栏可随意移动位置。
  • 缩放：拖动右下角可调整窗口大小。
  • 搜索功能：点击放大镜图标，可输入其他 BV 号快速跳转。
  • 关闭/开启：点击右上角 ✕ 关闭；在设置中或点击侧边栏按钮可重新打开。

4. 智能纠错机制 (Smart Fix)

本插件针对 B 站的一个常见痛点进行了特殊优化：

  • 场景：当你点击一个视频合集链接（不带 ?p=x），但 B 站记录了你上次看到第 5 集，自动跳转到 P5 播放。
  • 问题：普通插件通常会读取 URL（此时 URL 里没有 P 号），导致错误加载 P1 的字幕，画面和字幕对不上。
  • 本插件解法：会自动进入“嗅探模式”，读取播放器实际加载的 CID（视频唯一ID），若发现不匹配，会自动触发重新加载，屏幕上会提示“检测到分P跳转，正在同步字幕...”。

❓ 常见问题 | FAQ

Q: 为什么显示“当前分P无 CC 字幕”？

A: 这表示该视频本身没有上传外挂 CC 字幕，或者 B 站接口未返回字幕数据。此插件无法生成语音转文字，只能提取现有的 CC 字幕。

Q: 翻译一直显示 "..." 或不显示？

A:

1. 请检查 API Key 是否正确，且余额充足。

2. 检查网络是否能连接到 api.deepseek.com。

3. 在 F12 控制台中查看是否有红色报错信息。

Q: 如何修改字幕样式？

A: 目前样式通过脚本内的 CSS 控制。如果懂 CSS，可以修改代码中 injectStyles 函数下的 .cc-primary-text (翻译层) 和 .cc-secondary-text (原文层) 样式。

📜 更新日志 | Changelog

v1.2 (Current)

  • 修复：针对 B 站新版字幕接口（aisubtitle/hash URL）的识别问题，解决了因 URL 不包含 CID 导致的字幕被误判为“串台”而丢弃的 Bug。
  • 优化：增强了字幕获取的兼容性。

v1.1

  • 新增：悬浮窗显示当前 CID 和 BV 号。
  • 新增：BV 号搜索跳转功能，可在悬浮窗快速切换视频。

v1.0

  • 初始发布。
  • 集成 DeepSeek AI 翻译。
  • 实现双语双行 OSD 显示。
  • 修复：隐式 P 参数（自动续播）导致的字幕错位问题。
  • 新增：字幕列表点击跳转功能。

⚖️ 许可证 | License

MIT License