我要投稿

我用Claude Code开发了个浏览器插件，解决看长视频的字幕定位问题（附教程）

发布日期：2025-11-12 20:00:32 浏览次数： 1550

作者：Next蔡蔡

微信搜一搜，关注“Next蔡蔡”

Agents、AI实践与个人成长。" data-id="MzIyMzk3MTEwNQ==" data-is_biz_ban="0" data-service_type="1" data-verify_status="0">

哈喽各位精神股东们，我是蔡蔡！

今天和大家分享我是怎么用Claude Code开发浏览器插件，解决自己看长视频播客的一个痛点场景。

我平时特别喜欢长视频播客，如果中间遇到特别耐人寻味或拍案叫绝的片段，就会往回多看几遍。

之前的方法很原始，就是凭记忆拖动进度条往回翻；

再后来用上了B站内测的AI小助手，有视频总结和字幕列表，但没有文字稿；后来又用了vCaptions浏览器插件，支持字幕搜索，不过没有关键词高亮，支持文字稿但阅读观感又有点差（好吧，我可能就是那种特难伺候的消费者）。

既然如此，那我不如自己捣腾一个满足自己需求的插件。

这是我最后捣腾出来的成果，支持关键词高亮，文字稿进行排版优化。

下面就给大家展示我的完整开发过程，含工具、思路、提示词、开发细节等。

一、工具准备

本次开发用到的开发工具包括：

bilibili-subtitle：开源项目。因为我只是自用，所以开发这类工具最快捷的方法就是基于开源项目去做。对比了一些开源项目，发现 bilibili-subtitle 最符合需求，后面发现它是vCaptions的前身，不过项目作者目前已经不更新这个项目了，只做简单维护。项目🔗：https://github.com/IndieKKY/bilibili-subtitle

Claude Code：主力编程工具，工程做得特别好，不用多介绍

Doubao-Seed-Code：字节专门为代码场景优化的模型，兼容Claude Code，这次主要是想放到自己的真实项目中去体验下这个新模型的成色，反正9块9，买不了吃亏买不了上当

CC switch/CC mate：可以给 Claude Code 轻松配置新模型（我之前也介绍过>>>在Claude Code、Codex中管理和切换模型太麻烦？两个工具轻松搞定），两个都可以，但审美上我更喜欢 CC mate

Cursor：老朋友了，我的开发习惯就是在它上面运行 Claude Code

二、开发完整流程

以下是完整的开发流程。

步骤一：在 CC mate 中配置 Doubao-Seed-Code 新模型

现在国产 Coding 模型是越来越多，我现在都不用 export 这类命令去配置环境变量了。

export ANTHROPIC_BASE_URL=https://ark.cn-beijing.volces.com/api/compatibleexport ANTHROPIC_AUTH_TOKEN=<ARK-API-KEY>export ANTHROPIC_MODEL=doubao-seed-code-preview-latest

而是直接用 CC Switch 和 CC mate，直接添加就轻松搞定，删除也很简单。

步骤二：启动 Claude Code 并分析开源项目

配置完成后，在终端中输入 claude 命令行，启动 Claude Code。

当你看到这样的界面，就意味着 Doubao-Seed-Code 模型配置完成了。

由于 AI 还不是太熟悉这个项目，所以我会先让它分析并熟悉下项目：

分析当前项目的核心功能、架构、以及运行逻辑，输出一份markdwon文档，方便我快速理解这个项目并进行后续的针对性调整

接着，它就会调用各种工具来执行这个任务。

最后它会输出一份完整的分析报告，包括项目概览、核心功能、系统架构、关键实现细节、项目结构、技术栈、插件安装、未来优化方向，以及总结，非常详细。

这也可以看出 Doubao-Seed-Code 模型在处理这种长代码文件、多模块依赖的场景还是OK的。

中间有个小细节，因为最新版浏览器安全方面有更新，在开发调试 bilibili-subtitle 项目时会报 csp 错误，这一点项目作者在 README.md 中注明了解决方案，模型在运行过程中也注意这点并进行了针对性调整。

插件成功运行后长这样，这个版本是没有字幕搜索高亮功能的，不支持区分发言人和文字稿润色的，也不支持 Youtube 平台。

但没关系，这就是我接下来要做的事。

步骤三：开启 Plan Mode 开发新增功能

开干，我们一个个功能来。

功能1：将 AI 提问和字幕搜索拆分，增加字幕搜索高亮

快捷键 Shift + Tab，快速切换到 Plan Mode 模式，输入调整需求，我的提示词是这样的：

