Handling Time Zones in Browser Extensions: Lessons from Building a World Clock

When I added world clock support to my Firefox new tab extension, I thought it would be simple — just use JavaScript's Intl API and call it a day. Turns out, there are several gotchas worth knowing about.

The JavaScript Intl.DateTimeFormat API

Modern browsers have excellent built-in time zone support:

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 ()); }

console . log ( getTimeInZone ( ' America/New_York ' )); // 14:32:07 console . log ( getTimeInZone ( ' Europe/London ' )); // 19:32:07 console . log ( getTimeInZone ( ' Asia/Tokyo ' )); // 04:32:07

Enter fullscreen mode

Exit fullscreen mode

No external libraries needed. No time zone database to maintain.…