This extension allows you to view the time of day in different regions, with the ability to customize region names and add new ones. Worldtime can display the UTC offset in hours for each timeline and indicate whether Daylight Saving Time (DST) is applied.

Main Features

• Access information from the latest IANA timezone database.
• Obtain details about time adjustments, including DST.
• Compare the time of day across multiple regions that you can select and customize.
• View the UTC offset for various timezones.

Table of Contents

• Features
• Structure
  • ChromeExtension
  • Packages
  • Pages
• Install
  • Procedures
    • Chrome
    • Firefox
• Reference

Features

• React18
• TypeScript
• Tailwindcss
• Vite
• Turborepo
• Prettier
• ESLint
• Chrome Extension Manifest Version 3
• Custom I18n Package
• Custom HMR(Hot Module Rebuild) Plugin

Install

1. Install pnpm globally: npm install -g pnpm (check your node version >= 18.12.0)
2. Run pnpm install

And next, depending on the needs:

For Chrome:

1. Run:
   • Dev: pnpm dev
     • When you run with Windows, you should run as administrator. (Issue#456)
   • Prod: pnpm build
2. Open in browser - chrome://extensions
3. Check - Developer mode
4. Find and Click - Load unpacked extension
5. Select - dist folder at root

For Firefox:

1. Run:
   • Dev: pnpm dev:firefox
   • Prod: pnpm build:firefox
2. Open in browser - about:debugging#/runtime/this-firefox
3. Find and Click - Load Temporary Add-on...
4. Select - manifest.json from dist folder at root

Remember in firefox you add plugin in temporary mode, that's mean it's disappear after close browser, you must do it again, on next launch.

Structure

ChromeExtension

Main app with background script, manifest

• manifest.js - manifest for chrome extension
• lib/background - background script for chrome extension (background.service_worker in manifest.json)
• public/content.css - content css for user's page injection

Packages

Some shared packages

• dev-utils - utils for chrome extension development (manifest-parser, logger)
• i18n - custom i18n package for chrome extension. provide i18n function with type safety and other validation.
• hmr - custom HMR plugin for vite, injection script for reload/refresh, hmr dev-server
• shared - shared code for entire project. (types, constants, custom hooks, components, etc.)
• storage - helpers for storage easier integration with, e.g local, session storages
• tailwind-config - shared tailwind config for entire project
• tsconfig - shared tsconfig for entire project
• ui - here's a function to merge your tailwind config with global one, and you can save components here
• vite-config - shared vite config for entire project
• zipper - By pnpm zip you can pack dist folder into extension.zip inside newly created dist-zip

Pages

• content - content script for chrome extension (content_scripts in manifest.json)
• content-ui - content script for render UI in user's page (content_scripts in manifest.json)
• content-runtime - content runtime script this can be inject from popup like standard content
• devtools - devtools for chrome extension (devtools_page in manifest.json)
• devtools-panel - devtools panel for devtools
• new-tab - new tab for chrome extension (chrome_url_overrides.newtab in manifest.json)
• options - options for chrome extension (options_page in manifest.json)
• popup - popup for chrome extension (action.default_popup in manifest.json)
• side-panel - sidepanel(Chrome 114+) for chrome extension (side_panel.default_path in manifest.json)

Reference

• Vite Plugin
• ChromeExtension
• Rollup
• Turborepo
• Rollup-plugin-chrome-extension