Project Title

Chrome Weather Extension

Project Description

This is a chrome extension that displays the weather for the city added by the user. User can add multiple cities and can delete them as well. It is build using React, TypeScript, Webpack and Manifest V3.

Demo & Instruction Video Link:

Demo & Instruction video - Chrome Weather Extension

Getting Started

0. git clone - https://github.com/SakifKhan98/chrome-weather-extension.git
1. npm i to install dependancies
2. npm start to start running the fast development mode Webpack build process that bundle files into the dist folder. (use npm run build to use the production build)
3. Go to chrome://extensions/ and toggle on Developer mode.
4. Click Load unpacked and select the entire dist folder.
5. Now you can see the extension, enable it to use it.

Loading The Chrome Extension

1. Open Chrome and navigate to chrome://extensions/
2. Toggle on Developer mode in the top right corner
3. Click Load unpacked
4. Select the entire dist folder

Production Build

1. npm run build to generate a minimized production build in the dist folder
2. ZIP the entire dist folder (e.g. dist.zip)
3. Publish the ZIP file on the Chrome Web Store Developer Dashboard!

Features:

1. User can add their home city in the extension option for always showing it on the top of the list.
2. User can add as many cities as they want.
3. User can toggle between Celsius and Fahrenheit scale of temperature.
4. User can delete the cities from the list.
5. User can see the weather of the city in the popup.
6. User can toggle popup in the extension option page.
7. User can see Temperature, Humidity and Feels like temperature.

Direct Using Instruction:

Chrome Weather Extension

1. Download the file from the above link. Extract it. You will find a dist folder.
2. Go to chrome://extensions/ and toggle on Developer mode.
3. Click Load unpacked. Then browse and select the dist folder you have just extracted.
4. Now you can see the extension, enable it to use it.