Creating a Weather Forecast Extension: A Beginner’s Guide

6 min readAug 30, 2024

Creating a weather forecast extension can be an exciting project for beginners looking to dive into web development. This guide will walk you through the process step-by-step, from setting up your environment to building and deploying the extension.

1. Setting Up Your Development Environment

Before you start coding, you need to set up your development environment. This involves installing the necessary tools and software:

Text Editor: Choose a text editor like Visual Studio Code, Sublime Text, or Atom to write and edit your code.
Browser: Use a modern web browser like Google Chrome or Mozilla Firefox for testing and debugging your extension.

2. Creating the Project Structure

Start by creating a folder for your project. Inside this folder, you’ll need a few essential files:

index.html: The main HTML file for the extension.
styles.css: The CSS file for styling the extension.
script.js: The JavaScript file for functionality.
manifest.json: The configuration file required for Chrome extensions.

Your project folder structure should look like this:

weather-extension/

3. Conceptualizing the Weather Forecast Extension

The idea behind the weather forecast extension was to develop a tool that offers up-to-date weather information in a clean and intuitive interface. The goal was to create a web-based application that could be easily integrated into any website or used as a standalone application. Key features included:

Real-time Weather Data: Fetching current weather conditions using an external weather API.
Geolocation Support: Automatically retrieving weather information based on the user’s location.
Search Functionality: Allowing users to manually search for weather data by entering a location.
Responsive Design: Ensuring the extension works well across different devices and screen sizes.

With these objectives in mind, the next step was to design the user interface and determine the technical requirements for the extension.

4. Designing the User Interface

A user-friendly interface is crucial for any successful application. For the weather forecast extension, the design focused on simplicity and clarity. The layout was structured into several key components:

Header: Contains the title and a settings button, allowing users to interact with the extension.
Location Input: A text input field where users can enter a location and a search button to trigger the search.
Weather Information: Displays current weather details, including temperature, weather condition, humidity, and wind speed.
Loading Indicator: A visual cue to show that data is being fetched.
Footer: Shows the last updated time to inform users of the freshness of the data.

Here is a simplified version of the HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather Forecast</title>
    <link href="./popup.css" rel="stylesheet" />
</head>
<body>
    <div class="card">
        <div class="card-header">
            <h1>Weather Forecast</h1>
            <button aria-label="Settings">
                <!-- Settings Icon -->
            </button>
        </div>
        <div class="location-input">
            <input type="text" id="location-input" placeholder="Enter location" />
            <button id="search-button" aria-label="Search">
                <!-- Search Icon -->
            </button>
        </div>
        <div class="loading" id="loading">
            <div class="loader"></div>
        </div>
        <div class="weather-info" id="weather-info">
            <h2 id="city_name">--</h2>
            <span id="badge">--</span>
            <div class="weather-temp">
                <img id="weather_icon" src="/assets/cloud.png" alt="Weather Icon" />
                <span id="text_temp">--</span>
            </div>
            <p id="text_desc" class="weather-condition">--</p>
            <div class="weather-details">
                <p><strong>Feels Like</strong> <span id="text_feelslike">--</span></p>
                <p><strong>Humidity</strong> <span id="text_humidity">--</span></p>
                <p><strong>Wind Speed</strong> <span id="text_wind">--</span></p>
            </div>
        </div>
        <div class="footer" id="footer">Last updated: -- ago</div>
    </div>
    <script src="./fetchData.js"></script>
</body>
</html>

5. Implementing the Weather Data Fetching Logic

Fetching weather data is the core functionality of the extension. For this, the OpenWeatherMap API was chosen due to its comprehensive weather data and ease of use. The JavaScript code handles fetching the weather data based on either the user’s geolocation or a manually entered location.

The main functions involved are:

fetchWeatherData: Fetches weather data from the API and updates the UI with the retrieved information.
getWeatherForDefaultLocation: Retrieves weather data for a default location if geolocation is unavailable.
handleGeolocationSuccess and handleGeolocationError: Manage successful or failed attempts to get the user's geolocation.
getGeolocation: Checks if the browser supports geolocation and requests the user's location.

Here is a sample of the JavaScript code:

const API_KEY = 'e4f273e6c4c93188f9964501de66d735';
const DEFAULT_LOCATION = 'New York';

function showLoading() {
    document.getElementById("loading").style.display = "block";
    document.getElementById("weather-info").style.display = "none";
}

function hideLoading() {
    document.getElementById("loading").style.display = "none";
    document.getElementById("weather-info").style.display = "block";
}

