Glance

A stunning Apple-style Dynamic Island for your browser. It delivers global media shortcuts, cross-tab PiP, and perfectly synced lyrics for Spotify, Apple Music, and YouTube.

Comment

The Bold Idea

Take the most praised mobile UI innovation of the last decade — Apple's Dynamic Island — and build it for desktop browsers. Not a mockup. Not a concept. A fully functional, cross-platform browser extension that ships on real browser stores and works on real music services.

What I Built

Glance (V1.6) is a cross-browser extension (Firefox, Chrome, Edge, Brave) that creates an ambient media control surface directly in the browser. It hooks into Spotify, Apple Music, YouTube, and YouTube Music, extracting live playback state and rendering it as a floating island overlay with:

  • Idle dot → pill → full expansion animation (iOS spring curves)
  • Real-time album color extraction theming the entire UI
  • 60FPS synced progress bar with sub-400ms drift tolerance
  • Word-by-word synchronized lyrics with provider switching
  • Platform-native shuffle/repeat controls (different SVGs per platform)
  • Global keyboard shortcuts working from any tab
  • Picture-in-Picture teleportation
  • AMOLED Black mode for pure black backgrounds
  • Quick Playlists for one-click playlist launching

The Limits I Had to Break

Limit 1: Browser Security Sandboxing

Manifest V3 runs content scripts in an ISOLATED world — completely cut off from the page's JavaScript. But Apple Music's playback state lives in their MusicKit JS SDK, which only exists in the page's MAIN world. I couldn't just set everything to MAIN because that kills all chrome.runtime APIs.

Solution: I built a selective world-routing system. Media state polling runs in MAIN world; all action scripts (play, pause, skip) stay in ISOLATED world. Each execInTab call explicitly declares which world it needs.

Limit 2: Chromium PiP Restrictions

Browsers require a user gesture on the exact document containing the <video> element to allow requestPictureInPicture(). You can't trigger it from a background script or from another tab.

Solution: I built a "teleportation" system. The background service worker stores the user's current tab, switches browser focus to the media tab, injects a script that captures the user's original click as the gesture to trigger PiP, then instantly switches focus back. The user sees a brief flash and then has PiP — from any tab.

Limit 3: Cross-Platform DOM Chaos

Spotify strips data-testid attributes. Apple Music uses Shadow DOM (Svelte components). YouTube Music localizes all text strings. Every platform actively fights external automation.

Solution: Platform-isolated extraction pipelines. Spotify shuffle detection uses SVG path fingerprinting. Apple Music uses wrappedJSObject.MusicKit on Firefox. YouTube Music uses child element ordering and computed SVG colors — never text strings.

Limit 4: My Own Coding Ability

I'm a 3rd-year CS student. I don't have years of professional frontend experience. So I used AI tools (Google Antigravity 2.0 and Claude) as a force multiplier — they generated the syntax while I directed every architectural decision, diagnosed edge cases the AI couldn't see, and ran QA across Firefox, Chrome, Edge, Brave, and Zen Browser.

Key bugs I personally caught and fixed that AI missed:

  • A closure scope error where settings panel variables referenced stale DOM nodes
  • An infinite loop in Apple Music detection triggered by MusicKit's CSP blocking injected scripts
  • Chromium silently dropping Spotify button clicks when sent too fast (<100ms), requiring a blind toggle approach with debouncing

The Result

A working product published on the Firefox Add-ons Store and Microsoft Edge Add-ons Store, with 197 commits over 3 months of development from V1.0 to V1.6. Not a hackathon prototype — a shipped, installable product.

Technologies Used

JavaScript (Vanilla — zero frameworks), HTML5, CSS3, Chrome Extension API (Manifest V3), Custom Node.js build compiler, Apple MusicKit JS SDK, LRCLib API, LyricsPlus API, Google Translate API

Built With

Share this project:

Updates