Spotify Bilingual Lyrics

Overview

A Chrome extension that injects bilingual lyrics into the Spotify Web Player — source lyrics and their translation line by line, synced with playback. Unlike a quick Google Translate pass, the translations are pulled from Genius, where they’re human-authored and actually singable. It’s aimed at music lovers who want to understand what they’re listening to, and at language learners who want a low-effort way to absorb a second language through songs they already love.

Features

• Real-time bilingual display — lyrics render next to the Spotify Web Player UI, synced with the currently playing track.
• Human-translated sources — lines come from Genius, not from a machine translation API, so they preserve cadence and meaning instead of producing literal word-by-word garbage.
• Line-by-line layout — original and translation are visually paired so you can follow either language or flip between them.

Stack

• Chrome Extension Manifest V3 — runs as a content script inside open.spotify.com, using the Spotify DOM as the anchor for where to inject the lyrics panel.
• React + TypeScript — the popup, options page, and the injected lyrics panel are all React components sharing a common type layer.
• Genius API — queried for the currently playing track’s artist + title, then scraped from the resulting song page to pick out clean lyric lines.
• DOM manipulation — a MutationObserver watches the Spotify player for track changes so the extension can re-fetch lyrics without a page reload.

How to use

1. Clone the repo and load it as an unpacked extension in chrome://extensions/ (Developer mode on).
2. Pin the extension so its icon sits next to the Spotify tab.
3. Open the Spotify Web Player and play anything — the extension auto-detects the track and renders the bilingual panel.

Notable bits

• Content script + MutationObserver — the player DOM updates reactively whenever a track changes. Watching for these mutations is how the extension knows “something new is playing, go fetch its lyrics” without polling.
• Clean Genius extraction — Genius pages ship with annotations, ads, and share buttons embedded in the lyric divs. The extension walks the DOM to strip that noise down to just the lyric lines before rendering.