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 YouTube Channel URL.
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 manifest.
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 chrome_url_overrides.
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
- Open the Extension Management page by navigating to
chrome://extensions
or
- The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then select Extensions
- Enable Developer Mode by clicking the toggle switch next to Developer mode
- 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 ankitkumar.dev.
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 YouTube, subscribe to my channel for the latest and interesting videos.
Also, to be notified about my new articles and stories, follow me on Medium, Github, and Twitter. You can find me on LinkedIn as well. I am quite active on Dev Community as well and write small topics over there.
Cheers!!!!
