为什么做这个扩展
我平时看 YouTube 比较多，很多视频只有英文字幕，或者干脆没有中字。
官方自带的"翻译字幕"每次都要自己点来点去，用着不太顺手，而且官方字幕一次只能显示一种语言。有一阵子我就想:要是能自动把字幕翻成中文、直接叠在视频下面，不用切页面也不用等，该多好。
另外，"原文 + 译文"同屏展示的方式，也很适合用来学英语或其他语言——边看视频边对照字幕，听和读一起练，比单独啃文本轻松不少。
后来发现，这种需求其实可以自己解决:写一个 Chrome 扩展，在 YouTube 页面里"挂"一层自己的翻译字幕就行了。
我本身做 App 开发，对前端不算熟，但觉得逻辑差不多:都是监听数据、调接口、更新 UI。于是就决定把"顺手工具"亲手做出来，顺便用 AI 辅助走一遍 Chrome 扩展的从 0 到 1，把过程记下来分享给同样想动手的读者。
核心功能介绍:它能做到什么
这是一个只做一件事的 Chrome 扩展:在 YouTube 播放页里，自动把当前字幕翻译成你选的语言，并叠在视频上显示。
它能做到:
- 「实时翻译」 视频开字幕、扩展开着，就会自动监听字幕变化并翻译，不用手动点来点去。
- 「双行显示」 原文在上、译文在下，可以只开译文，也可以原文译文一起看(适合学外语)。
- 「自选目标语言」 支持 30+ 种语言(如简中、繁中、英、日、韩、西、法、德等)，在弹窗里选一次。
- 「拖拽位置」 字幕框可以拖到任意位置，位置会记住，下次打开还是那样。
- 「隐藏 YouTube 原字幕」 不想看两套字幕的话，可以在设置里关掉 YouTube 自带的那层，只留翻译。
- 「广告时自动隐藏」 检测到在播广告时会把翻译层藏起来，广告结束再自动出现。
- 「快捷键」 用 Alt+E(或 Mac 上 Option/Cmd+E)可以快速开关扩展。
弹窗设置页支持中英繁三种界面语言，其余逻辑尽量"开箱即用"，装好、选好语言，打开带字幕的 YouTube 视频就能用。
做的时候踩了哪些坑
第一次接触 Chrome 扩展
一开始连 manifest、popup、content script 都是啥都不清楚。
简单说:manifest 就像扩展的"说明书"，告诉 Chrome 名字、权限、入口。
popup 是点图标弹出来的小窗口，我用来做设置页。
content script 才是真正跑在 YouTube 页面里的脚本，负责抓字幕、调翻译、把翻译结果画在视频上。
这三块怎么分工、怎么用 chrome.storage 同步配置，都是边查文档边试出来的。
字幕怎么"抓到"
YouTube 的字幕是动态往 DOM 里塞的，而且页面结构会变。
要用选择器找到字幕节点，再用 MutationObserver 监听变化，否则会漏掉或延迟。
光靠 Observer 还不够稳，我又加了一个短间隔的轮询做兜底，这样即使用户快速拖进度条，也能尽快跟上。
另外还要区分"新的一句"和"同一句在追加"，避免整段文字一闪一闪地刷新，这里就涉及简单的启发式判断:比如当前文本比上一帧短了，就认为是新句子，清空再翻。
翻译接口与限流
用的是 Google 的公开翻译接口，没有 key、有频率限制。
如果字幕一变就请求，会卡顿、还可能被限流。
所以做了几件事:同一段文字只翻译一次(LRU 缓存)、两次请求之间至少间隔 500ms、用序列号保证先发出去的请求如果后回来，结果会被丢弃，只应用"最新一次"的翻译。
这样既不会把页面搞卡，也不会出现字幕乱序或闪回旧翻译的问题。
从 0 到能用的时间线(AI 辅助开发)
从完全不懂 Chrome 扩展，到能稳定用上自己的翻译字幕，大概花了半天左右的业余时间。
大部分时间花在"理解扩展架构"和"和 YouTube 的 DOM 斗智斗勇"上，真正调 API、写 UI 反而没那么久。
开发过程全程用了 AI:前期用 Claude Code + GLM 4.7 搭框架、写逻辑，后期有些 bug 一直改不顺，就切换到 Cursor + Auto 收尾，直到完工。
架构理解、代码实现和调试大多在 AI 协助下完成，自己主要做需求拆解和验收，这也是我作为 AI 博主很愿意分享的一种"用 AI 做小产品"的实践方式。
目前还有哪些可优化的空间
- 「初始化与翻译载入偏慢」有一定延迟，可能和用的是 Google 免费翻译接口有关。
- 「全屏 / 窗口模式切换」字幕框的大小和位置没有随窗口自适应，试了几次没实现，后续再看有没有优化空间。
- 「浏览器支持」 目前只支持 Chrome，其他浏览器暂不支持;若有其他浏览器的需求，可以到仓库提 Issue，或自行 fork 扩展适配。
做完之后的产品思考
这类插件的价值在哪
核心用户就是"想无障碍看外语视频"的人:学语言的、追国外 up 主的、看技术演讲的。
价值在于:不离开 YouTube、不依赖官方是否提供某语言，自己选目标语言就能看。
和"用翻译网站贴文本"相比，体验是连贯的、实时的。
和 YouTube 自带翻译 / 其他插件的差异
YouTube 自带翻译功能已经很强，但语言列表和交互方式不一定符合每个人的习惯;有的第三方扩展功能很多但很重。
我做的这个刻意保持简单:只做"实时字幕翻译"这一件事，双行显示(原文 + 译文)、可拖位置、可关原文、可隐藏 YouTube 原字幕，再就是广告时自动藏起来，不抢戏。
取舍就是:功能够用、逻辑清晰、自己好维护。
如果重做会加强什么、砍掉什么
会加强的:比如支持多翻译引擎(DeepL、微软等)、导出字幕为 srt、对 Shorts / 直播的兼容再打磨一下。
会砍的:暂时没有，目前没有明显冗余功能;若以后加了很多开关，可能会收一收，保持"开箱即用"为主。
写在最后
项目已开源到 GitHub，仓库名: youtube-live-translate
安装方式:下载 releases 里的 zip，用 AI IDE 或本地手动构建项目，得到 /dist 目录;在 Chrome 的"扩展程序"里打开"开发者模式"→"加载已解压的扩展程序"，选择该 /dist 文件夹即可。
使用方式:打开任意带字幕的 YouTube 视频，点击"启用翻译"开关，在弹窗里选好目标语言。
从"总想有个顺手工具"到真的做出自己的第一款 Chrome 扩展，最大的收获是:在 AI 辅助下，很多需求离"自己实现"并不远，跨一点技术栈、查一点文档，就能从用户变成创造者。
如果你也经常看 YouTube 缺中字，或者想试试用 AI 从 0 到 1 做一个小工具，欢迎拿去用、拿去改，有问题或建议可以到仓库提 Issue。
