Building a World Clock Feature for Firefox New Tab Extensions
One of the most-requested features for new tab extensions is a world clock — a quick way to see what time it is in other cities. I built this for the Weather & Clock Dashboard extension. Here's how it works.
The Core Problem: Time Zones
JavaScript's Date object is surprisingly powerful for this. The key is the Intl.DateTimeFormat API:
function getTimeInZone ( timezone ) { return new Intl . DateTimeFormat ( ' en-US ' , { timeZone : timezone , hour : ' 2-digit ' , minute : ' 2-digit ' , second : ' 2-digit ' , hour12 : false }). format ( new Date ()); }
// Usage: getTimeInZone ( ' America/New_York ' ); // "14:35:22" getTimeInZone ( ' Asia/Tokyo ' ); // "03:35:22" getTimeInZone ( ' Europe/London ' ); // "19:35:22"
Enter fullscreen mode
Exit fullscreen mode
No external libraries needed — pure browser API.
Getting the Full List of Timezones
Intl.supportedValuesOf('timeZone') returns all supported timezone identifiers:
const timezones = Intl .…