Menu

1 / 2

Building a World Clock Feature for Firefox New Tab Extensions

DEV Community·Weather Clock Dash·6 months ago
#UlgVdQpz
#firefox#javascript#webdev#timezone#label
Reading 0:00
15s threshold

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 .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.