我要优化当前的搜索框,目前的搜索框是同时结合了AI功能搜索字幕搜索功能,而且按下enter键会触发AI提问功能。我希望是将搜索功能和AI提问功能分开：1、AI提问功能可以作为一个新tab,命名为[提问],可以先放到和[总结],[概览],[要点],[问题],[辩论2分钟]同一层级,原有AI提问功能保持不变 [Image #2]2、当前的搜索框就只承载字幕搜索功能- 支持在列表视图和文章视图两种视图下进行关键词搜索,- 列表视图的搜索结果,就只展示带有关键词的字幕列表,关键词高亮;- 文章视图的搜索结果,还是全部展示的,但是会对文章中的关键词进行高亮；- 搜索框内部右侧增加一个搜索icon。

眼尖的精神股东可能会发现了，我在这段提示词中，增加了图片上传，

这是因为 Doubao-Seed-Code 模型支持多模态能力。之前各种国产编程模型出来后，被大家问到最多的一个问题就是模型是否支持视觉理解，这次 Doubao-Seed-Code 模型率先推出来了。

接着模型就会根据我的需求，输出一个实现计划，如果没问题的话，就点击 accpet；如果需要继续讨论和微调，就 keep planing，直到计划符合你的需求。

建议大家在 Plan Mode 阶段多花点时间，尽可能讨论清楚，这样后续能减少大量的返工。

在这个开发过程中，我也遇到了一些问题，比如搜索结果的字幕列表中的搜索关键词都变成了如图所示的"\1"，而且没有高亮。

但通过截图 + 文字反馈的形式，模型最终还是定位到了问题并进行了修复。编程模型有视觉理解能力还是好使呀。

第一个功能搞定！就长这样：

接下来开整第二个功能。

功能2：优化文章列表的视觉呈现

在开发新功能之前，为了避免前面的对话污染当前上下文，也为了恢复当前对话的上下文窗口，可以用 /clear 快捷指令。如果前后存在一些关联的话，可以用 /compact 进行手动压缩上下文。

其实我最开始是希望实现文字稿区分发言人的，这是原始提示词：








我希望优化"文章视图"的文章稿的内容呈现。1、增加发言人区分,如果存在两个及以上的发言人,就用发言人A/发言人B/发言人C等进行替代;如果只是一个人,就统一用发言人A指代;2、实现分段,目前的文字稿都是大段大段,没有分段的,阅读起来就很费劲;希望能采取一定逻辑进行分段,你可以提供一些可选的实践供参考;3、对文字稿的一些气口进行去除。这个该怎么实现，尤其是区分发言人这个?

后来在和 Doubao-Seed-Code、Gemini-2.5-Pro、Claude-4.5-Sonnet 等多个模型沟通讨论下，发现要搞定“区分发言人”这个功能，对整个项目的改造会非常大，不太符合我当前的实际需求。

所以后面调整了策略，在不大改项目的前提下，将视觉体验的优化方向调整为：

由于目前的文章视图的实现逻辑是将所有字幕条目（TranscriptItem）通过逗号连接，形成连续的文本流，这种文字浏形式导致文字大片粘在一起，因为缺少视觉分隔，所以整体阅读体验不佳。我的想法是将逗号连接，调整为空格连接，然后每四个字幕条目作为一行。

最后得到的效果是这样的：

当然，这个项目还只是开始，我接下来还计划新增支持YouTube视频，优化AI总结和对话的交互等能力，我是要把这个插件用到自己的实际工作和学习场景中的。

如果大家也有类似痛点场景的话，我后面把插件发布出来。

小tips：整个过程，记得每新增一个功能，就做一次 Git 管理，这是个好习惯。

三、写在最后

回到这次项目上，我觉得 Doubao-Seed-Code 的编程能力还是可圈可点的，尤其视觉理解能力的支持，在描述 UI 和反馈问题时方便了不少。

但也需要承认， Doubao-Seed-Code 目前在性能上和 Claude 这类顶尖模型还是有一定差距的，但它胜在很好地平衡了性能和价格，拥有极强的价格优势。以他们同步发布的 Coding Plan 为例：

Lite 套餐适合大多数开发者，可支持中等强度的开发任务，首购首月 9.9 元；
复杂项目开发则可以选择 Pro 套餐，首购首月仅需 49.9 元。

像我这种不是高强度工作的开发者，Lite 套餐基本就满足，比如这次项目开发，我的具体调用情况是这样的，我5小时也用不到最多的 1200 次请求。

回到 Doubao-Seed-Code 模型的推出上，感觉很大程度上是被 Anthropic 倒逼出来的，毕竟卡脖子是真难受。所以这次在 SWE-Bench-Verified（https://www.swebench.com/ ）中，我们看到 Trae + Doubao-Seed-Code 的组合表现非常亮眼，直接登顶。

看来这个模型也是专门为 Trae 优化过的，过两天有时间也去试试。