Google Extensions is aHTML, CSS and JAVASCRIPTApplication, which can be installed on Google Chrome.

Below is a guide for those interested in creating a Google extension that allows us to access information on COVID-19 cases in different countries.

Step 1: Create a directory

Create a folder named dist, and then create the following files.

Step 2: Create the HTML file

As follows:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Covid 19</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="index.js" defer></script>
  </head>
  <body>
    <div class="header">Covid 19</div>
    <div class="container">
    <form class="form-data" autocomplete="on">
      <div class="enter-country">
        <b>Enter a country name:</b>
      </div>
      <div>
        <input type="text" class="country-name" />
      </div><br>
      <button class="search-btn">Search</button>
    </form>
    <div class="result">
      <div class="loading">loading...</div>
      <div class="errors"></div>
      <div class="data"></div>
      <div class="result-container">
        <p><strong>New cases: </strong><span class="todayCases"></span></p>
        <p><strong>New deaths: </strong><span class="todayDeaths"></span></p>
        <p><strong>Total cases: </strong><span class="cases"></span></p>
        <p><strong>Total recovered: </strong> <span class="recovered"></span></p>
        <p><strong>Total deaths: </strong><span class="deaths"></span></p>
        <p><strong>Total tests: </strong><span class="tests"></span></p>
        <center><span class="safe">Stay Safe and Healthy</span></center>
      </div>
    </div>
  </div>
</body>
</html>
Copy the code

Step 3: Create a JAVASCRIPT file

The JAVASCRIPT file is used to process the API and reads as follows:

const api = "https://coronavirus-19-api.herokuapp.com/countries";
const errors = document.querySelector(".errors");
const loading = document.querySelector(".loading");
const cases = document.querySelector(".cases");
const recovered = document.querySelector(".recovered");
const deaths = document.querySelector(".deaths");
const tests=document.querySelector(".tests");
const todayCases=document.querySelector(".todayCases");
const todayDeaths=document.querySelector(".todayDeaths");
const results = document.querySelector(".result-container");
results.style.display = "none";
loading.style.display = "none";
errors.textContent = "";
// grab the form
const form = document.querySelector(".form-data");
// grab the country name
const country = document.querySelector(".country-name");

// declare a method to search by country name
const searchForCountry = async countryName => {
  loading.style.display = "block";
  errors.textContent = "";
  try {
    const response = await axios.get(`${api}/${countryName}`);
    if(response.data ==="Country not found") {throw error;  }
    loading.style.display = "none";
    todayCases.textContent = response.data.todayCases;
    todayDeaths.textContent = response.data.todayDeaths;
    cases.textContent = response.data.cases;
    recovered.textContent = response.data.recovered;
    deaths.textContent = response.data.deaths;
    tests.textContent =  response.data.totalTests;
    results.style.display = "block";
  } catch (error) {
    loading.style.display = "none";
    results.style.display = "none";
    errors.textContent = "We have no data for the country you have requested."; }};// declare a function to handle form submission
const handleSubmit = async e => {
  e.preventDefault();
  searchForCountry(country.value);
  console.log(country.value);
};

form.addEventListener("submit".e= > handleSubmit(e));
Copy the code

Above, we created an asynchronous function called searchForCountry on which we can use the async-await syntax. Async await allows us to stop executing subsequent related code while we are waiting for a response from the server. Use the await keyword before the snippet, and when the snippet is executed, the code after it stops execution.

In this example, we await the response to a GET request, and then assign the response value to the response variable.

Axios is a popular JavaScript library that handles HTTP requests well and can be used on browser platforms and Node.js platforms. It supports all modern browsers, even IE8. It’s promise based, so it’s easy to write async/await code.

Here are some apis from which we get data:

  • Coronavirus-19-api.herokuapp.com/countries – get all the details of the country
  • Coronavirus-19-api.herokuapp.com/countries/i…- access toIndiaOf this countrycovid19Case information

Step 4: Create a CSS file

According to personal preference, write to decorate the HTML

Step 5: Create the manifest.json file

Create a file called manifest.json and add the following code to the file. This file contains information about how Google Chrome handles extensions.

{
    "manifest_version": 2."name": "Covid19"."version": "1.0.0"."description": "Provides the cases details regarding Covid19 with respective to any Country"."browser_action": {
      "default_popup": "index.html"
    },
    "icons": {"16": "./icons/16covid-19.png"."64": "./icons/64covid-19.png"."128": "./icons/128covid-19.png"
    },

    "content_security_policy": "script-src 'self' https://unpkg.com ; object-src 'self'"
}
Copy the code

The manifest_version, name, and version fields are important and must be declared. The extension must have a “Manifest_version “: 2 key-value pair, which is in sync with the latest Google Browser. The name/version values can be assigned as required.

The effect GIF is as follows:

Final step: Add to Google Extensions

You can jump to the Google Extensions Management page by clicking on Chrome :// Extensions.

You can also go to the Google Extended Apps Admin page by doing the following

Steps: Setup – Extension

When you open the extension Management page, you can click the Load unzipped extension button to upload the newly created dist folder.

The latter

  • Original text: dev. The to/sunilaleti /…

  • More: github.com/reng99/blog…