Before starting anything let me show you the structure of the extension
You can also directly browse my repository by using link https://github.com/rakeshkumar125/postnidea-weather-now
Let me first explain the manifest.json file.
You can see the name, version, description is the fields that contain identification information.
Permission field contains the name of the fields for which you extension need permission to modify or access. Right now I have added only a single one storage but you can allow permission to other fields according to your needs. You can get more information using link
Icons are the field which contains the set of images which shows for the chrome extension logo on a different resolution.
“homepage_url” is the field which contains the publisher or developer website URL so that end user can get the information.
“browser_action” field contains the list of resources that will be called when the user performs the action on the browser like click on the chrome extension etc. In my case, it contains the “default_popup” field in which I have defined the name of the file which is called when the user clicks on the chrome extension logo. “default_icon” field which contains images for different resolutions.
“manifest_version” is the field which contains the version of the manifest file.
Look & Feel or Client side design
Now let me start explanation another important file popup.html
After that, you can see the body part you can see I have added the DIV with id “weather-report”. Initially, it has shown with loading image once data fetched from API then it’s loaded with the report.
Implement Extension Logic
Last but not least file “popup.js”. You can see the code is below.
You can see the I first checked that user is connected with the internet or not by using function “navigator.onLine”. If the user is online then start preparing the weather report otherwise it will just show the message for connecting to the internet.
If the user connects with internet then I got the current use latitude and longitude of the user by the API (https://ipv6.ip.nf/me.json) which is free. Once I got the user latitude and longitude then Trigger another API (api.openweathermap.org) for weather report which is also free. After getting weather JSON data then I create HTML using function “getReportHTML”.
Finally, load the report to the popup.
You can also check out above explanation using video.
You can also enjoy live demo by clicking on below URL
If you have any query or suggestions you can share by comment.