Building Chrome Extensions is as easy as building a simple website. When hearing the word “Browser Extension” a layman would think what really is a Browser Extension? To answer this, I would say it’s a small software created to improve your browser experience.
Some developers are hesitant of taking initiative to create a browser extension as they might think it’s some kind of Science whereas, it’s a very easy process. Any developer can create any browser extension of his choice.
I am going to share with you the basics of Chrome Extensions so you can get a good understanding of how it works. I have made the following points which I will be discussing in this article:
- Architecture of a Chrome Extension
- Types of Extension
- Building a “Hello World” Extension
Let’s get rolling!
Architecture of a Chrome Extension
As each program consists of a basic structure so does Google Chrome Extension. It consists of three core parts:
- The background page
It is the heart of the extension and it should be used to contain the core functionality of your extension.
- The UI pages
If you would like to create a nice user interface for your extension then you require
- The ContentScript
Types of Extension
There are two basic types of Chrome extensions
- Browser Action Extensions
- Page Action Extensions
Browser Action extensions are those which are loaded throughout the session of your browser. Once you start your browser, a small extension icon is appeared on top right corner of your page.
Page Action extensions are related to the currently loaded page of the website. Let’s say, you want your extension to only appear when someone opens Google.com. Then you should create Page Action extensions for that.
Building a “Hello World” Extension
Let’s get going with the basic development of extension.
Open up your browser and type chrome://extensions and press enter.
You will see all your installed extensions on this page. You need to enable Developer Mode to load your first extension.
After enabling Developer Mode, you will see a few more buttons underneath. Click Load Unpacked Extension button and create a new folder at your desired location, select it and press OK. Your extension folder will be selected but you will see an error that your extension could not be loaded. Don’t worry about it. We will sort that out in a bit.
Navigate to your newly created folder in your PC. In our example, we have created hello_world. Now create a new file in it with name “manifest.json”.
Manifest.json is the heart of the chrome extension. All the core configurations are written in this file in json format. The browser reads these instructions and loads the extension accordingly.
For our example, we will write a browser action extension. Write this code in your manifest.json file:
"name": "My First Extension",
"description": "This is my first extension.",
In above file, you should always keep manifest_version as 2 because it loads the Chrome API 2 for the extension. Version 1 is deprecated now. In browser_action property, we have to give icon path and an HTML page path to load when the browser action button is clicked. we should mention Rest properties are pretty explanatory.
Now create a file popup.html in your extension directory and simply write text Hello World in it.
<div style="width: 200px; height: 100px">
Copy icon.png to your extension root directory.
Now simply press Retry button on your extensions page and your first extension will be loaded on the top right side of the browser.
Click on the browser action icon of your extension and you will see your message Hello World.
That’s all the hype!!
In this article, I have covered the very basics of Chrome Extension development. If you have any suggestions for the improvement of this article, please do share them in the comments section below.