Devlog #2: The Core Loop

The skeleton is alive, the real-world quirks are patched and the timezone picker doesn’t suck anymore. But how does it actually feel to use?

Here’s how it works. You add a contact and the extension detects the time for them right where you’re typing.

Step 1: Telling TimeBridge who you know

When you click the extension icon, the popup opens. That right there is your contact book.

Before, I was using a native <select> dropdown for the timezones which meant scrolling through 418 IANA zones which was terrible. Now, it’s a custom search-as-you-type combobox.

You just type a name (like “Jean”) then start typing a country, city or abbreviation in the timezone box. If you type “Europe” the combobox instantly surfaces the available results because of the alias map I added. It still needs to be refined since it doesn’t yet contain ALL of the timezones. Also when you hit Enter and click “Add Contact”, it saves to chrome.storage.local, Jean now shows up in your list with her current local time updating live.

Step 2: Typing in the wild

Now you head over to Gmail, Slack web or Twitter, anywhere with a text box. You start typing a message, lets say “Let’s sync tomorrow at 3pm”

Behind the scenes, it works like this:

The Listener: A content script is running on the page. It’s using a single delegated document.addEventListener in the capture phase. This means it catches your typing whether you’re in a plain , a rich text with nested formatting spans or even a contact form embedded in an iframe.

The Debounce: It doesn’t parse on every single keystroke (that would lag the browser). It uses a 250ms debounce. When you pause typing for a quarter of a second, it grabs the text.

The Parser: It passes that text to chrono-node, the parsing library I bundled. Chrono looks at the phrase “tomorrow at 3pm” and figures out what “tomorrow” actually is based on today’s date and spits out an actual Date object.

Step 3: The Badge

If Chrono finds a time, the extension builds a floating, dark-colored tooltip (the badge) and injects it right below the text box you’re typing in.

The badge does three things:

It shows you the exact phrase it detected: “tomorrow at 3pm”

It grabs the last contact you used (in this case, Jean) and automatically converts that 3pm time into her local time, displaying it right there.
It gives you a dropdown. If you actually meant to schedule this with a different contact, you can switch the dropdown right in the badge and it recalculates the time instantly.

One of the most annoying things to figure out was what happens when you hit Enter. On Slack or WhatsApp, Enter sends the message and clears the text box immediately.

Because of my 250ms debounce, the extension was occasionally showing the badge after the message was already sent, making it float over an empty text box. The fix was adding a specific keydown listener. If you hit enter (without shift), the extension kills the debounce timer and hides the badge instantly which means no more ghost badges