If you are an Google Chrome Extension user, you have probably used some browser extensions. Have you ever wondered how to build one yourself?
In this article, I’ll show you how to create a Chrome extension from scratch.
Table of Contents Google Chrome Extension:
- What is a Chrome extension?
- What will our Chrome extension look like?
- How to create a Chrome extension?
- Creating a manifest.json file.
- Conclusion.
- What is a Chrome extension?
A Chrome extension is an application installed in the Chrome browser that extends the functionality of the browser. You can easily create one using web technologies like HTML, CSS and JavaScript. Creating a Chrome extension is similar to creating a web application, but requires a manifest.json file, which we will discuss in the last section of this post.
What will our Chrome extension look like?
As you can see, the Chrome extension above shows the latest data on the Coronavirus (COVID-19) in the UK. We will look at how to create this extension in this blog post.
Here we use the https://api.coronavirus.data.gov.uk/v1/data API to retrieve data. For the sake of simplicity, we only show the most recent dataset in this post.
The full source code for this project can be found on GitHub for instance.
How to create a Chrome extension?
First, we need to create an empty folder in which to put our HTML, CSS, and JavaScript files.
Let’s create an index.html file with this HTML boilerplate code in the directory:
Now let’s add a link to the bootstrap CDN in the head tag. We’ll be using the Bootstrap framework here so we don’t need to write any additional 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>In the demo we saw that the records are displayed as a table. So now we need to work on creating a table.
The code above creates a table that is 450 pixels wide. There are four different headings in a table: Date, Country, Confirmed, and Death.
<!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>
Here you can see that, for example, different IDs have been assigned to the individual table data. So, we use the value of these IDs in JavaScript to update the table data. Again, after loading all the HTML content, we ended up loading JavaScript.
Now that the table have display, we need to work on writing JavaScript to get 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();Now let’s break down the above code:
- Here we use the asynchronous function called fetchData.
- The data is retrieved from the https://api.coronavirus.data.gov.uk/v1/data API.
- The JSON data is stored in a variable called record.
- The HTML content in td with the IDs date, areaName, LatestBy and DeathNew is update with the corresponding values from the API.
If we check the browser, we can see the following result. The data is retrieve from the API and be update as the data in the API changes.
Manifest.json File:
As we’ve already discussed, creating a Chrome extension is similar to creating any web application. The only difference is that the Chrome extension requires a manifest.json file where we store all configurations.
The manifest.json file contains all the information needed to create the Chrome extension. Thus, it’s the first file to check for extension, and everything is load from that single file.
Now let’s create a manifest.json file in the root directory and add the following code:
{
"name": "Covid-19 Stats UK",
"version": "1.0.0",
"description": "latest covid data of UK",
"manifest_version": 3,
"author": "Sampurna Chapagain",
"action":{
"default_popup": "index.html",
"default_title": "Latest Covid Report"
}
}Our manifest.json file contains the value of name, version, description, manifest_version (3 in this case, which is the latest manifest version), author, and action fields. However, in the action field is the value for default_popup, which contains the path to the HTML file, index.html in this example.
You can look here to see all configurations of a manifest.json file. Now that we’ve also added the manifest.json file, we can add this project to our Chrome browser as an extension. Once you select extensions, it will redirect to Chrome extensions page. Make sure you enable developer mode here. Once done, we’ll click the Load Unpacked button so we can load our project into the Google Chrome extension store.
The extension is now available in our Chrome extension store. You can also pin the extension in the browser as shown in the following GIF:
This extension only works in your browser. So, if you want to publish it in the Chrome Web Store, follow this link.
Conclusion:
If you are familiar with HTML, CSS and JavaScript, you can easily create Chrome extensions. Thus i hope after reading this blog post you will create some cool extensions.
Good coding!
You can find me on Twitter for daily web development content.