Lichess PiP
Picture-in-picture viewer for Lichess games. Watch chess while you work.
The Idea
I play chess on Lichess. I also work. These two activities don't mix well -- unless you can watch a game in a tiny floating window while your code compiles.
Lichess PiP is a browser extension that puts the Lichess chess board into a Picture-in-Picture window -- the same floating mini-player that YouTube uses for videos, but for a live chess game.
How Picture-in-Picture Works for DOM
Most people know PiP from video players. But Chrome 116+ introduced the Document Picture-in-Picture API, which lets you move any DOM elements into a floating window -- not just video.
The extension waits for a Lichess game page to load, then:
- 01Detects the
.round__appcontainer (the board + clocks) - 02Injects a PiP button into the interface
- 03On click, opens a Document PiP window
- 04Moves the actual board DOM into the floating window
- 05Copies all Lichess stylesheets and piece themes into the PiP document
Because it moves the real DOM (not a screenshot or canvas), everything stays interactive -- you can see moves in real time, watch the clocks tick, and even use the "New opponent" button.
Technical Challenges
Stylesheet Copying
Lichess loads a lot of CSS dynamically. The extension iterates through all stylesheets on the page and re-injects them into the PiP document. It also handles piece and board background images by reading computed styles and applying them explicitly.
Clock Synchronization
The clocks in the PiP window need to stay in sync with the main page. A MutationObserver watches for clock changes and mirrors them to the floating window, including the running/low-time visual states.
Manifest V3
The extension uses Chrome's latest Manifest V3 format -- no background scripts, just a content script that activates on lichess.org pages.
Tech Stack
- •JavaScript -- pure vanilla, no framework
- •Document Picture-in-Picture API -- Chrome/Edge 116+
- •MutationObserver -- DOM change detection
- •Chrome Extension Manifest V3
Usage
Install the extension, open any Lichess game, click the PiP button. The board pops out into a floating window that stays on top of all other windows. Resize it, move it to a corner, and keep working.