Countdown

See exactly how long you have left until every deadline and event, right in Chrome's side panel.

Add Countdown to Chrome · free, on the Chrome Web Store

Why I made this

If your brain works a bit like mine (a little ADHD, maybe), it's hard to feel how close something really is when it's just a block on a calendar. "Due Friday" doesn't land the way "2 days left" does.

So I built a simple panel that sits beside whatever I'm working on, pulls in my calendar, and turns every deadline and exam into a live countdown. No more digging through my calendar to work out how much time I've got. I hope it helps you as much as it helps me.

What it does

• Live countdowns in days, hours, minutes or seconds, for deadlines (Due) and events (Starts)
• A calendar: Day, 3 days and Month views in the side panel, and a full Week in its own tab, with your categories as colour-coded calendars. Click or drag on it to add an event, and drag events to move them or change when they end
• Events with an end and a place, like a lecture from 12:30 to 2:00 in Swing Space, which show Now while they're on
• Brings in your calendar: .ics files or Google, Apple and Outlook calendar links, with duplicates spotted for you
• Colour-coded categories for each course, project or trip, with drag and drop
• Repeating items, like weekly homework numbered "Chapter 4, 5, 6…"
• Sync across your computers through Chrome sync, with nothing to sign up for: your lists merge, and nothing is overwritten
• Reminders before deadlines and events, even with the side panel closed, with Mark done and Snooze right in the notification
• A toolbar icon that shows the time left until your next deadline (switch it off in Appearance if it stresses you out)
• Seven themes in light and dark, each one a metal (Chrome, Holo, Rose, Ember, Cobalt, Jade) or plain and solid (Clear), with full keyboard support, and screen reader friendly

Your privacy

Everything you add is stored in Chrome on your own computer. With sync on (the default), Chrome sync also carries it, through your Google account, to your other computers signed in to the same Chrome profile; turn it off in Appearance. None of it is ever sent to me or anyone else, and there's no account, server, analytics or tracking. Countdown asks for no access to websites when you install it. If you turn on reminders, Chrome asks whether Countdown may show notifications; they're worked out and shown on your computer. If you import a calendar link, Chrome asks whether Countdown may read that one site, and that's the only site it ever contacts. The full policy is in PRIVACY.md.

Get Countdown

Install it from the Chrome Web Store, then pin it and click its icon to open the side panel. It updates itself whenever I publish a new version.

If you'd rather build it from source, the steps are below.

Made by one person

Countdown is a one-person project, built and looked after by me. If something's broken or you have an idea, I'd love to hear it: open an issue.

---

Building it yourself

The rest of this page is for running Countdown from source, and a full reference of how everything behaves. Design tokens, components and motion are documented in DESIGN.md.

Requirements

• Chrome 123 or later (side panel, light-dark() colors, the Popover API)
• Node 24 LTS with npm 11, to build

Install and build

npm ci
npm run build

This writes the unpacked extension to dist/.

With older Node versions bundled with npm 10, npm install can fail with Cannot read properties of null (reading 'edgesOut') (an npm bug). npm ci still works; upgrading to Node 24 fixes it.

Load the extension in Chrome

1. Run npm run build.
2. Open chrome://extensions and turn on Developer mode (top right).
3. Click Load unpacked and choose the dist/ folder.
4. Pin Countdown from the puzzle-piece menu, then click its icon. The side panel opens.

After changing the code: run npm run build again (or keep npm run dev running, which rebuilds on save), click the reload icon on Countdown's card in chrome://extensions, then reopen the panel.

Using Countdown

A quick guide to everything you can do.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