Build a simple Google Chrome Extension in few minutes

What is a Chrome Extension?

It’s probably a good idea to have a basic understanding of what a Chrome extension is and how Chrome extensions work.

A Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs

What can extensions do?

Chrome Extensions can do quite a lot. They use either page actions or browser actions. They can’t use both.

Page action : is a chrome extension that is specific to certain pages. You will usually see a UI added in the google chrome’s address bar .

Browser action : is not specific to a page and is relevant no matter where you are in the browser. You will usually see a UI added to the right of the google chrome’s address bar .

For this tutorial we are going to keep things simple.

But , if you are interested in learning more about Google Chrome extensions , check out Chrome’s extensions documentation.

What we are going to do ..

For this tutorial we will build a basic Chrome extension that displays a simple popup message when clicked. We’ll need a couple of important files: an icon (“icon.png”), an HTML file (“popup.html”) and the all-important manifest (“manifest.json”). All these files will live inside of a directory with the name of your extension.

A Chrome extension is defined by its manifest. This snippet of JSON shows Chrome how to interpret the extension, what files to load, and how to interact with the user.

The manifest file for our basic extension looks like this:

This manifest file will put an icon in the user’s toolbar that, when clicked, loads the contents of the file named “popup.html.”

Most of the fields in this JSON file are self-explanatory, so I won’t waste your time explaining everything, but take note of some of it .

• manifest_version tells Chrome what version of the manifest markup you’re working with. For modern extensions, you’ll need to set this to 2.
• browser action loads the icon into the toolbar. It also allows the extension to respond to user input by displaying a tooltip, popup or badge. Check out a full list of everything “browser_action” can do.
• permissions limits the extension’s functional region. activeTab is the most common, allowing the extension to access the front-most tab. Google provides a list of all the permissions an extension can request.

If you want a deep dive into everything that a Chrome extension’s manifest can declare, check out Google’s docs on extension manifests.

Writing a Very Basic Chrome Extension: Popups

Now that we’ve written our manifest, we can figure out what our extension will display. That’s up to our “popup.html” file, which will display when the extension loads. Here’s what we’ll be using for this project:

Connect To Chrome :

Now we need to ..load our extension!

1. Go to chrome://extensions in your browser
2. Ensure that the Developer mode checkbox in the top right-hand corner is checked, like this:

3. Click Load unpacked to pop up a file-selection dialog & select your directory.

4. If the extension is valid, it’ll be loaded up and active right away! If it’s invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

5. Ensure that your chrome extension is enabled so you can see it in action.

6. Click on the extension to see its (very simple) effect.

Implement Some logic :

Open “popup.html” file and do those changes .

The last thing we need to do to create the plugin is to implement the logic that should execute when a user clicks the “Click” button .

We’ll want to add an event listener to listen for the click event on the clickbutton.

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

Testing it out :

• IMPORTANT: Make sure to click reload after every change you make so you can see it in action .

And Yay..! , It Works .

Conclusion: Expanding Your Chrome Extension

Once you’re finished with your extension and are ready to publish, you’ll need to create a Chrome developer account. That’s not an exactly straightforward process, but Google provides complete instructions for publishing your Chrome extension here.

There is obviously so much more you can do with your Chrome extension, but that’s somewhat beyond the scope of this post. If you want to learn more about everything Chrome extensions can do, check out Google’s Chrome Developer Extension Guide.

Check the below GitHub repo ,

https://github.com/EmadElmogy/simpleChromeExtension

Also , you can download & create application over the top of it .