Google Chrome Extension
You’ve undoubtedly used some extensions in Google Chrome if you’re a Chrome user.
Have you ever wanted to learn how to make one for yourself? I’ll show you how to make a Chrome extension from scratch in this article.
What is a Chrome Extension?
An extension’s main goal is to fulfill a single purpose around which the entire program is organized; it can have several components, but they must all help the program achieve its main goal.
The interface of an extension should be as simple as possible, or it can even extend to a web page, but the main goal should be to provide good functionality with low overhead.
The user must download and install the.crx package in which the extensions are packaged. The Chrome web store now has a Chrome extension available.
What Will our Chrome Extension Look Like?
How to Make a Google Chrome Extension
Create an index.html file with the following HTML boilerplate code inside the folder:
Now, in the head tag add a link to the Bootstrap CDN. We’ll use the Bootstrap(framework) to avoid having to write any additional CSS in this example.
The records were displayed as a table in the demonstration. As a result, we must now focus on constructing a table.
Create a script.js file and paste the following code within it:
Let’s take a look at the code above:
- We’re utilizing the fetchData async function here.
- The information is being fetched from the (https://api.coronavirus.data.gov.uk/v1/data API.)
- The JSON data is saved in the record variable.
- The corresponding API values alter the HTML content of td with the ids date, areaName, latestBy, and deathNew.
If we look at the browser, we can see the following result.
As previously said, creating a Chrome extension is similar to creating any other web application. The main difference is that the Chrome extension necessitates the creation of a manifest.json file in which all of the configurations are stored.
The manifest.json file contains all of the data needed to create the Chrome extension. It is the first file that the extension examines, and it is from this single file that everything is loaded.
Now, in the root folder, create a manifest.json file and add the following code:
Name, version, description, manifest version (3 in this example, which is the most recent manifest version), author, and action columns are all included in our manifest.json file. The value for default popup is in the action field, and it contains the path to the HTML file, which in this case is index.html.
You can examine all the configurations of a manifest.json file here.
Now that we’ve included the manifest.json file, we’re ready to add this project to our Chrome browser as an extension.
To do so, go to Select More Tools, then Extensions from the browser menu, as shown in the screenshot below:
It takes you to Chrome’s extensions page after you select Extensions. Make sure the Developer mode is turned on.
After that, you must click the Load unpacked button to allow us to load our project into the Chrome extension store.
Our Chrome extension store now has the addon accessible.