function fetchWeatherData(lat, lon, locationName = '') {
    const url = locationName ? 
        `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(locationName)}&units=metric&appid=${API_KEY}` :
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=${API_KEY}`;

    fetch(url)
        .then(response => response.json())
        .then(jsonData => {
            document.getElementById("city_name").innerHTML = jsonData.name;
            document.getElementById("badge").innerHTML = jsonData.sys.country;
            document.getElementById("text_temp").innerHTML = `${Math.round(jsonData.main.temp)}°C`;
            document.getElementById("text_feelslike").innerHTML = `${Math.round(jsonData.main.feels_like)}°C`;
            document.getElementById("text_humidity").innerHTML = `${jsonData.main.humidity}%`;
            document.getElementById("text_wind").innerHTML = `${Math.round(jsonData.wind.speed)} m/s`;
            document.getElementById("text_desc").innerHTML = jsonData.weather[0].description.charAt(0).toUpperCase() + jsonData.weather[0].description.slice(1);

            const weatherIcon = jsonData.weather[0].icon;
            document.getElementById("weather_icon").src = `https://openweathermap.org/img/wn/${weatherIcon}.png`;

            const updateTime = new Date().toLocaleTimeString();
            document.getElementById("footer").innerHTML = `Last updated: ${updateTime}`;

            hideLoading();
        })
        .catch(error => {
            console.error('Error fetching weather data:', error);
            hideLoading();
        });
}

document.getElementById('search-button').addEventListener('click', () => {
    const locationName = document.getElementById('location-input').value;
    if (locationName) {
        showLoading();
        fetchWeatherData(null, null, locationName);
    }
});

function getWeatherForDefaultLocation() {
    fetchWeatherData(null, null, DEFAULT_LOCATION);
}

function handleGeolocationSuccess(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    fetchWeatherData(lat, lon);
}

function handleGeolocationError() {
    getWeatherForDefaultLocation();
}

function getGeolocation() {
    if (navigator.geolocation) {
        showLoading();
        navigator.geolocation.getCurrentPosition(handleGeolocationSuccess, handleGeolocationError);
    } else {
        console.log("Geolocation is not supported by this browser.");
        getWeatherForDefaultLocation();
    }
}

// Start the process
getGeolocation();

6. Creating the Manifest File

The manifest.json file is essential for Chrome extensions. It provides metadata and permissions. Here’s a basic example:

{
  "name": "Weather Forecast",
  "description": "An application that shows the weather forecast for the next 5 days",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["geolocation", "activeTab"],
  "background": {
    "script": "background.js"
  },
  "icons": {
    "16": "./icons/icon16.png",
    "48": "./icons/icon48.png",
    "128": "./icons/icon128.png"
  },
  "action": {
    "default_popup": "./popup.html",
    "default_icon": "./icons/icon128.png"
  },
  "cross_origin_opener_policy": {
    "value": "same-origin"
  }
}

7. Handling User Interactions and Error Management

Handling user interactions and errors gracefully is essential for providing a smooth user experience. The search functionality was integrated by adding an event listener to the search button, which retrieves the location entered by the user and fetches the corresponding weather data.

In cases where fetching weather data fails, appropriate error handling was implemented to inform users of the issue. This could involve displaying a user-friendly error message or retrying the request.

8. Testing and Optimization

Testing is a critical phase in the development process to ensure that the extension works as expected across various devices and browsers. During testing, attention was paid to:

Cross-Browser Compatibility: Ensuring the extension functions correctly on different browsers.
Responsive Design: Verifying that the extension adapts to various screen sizes.
Performance: Optimizing the code to reduce loading times and improve responsiveness.

9. Publishing the Extension

Prepare for Publishing: Ensure your extension is fully functional and meets all Chrome Web Store policies.
Create a Developer Account: Sign up for a Chrome Web Store Developer account.
Package Your Extension: Zip your project folder (excluding unnecessary files).
Upload and Publish: Go to the Chrome Web Store Developer Dashboard, upload your ZIP file, and follow the prompts to publish.

10. Conclusion

Creating the weather forecast extension was a rewarding experience that involved designing a user-friendly interface, implementing robust data fetching logic, and handling user interactions effectively. By integrating real-time weather data with geolocation and search functionalities, the extension offers a valuable tool for users to stay informed about the weather.

The project highlighted the importance of thoughtful design, clear coding practices, and thorough testing in developing a successful application. As technology continues to evolve, such projects exemplify how personalized and interactive web applications can enhance user experience and provide meaningful information in an accessible format.