Spotify 双语歌词

概述

一款 Chrome 扩展，将双语歌词注入到 Spotify Web Player 中 —— 源歌词及其翻译逐行显示，并与播放同步。与简单的 Google Translate 处理不同，翻译取自 Genius，那里是人工翻译的，并且实际上是可以演唱的。它面向那些想理解自己正在听什么内容的音乐爱好者，以及那些想通过自己喜爱的歌曲以一种低投入的方式吸收第二语言的语言学习者。

功能

• 实时双语显示 —— 歌词在 Spotify Web Player 界面旁渲染，与当前播放的曲目同步。
• 人工翻译来源 —— 歌词行来自 Genius，而非机器翻译 API，因此它们保留了韵律和含义，而不是产生逐字逐句的垃圾翻译。
• 逐行布局 —— 原文和翻译在视觉上成对显示，因此你可以跟随任一语言或在它们之间切换。

技术栈

• Chrome Extension Manifest V3 —— 作为内容脚本在 open.spotify.com 内运行，使用 Spotify 的 DOM 作为注入歌词面板的锚点。
• React + TypeScript —— 弹出窗口、选项页面以及注入的歌词面板都是共享通用类型层的 React 组件。
• Genius API —— 查询当前播放曲目的艺术家 + 标题，然后从结果歌曲页面中抓取以提取干净的歌词行。
• DOM 操作 —— 一个 MutationObserver 监视 Spotify 播放器的曲目变化，以便扩展可以在不重新加载页面的情况下重新获取歌词。

使用方法

1. 克隆仓库，并在 chrome://extensions/ 中将其作为解压缩的扩展加载（需开启开发者模式）。
2. 固定该扩展，使其图标位于 Spotify 标签页旁边。
3. 打开 Spotify Web Player 并播放任意内容 —— 扩展会自动检测曲目并渲染双语面板。

值得注意的部分

• 内容脚本 + MutationObserver —— 每当曲目改变时，播放器 DOM 都会响应式更新。监视这些突变是扩展知道“有新内容正在播放，去获取其歌词”的方式，而无需轮询。
• 干净的 Genius 提取 —— Genius 页面附带注释、广告和嵌入歌词 div 中的分享按钮。扩展会遍历 DOM，在渲染前剥离这些噪音，只保留歌词行。