How to Create a Chrome Extension

Spread the love

One of my most loved things about the Chrome web program is the way extensible it is. It appears as though there is a Chrome module for pretty much all that you would ever perhaps need.

Yet, have you ever needed to make your own Chrome extension? Have you ever thought about how troublesome the procedure would be or what it would involve? All things considered, it turns out it is super simple—most likely a great deal less demanding than you ever envisioned.

In this post I will demonstrate to you generally accepted methods to make an essential Chrome extension in around 5 minutes—no joke!

Step 1: Create the project

The primary thing we have to do is make the venture and every one of the records we requirement for our expansion. How about we begin by making another index that we’ll call “Growwebsite Extension.” We’ll put every one of the documents we requirement for our expansion in this new envelope. Chrome permits us to stack up a module by directing it at an organizer that contains the augmentation records.

All Chrome expansions require a manifest file. The Manifest document advises Chrome all that it has to know to legitimately stack up the augmentation in Chrome. So we’ll make a manifest.json file and place it into the organizer we made. You can leave the show document clear until further notice.

Next we’ll require a symbol for our expansion. This simply should be a 19x19px PNG file. You can get a sample icon from Google’s demo project that you can change.

Next we’ll require a HTML page to show when a client snaps our Browser Action, so we’ll make a popup.html file and a popup.js document in our “Growwebsite Extension” index.

Because of security requirements, we can’t put inline JavaScript into our HTML documents within our Chrome expansions, so we need to make a different file to hold any JavaScript code we need and we’ll reference it from the HTML document.

Step 2: Create the manifest file

Since we have our essential venture structure, we have to add the code to our show record to portray our module to Chrome.

Open up the manifest.json file and enter the following code:

Step 3: Create the UI

The next step is to create the user interface that our Browser Action will display when it is clicked.

Our user interface is going to be very simple and consist of some text that says “Growwebsite Extension,” followed by a button that a user can click to view homepage.

Open up the popup.html page and add the following:

You’ll notice in this HTML I’ve included the popup.js script. This is where we’ll put the logic for our extension that will execute when the button with the checkPage id is clicked.

Step 4: Implement the logic

The last thing we need to do to create the plugin is to implement the logic that should execute when a user clicks the “Check this page now!” button inside of a tab.

We’ll want to add an event listener to listen for the click event on the checkPage button. When it is clicked, we’ll need to create a new form to submit to Growwebsite that contains the URL of the current page, submits it, and then displays the result.

Open up the popup.js file and add the following code:

Testing it out

It’s really easy to test a new extension in Chrome. Type “chrome://extensions” in a tab to bring up the extensions page.


Once on this page, check “Developer mode” to enable loading unpacked extensions. This will allow you to load your extension from a folder. Finally, click “Load unpacked extension” or simply drag the “Growwebsite Extension” folder onto the page to load up the extension. You should immediately see the extension show up as a Browser Action with your icon in the toolbar window of the current tab.

And that’s it! If you have any problems or questions, feel free to add to the discussion below. I hope this introduction to creating Chrome extensions has been sufficient to get you started.

Download Extension

Hope it will Help You and please subscribe me and like my facebook page :

and make me proud.By the way if you face any problem then let me know in comment section below

Leave a Reply

Your email address will not be published. Required fields are marked *