1. The Vision
This Chrome extension provides a team-oriented timezone tracker with a "Google-quality" experience — no API costs, no network latency, no privacy concerns. By bundling geographic data and using native browser logic, we provide a robust offline tool for coordinating across global teams.
2. The Big Picture
The system is built on a "Search-to-Logic" bridge. Human language input is converted into IANA Time Zone Identifiers for accurate time rendering across multiple timezones simultaneously.
Core Principles
- The Data: A local
timezones.jsonacts as our world atlas (~2,500 cities). - The Interface: A multi-panel popup with header, time slider, and timezone cards.
- The Engine: Fuse.js interprets user intent (even with typos or partial names).
- The Output: The browser's native
IntlAPI performs all time math. - The Persistence:
chrome.storage.localsaves timezones, team pills, and proposed time state.
3. Key Features
| Feature | Description |
|---|---|
| Multi-Timezone Cards | Track up to 6+ timezones simultaneously with city, country, and live times. |
| Time Slider | Scrub through the day with a range slider and ±5m/±1h navigation arrows. |
| Date Picker | Select any date to see what time it will be across all timezones. |
| Team Member Pills | Assign color-coded team member labels to each timezone card. |
| Dual UI States | "Live" mode (ticking clock) vs "Proposed" mode (user-selected time). |
| State Persistence | Proposed time, date, and timezone list persist across extension sessions. |
| Copy to Clipboard | One-click copy of all timezone info in a beautifully formatted text block. |
| Drag & Drop Reorder | Reorder timezone cards by dragging. |
| Settings & Personalization | Customize 12h/24h time format and DMY/MDY/YMD date ordering. |
| Fuzzy Search | Find cities by name, state, or alias with Fuse.js. |
4. Architecture ↔ Workflow Mapping
| Architecture Component | Workflow Role | User Experience Impact |
|---|---|---|
| Local JSON Store | Data Source | Instant search results with no "loading" spinners. |
| Fuse.js Index | Translation Layer | Users can find "Indy" or "NYC" and get the right result. |
| Intl Logic Engine | Time Calculator | Guaranteed accuracy for Daylight Saving Time (DST). |
| Chrome Storage | Persistence | Timezones, pills, and proposed state survive extension restarts. |
| Time Slider | Exploration Tool | Users can "time travel" to plan meetings across zones. |
5. File Structure
NewTimeZoneExt126/
├── manifest.json # Chrome Extension Manifest V3
├── popup.html # Main popup structure
├── popup.css # All styling (480px wide)
├── popup.js # Core logic (state, UI, persistence)
├── data/
│ └── timezones.json # Bundled city/timezone database
├── lib/
│ └── fuse.js # Fuzzy search library
├── icons/ # Extension icons
└── docs/ # This documentation