“This is the 11th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

What is a Chrome extension?

Chrome extensions are programs installed in the Chrome browser to enhance the browser’s capabilities. You can easily build one using Web technologies such as HTML, CSS, and JavaScript.

Creating a Chrome extension is similar to creating a Web application, but it requires a manifest.json file, which we’ll discuss in the final section of this article.

How to create a Chrome extension

First, we need to create an empty folder to which we will add HTML, CSS, and JavaScript files.

In that folder, let’s create an index.html file using the following HTML boilerplate code:

<! DOCTYPE html> <html> <head> <title>Covid-19 Stats- UK</title> <meta charset="utf-8"> </head> <body> </body> </html>Copy the code

Now, let’s add a link to the Bootstrap CDN in the head tag. We’ll use the Bootstrap framework here so that we don’t have to write some extra CSS in this example.

<head> <title>Covid-19 Stats- UK</title> <meta charset="utf-8"> <link Href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" > < / head >Copy the code

Let’s start by creating a table.

<! DOCTYPE html> <html> <head> <title>Covid-19 Stats- UK</title> <meta charset="utf-8"> <link Href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" > < / head > < body > < div class="container mt-3" style="width: 450px;" > <h2 class="text-center">Covid Latest Report-UK</h2> <table class="table table-bordered"> <thead> <tr> <th>Date</th> <th>Country</th> <th>Confirmed</th> <th>Deaths</th> </tr> </thead> <tbody> <tr> <td id="date"></td> <td id="areaName"></td> <td id="latestBy"></td> <td id="deathNew"></td> </tr> </tbody> </table> </div> </body> <script src="script.js"></script> </html>Copy the code

The above code creates a table with a width of 450px. The table has four different headings: Date, Country, Confirmed and Deaths.

Here, you can see that each table data TD is assigned a different ID. We will use the values of these ids in JavaScript to update the table data. Also, here we load JavaScript at the end after loading all the HTML content.

Now that the table is displayed, we need to write JavaScript to get the data from the API.

Let’s create a script.js file and add the following code:

async function fetchData() {
    const res=await fetch ("https://api.coronavirus.data.gov.uk/v1/data");
    const record=await res.json();
    document.getElementById("date").innerHTML=record.data[0].date;
    document.getElementById("areaName").innerHTML=record.data[0].areaName;
    document.getElementById("latestBy").innerHTML=record.data[0].latestBy;
    document.getElementById("deathNew").innerHTML=record.data[0].deathNew;
}
fetchData();
Copy the code

Now, let’s break down the code above:

  • In this case, we use namefetchData.
  • Is from the API. The coronavirus. Data. Gov. UK/v1 / data API to get the data.
  • JSON data is stored in a file namedrecord.
  • With the idsdate,areaNameandlatestByTd HTML contentdeathNewUpdated by the corresponding value of the API.

If we check the browser, we can see the following results.

The data is taken from the API, and it is constantly updated as the data in the API changes.

The Manifest. Json file

As we discussed earlier, building Chrome extensions is similar to building any Web application. The only difference is that the Chrome extension requires a manifest.json file where we save all the configuration.

The manifest.json file contains all the necessary information to build the Chrome extension. This is the first file that the extension checks, and everything is loaded from this file.

Now, let’s create a manifest.json file in the root folder and add the following code:

{
    "name": "Covid-19 Stats US",
    "version": "1.0.0",
    "description": "latest covid data of US",
    "manifest_version": 3,
    "author": "Sampurna Chapagain",
    "action":{
        "default_popup": "index.html",
        "default_title": "Latest Covid Report"
    }
}
Copy the code

Our manifest.json file contains the name, version, description, values manifest_version (3 in this case, which is the latest manifest version), author, and Action fields. In the Action field, its value default_popup contains the path to the HTML file in the index.html example.

You can view all the configuration of the manifest.json file here.

Now that we’ve added the manifest.json file, we’re ready to add this project as an extension in Chrome.

To do this, we need to go to Select More Tools and Extensions from the browser menu, as shown below:

Navigate to extensions in Chrome

When you’re done, you need to clickLoad unpackedButtons that allow us to load projects into the Chrome extension store.

The extension is now available in our Chrome Extension store. You can also fix the extension in the browser, as shown in the GIF below:

Anchor the extension to the browser

This extension only works with your browser. If you want to publish it on the Chrome Web Store, you can click on this link.

conclusion

If you have some knowledge of HTML, CSS, and JavaScript, you can easily build Chrome extensions. I hope that after reading this post, you can create some cool plug-ins.