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?

It’s a simple program that lets you customize your Chrome browser’s experience or add new features. They’re made with HTML, CSS, JavaScript, and other web technologies.
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

To begin, we must establish an empty folder in which to place our HTML, CSS, and JavaScript files.

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.

tas

Manifest.json File

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.

Conclusion

You can simply create Chrome extensions if you are familiar with HTML, CSS, and JavaScript. I hope you would design some cool extensions after reading this blog post.