JavaScriptChrome APIHTML/CSSWeatherAPI
Weather Chrome Extension
The Chrome Weather extension is a feature-rich weather application that displays the current weather conditions for multiple cities. The extension integrates with the WeatherAPI to retrieve the latest weather data. Users can configure the extension to display the temperature in either Celsius or Fahrenheit and can also choose to display the weather in an overlay that can be toggled and set to open by default on new tabs. Additionally, the extension features a temperature badge that displays the current temperature in the browser toolbar.
System Features
01.Search location
After installing the Chrome Weather extension, click on the extension icon in the Chrome toolbar to launch the application. The extension fetches the data of any zipcode, city, state, or region given and displays the weather for that location. To search for the weather in a different location, click on the "+" button and enter the location in the search bar to add it to the list.
02.Home City
To set a "Home City", right-click on the extension weather icon at the browser's top right corner and click "options". In the options page, there will be a "Home City name" field where you can type in the name of the city you want to set as your home city. Once you have typed in the name of the city, click on the "Save" button to save your settings.
After setting your home city, the extension will display the weather data for your home city at the top of the popup window and on the extension badge in the toolbar. It will also display the weather data for your home city in the weather card overlay when it is active.
03.Display multiple locations
When a new city is added by clicking on the plus icon in the top right corner of the extension popup, a weather card is added to the popup window containing the weather data. Depending on the number of cities added, you may have to scroll if necessary. The extension can store multiple cities, and users can also remove any city by clicking on the "Delete" button in the city card.
04.Toggle Overlay
The weather card overlay shows the current weather data for the user's home city in a weather card displayed on top of any active webpage when toggled. In order to display the overlay, it can be toggled at the top right corner of the extension popup window, and closed either by clicking the 'delete' button or toggling the overlay in the popup.
05.Persistent Overlay
By default, the overlay for the Chrome Weather extension is only displayed when it is activated in the extension's popup window. However, users can customize this behavior by enabling the "Auto toggle overlay on webpage load" option located on the extension's Options page. Once enabled, the overlay will be automatically displayed on new webpages without the need to activate it from the popup window.
Technical Details
Extension Features:
▹Displays the current weather conditions for any location the user may choose.
▹Consistently updates weather data for the user's stored cities.
▹Allows users the flexibility to search for the weather in any location format, such as zipcode, city name, region, and/or state.
▹Allows users to configure the temperature unit (Celsius or Fahrenheit) and updates all related components in real-time.
Install Instructions:
▹Download the project file.
▹Go to Chrome's extensions Dashboard by typing chrome://extensions in the Browser URL.
▹Ensure the Developer mode toggle bar located at the top right corner is enabled.
▹Click Load unpacked at the top left corner and select the directory for the cloned project.
▹(Optional) Go to the extension icon located at the top right corner, and pin the Weather extension so that the icon becomes more accessible.
▹After installing the Chrome Weather extension, click on the extension icon in the Chrome toolbar to launch the application. By default, the extension will display the weather for your current location.
Future Improvements:
Some potential future improvements that could be made to the Chrome Weather extension include:
▹Adding support for more weather data (e.g. wind speed, humidity).
▹Improving the UI and user experience.
▹Adding support for more temperature units (e.g. Kelvin).
▹Adding support for more languages.