How to build your first Weather App Chrome Extension

Chrome extension is very common nowadays, with a lot of ideas, functionalities for numerous cases. Today, I decided to write a simple tutorial for people that isn’t familiar with Chrome Extension to create an extension for themselves.

Chrome Extension must serve a purpose in my opinion, doesn’t matter how simple it is, and the application I want to do today is Weather App. With this you can check what time is it in your location, what’s the weather like, and what is the temperature.

First of all, let’s create a manifest.json file, that every extension has, that provides important information.

The code above are pretty straight forward, but for further information:

• name : the name of your extension
• version : the version of your extension
• description : the description of your extension when you go into the extension settings
• permission : since we are doing the weather app, we need current location of the user, so we need permission for the GeolocationAPI
• icons : the icons of the extension
• action : actions of the app, in this example I only do the popup action

Next step is to create the index.html file and start coding your app, I will skip to the functionalities part, I guess you can do the layout and styling on your own, or you can check out my source code at the end of the story

Getting the user’s location is the first thing to do, although we have the user permission on the manifest.json above, but still need fallback alerts to prevent crashing.

You can see I’m calling fetchWeatherData right after I have the user’s position in latitude and longitude, this is where we achieve the weather data :

In this tutorial, I will use WeatherBit API to get the weather information, since I can get the API_KEY for free ( most of the other APIs in the market require subscription ).

When the API calls return the success response, we can achieve the weather, description, current city, temperature. WeatherBit is very kind because they even give us the icon of the current weather’s description( we can use this in our app ).

Finally, we can install the extension in our browser. The steps are:

Settings => Extensions => Manage extensions => Load unpacked

This is the final product

Here is the full source code

Last Words

Although my content is free for everyone, but if you find this article helpful, you can buy me a coffee here