Building your own Google Chrome Extension

Probably you are reading this article on the Google Chrome browser. Right?
If yes, you would have used extensions on your browser to customize your experience.

Today I am here to describe how you can write and build your own extension for the Google Chrome browser.

Lets Start !!!!

If you feel lazy in reading articles, you should watch a video tutorial below

Let's start reading finally.

By this time you have got to know that we are going an extension for Google Chrome.
So the question comes what this extension will do for us?
The answer is We are will build an extension that will open a new tab on the browser with a predefined URL, in this example it is my .

What is the Google Chrome extension?

  • Chrome Extension helps to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes.
  • It is basically a webpage hosted within Chrome.
  • It can access some additional APIs.

Let's do some code now!

Setting up the project

Create a directory called ChromeExtension and Open this in your favorite code editor

Create the manifest

Extensions start with their .

Create a file called manifest.json and include the following code.

  • name is the name of the extension.
  • version is the current version of the extension.

Introduce a User Interface and Logo

Create a file called `test.html` and add the following code.

Add logo to project, I have added a file called `logo.png`.

These files need to be designated as a popup in the manifest under browser_action.

The updated manifest.json will look like this

Override Pages

As I mentioned above, we are building an extension that will open a new tab with a predefined URL. We have to add a page for it.
Create a file called `newtab.html` and add the following code to it.

These files need to be designated as a popup in the manifest under .

The updated manifest file shown is below

We are done with the coding part.

It was easy, wasn't it?

Adding an extension to Chrome

  1. Open the Extension Management page by navigating to chrome://extensions

or

  1. The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then select Extensions
  2. Enable Developer Mode by clicking the toggle switch next to Developer mode
  3. Click the LOAD UNPACKED button and select the extension directory.

And you will see your extension after installation

The extension has been successfully installed !!!

You should pin it to make visible on the extension bar of Google Chrome.

Testing extension

Originally posted on .

If you like this article, do give it a thumbs up, please don’t forget to click 👏👏👏 , comment on it, and share it with your friends.

I am regularly posting tech tutorials on , subscribe to my for the latest and interesting videos.

Also, to be notified about my new articles and stories, follow me on , , and . You can find me on as well. I am quite active on as well and write small topics over there.

Cheers!!!!

Polyglot Fullstack Developer