World Time Chrome Extension | Phuket Web Design

Hello and welcome back to another of our DIY Tutorials for Chrome extension. Today, we will be creating a Chrome extension for a World Time Clock. This tutorial consists of several quick and easy steps. We'll begin by creating the main JSON, HTML and JavaScript files inside the structure of a Chrome extension. Then, we'll guide you through the process of creating the necessary image files for the extension, such as the 6x16, 48x48, and 128x128 pixels icons, which, together with the JSON, HTML and JS files are essential for Chrome to recognize and load your extension. Right, let's dive in! 1. Organize Extension Files First, let's organize your files. Your extension folder will contain: world-time.js (Code below) world-time.html (Code below) manifest.json (Code below) 2. Create the Manifest File Chrome extensions require a manifest.json file. This file tells Chrome about your extension, its version, and what it needs to run. Here's an example of what your manifest.json might look like: { "manifest_version": 3, "name": "World Time Clock", "version": "1.0", "description": "Display the world time for various time zones.", "permissions": [ "activeTab" ], "action": { "default_popup": "world-time.html", "default_icon": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" } }, "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" } } 3. HTML and JavaScript Files for World Time Clock Extension To create the World Time Clock Chrome extension, you'll need two main files: an HTML file (world-time.html) and a JavaScript file (world-time.js). These files work together to display the current time in various time zones selected by the user. Here's how to set up and understand each file. 3.1. HTML File (world-time.html) The HTML file provides the structure of your extension's user interface. It includes a dropdown menu for selecting a time zone and a display area for the clock. Below is the content of world-time.html: World Time Clock Local time London GMT Rome Cairo Moscow Dubai Bangkok Hong Kong Tokyo Sydney Melbourne Fiji New Zealand Hawaii San Francisco New York Rio De Janeiro 00 : 00 : 00 AM This file sets up a simple interface with a dropdown menu for the user to select a time zone. When a time zone is selected, the JavaScript code will update the worldclock span with the current time in the selected zone. 3.2. JavaScript File (world-time.js) The JavaScript file contains the logic to calculate the current time based on the selected time zone and update the display accordingly. Here's an overview of world-time.js: document.addEventListener('DOMContentLoaded', function() { const selectElement = document.querySelector('select[name="city"]'); selectElement.addEventListener('change', updateClock); setInterval(updateClock, 1000); // Update the clock every second updateClock(); // Initial update on load }); function getZoneOffset() { const selectElement = document.querySelector('select[name="city"]'); // If the selected option value is an empty string (''), consider it as local time const value = selectElement.value; if (value === '') { return null; // Indicate local time without offset } return parseInt(value, 10); } function formatTimeValue(value) { return value < 10 ? `0${value}` : value.toString(); } function updateClock() { const zoneOffset = getZoneOffset(); let targetTime; if (zoneOffset !== null) { // Time zone offset is defined, calculate target time based on offset const now = new Date(); targetTime = new Date(now.getTime() + now.getTimezoneOffset() * 60000 + zoneOffset * 3600000); } else { // Zone offset is null, indicating local time should be used targetTime = new Date(); } let hours = targetTime.getHours(); const minutes = formatTimeValue(targetTime.getMinutes()); const seconds = formatTimeValue(targetTime.getSeconds()); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; hours = hours ? hours : 12; // The hour '0' should be '12' document.getElementById('hours').textContent = formatTimeValue(hours); document.getElementById('minutes').textContent = minutes; document.getElementById('seconds').textContent = seconds; document.getElementById('ampm').textContent = ampm; } 4. Add an Icon Create an icon for your extension and place it in an images folder within your extension directory. You need to create or find icons in three sizes: 16x16, 48x48, and 128x128 pixels. Reference these icons in your manifest.json. Here are mine for reference: 5. Loading the Extension Open Chrome and navigate to chrome://extensions/. Enable "Developer mode" at the top right. Click "Load unpacked" and select the directory where your extension files are located. 6. Debugging After loading your extension, click on the extension icon to test it. If it doesn't work as expected, you can debug it by right-clicking on the popup and selecting "Inspect". The Chrome Developer Tools will open, where you can debug your HTML and JavaScript. Read also: DIY Business Content Prompt Generator GET YOUR FREE COPY: FREE DIY World Time Chrome Extension Conclusion That's the basic process to turn your world time clock into a Chrome extension. This setup assumes you want a popup style extension that shows your world time clock when you click the extension icon. If you have different requirements (e.g., content scripts, background scripts, or additional permissions), the setup might vary.