01
Living inside other people's pages
A content script shares the DOM with every website's CSS. Aggressive resets, maximal z-index discipline, and defensive selectors keep the clock intact on sites that style everything.
Case study · 2025 · Live · 300+ users
PopClock
A floating clock & timer Chrome extension built for fun on a 5-hour road trip — now 300+ users on the Chrome Web Store.
Vanilla JavaScriptManifest V3chrome.storageCSS
01 / 04
Demo — floating clock, drag, and timer on a live page
Overview
Morbi to Ahmedabad is about five hours by road. Somewhere past Chotila I decided the trip needed a deliverable: a draggable clock that floats over every webpage, because fullscreen tabs kept hiding my system clock during presentations and movies.
By the time we reached Ahmedabad, v1 worked. I polished it, shipped it to the Chrome Web Store, and it quietly crossed 300 users — my first taste of strangers using something I made for fun.
5hrs
Road trip to v1
300+
Chrome Web Store users
~800
Lines of vanilla JS
0
Frameworks used
The problem
Fullscreen anything — videos, presentations, games — hides your clock. Alt-tabbing to check the time breaks flow, and no timer survives the tab you set it in.
The fix had to be invisible until wanted: a small clock you can drag anywhere, on any site, with a timer that keeps counting even if you refresh or wander across the web.
What I built
One content script, zero dependencies, everything custom:
Floating clock
1Draggable, viewport-clamped, 12/24-hour toggle, optional seconds, hideable
Timer system
6+1Presets from 1 minute to 1 hour plus custom HH:MM, with progress bar and sound
Custom context menu
DOMRight-click menu built from scratch — toggles, timer presets, blocklist access
Per-site blocklist
OptionsAn options page to keep the clock off chosen domains
Small details, real UX
Timers that survive anything
The end-time is persisted to chrome.storage, so a refresh or navigation recomputes the remaining time — and if the deadline passed while you were away, completion fires immediately.
Drag without jank
Pointer-event dragging clamped to the viewport, so the clock can't be lost off-screen — the whole interaction is ~40 lines of vanilla JS.
Polite by default
Only the storage permission, no analytics, no network calls — the widget is a guest on every page it visits.
Finish-line feedback
A bundled chime and a dismissable overlay when the timer completes — visible even over fullscreen video.
Technical challenges
02
State without a backend
Settings, timer state, and the blocklist all live in chrome.storage.local with a tiny sync layer — the extension behaves identically across tabs without any server.
03
Shipping from the passenger seat
Five hours, a laptop, and mobile hotspot internet. Scope ruthlessly: clock first, drag second, timer third — everything else waited for the store release.
Outcome
PopClock crossed 300+ users on the Chrome Web Store with zero marketing beyond a link in my bio — proof that a well-scoped tiny tool finds its audience.
It also set my template for extension side-projects: vanilla JS, minimal permissions, ship fast, and let the store listing do the talking.
What's next
chrome.alarms for battery-friendly timingPomodoro presetsStore listing refresh