Building A Chrome Extension
Step By Step Guide With Prerequisites
In this article, we are going to look at How to Build a Google Chrome Extension. It is very simple to create one and the only prerequisites are that you need to know basic HTML, CSS, and JavaScript.
We are going to create a Social Profile Launcher Extension. With this, we can quickly launch our social profile links in just one click. First of all, Let’s create a new project folder and name it “social_profile_launcher”. So, the folder structure is as follows.
We have an images folder that contains an image in its original size. In the project’s root folder, we have the same images reduced to 128 x 128 pixels and 19 x 19 pixels. Next, we have a manifest.json file. Every extension has this JSON formatted manifest file that provides important information about the extension. And then, we have an HTML and JS file.
Now, let’s start with the manifest.json file. This is the JSON formatted file that’s going to contain all the necessary information regarding the extension.
The activeTab permission gives temporary access to the currently active tab when the user invokes the extension. Access to the tab lasts while the user is on that page, and is revoked when the user navigates away or closes the tab.
Now that we are done with the manifest.json file, let’s move on to popup.html file, which is going to be the landing page when the user clicks on the launcher icon.
As you can see above, we have the popup.js file here. We won’t be using it in our project, but if you were to add some functionality, you can very well do so.
Now, head over to “Manage Extensions”. Make sure “Developer Mode” is enabled. Then click on “Load Unpacked” on the top left and select the project folder. Now, the icon of our extension will be visible on the top right once you pin it. So, that’s it. We have created the chrome extension successfully.
We come to the end of this tutorial. Thanks for reading! Happy Coding!
If you have any queries please post in the comment section below. Connect with me on LinkedIn. Also, if you want to look at my amazing collection of apps developed, don’t forget to check Google Play Store.
Know more about me here.
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
