if I ask you one question, have you ever used Grammarly or an Ad Blocker while browsing Chrome or for instance any browser like Firefox or Edge? Your answer would be yes, And what are they? They are called Extensions. So in this blog, I will guide you on how to make your Chrome extension from scratch.
What is An Extension and why should we use them?
Before we start coding, let us understand what is an extension. It is a small program written in HTML, CSS and javascript and interacts with the browser through API(Application Programming Interface) provided by that browser to add certain functionality like Adblocker or Password Manager to enhance your browsing experience.
We can use them to customize or add functionalities that are not provided by the browsers. You Can find these extensions from the respective web stores of your browser for example Chrome web store for Chrome, Add-ons for Firefox.
You can choose an extension based on your specific needs like productivity, password manager, ad blocker, video speed controller and much more.
What are the things required to make an extension?
Well in order to make an extension you need three things, let's discuss what are those things in brief:
Idea: What is your extension going to do, what will be its core features and functionalities? In this case, we going to make an extension whose only job is to remove any element on a website when we click on it. Let's call it Section Eraser
Next, Set up a development folder: Create a dedicated folder on your computer to organize your extension's files. Name that folder as Section Eraser (you can give any name if you want, it is just that name defines what are we going to make)
Basics of Html, CSS and javascript as these are things we will use to code our Chrome extension.
Coding our extension
Open vs code and navigate to your section eraser folder. Then Create these files:
popup.html: This HTML file represents the user interface of your extension's popup window, which appears when users click on the extension's icon. This a very basic extension that has only one heading and a button, nothing fancy
Manifest .json file and why is so important while building your Chrome Extension?
Next, we need to create a manifest.json file. This file is a crucial component when creating a Chrome extension. It serves as a configuration file that provides essential information about your extension to the browser.
let's understand the core components of this file :
- manifest_version: Specifies the version of the manifest file format. Currently, the version is 3.
- name: The name of your extension.
- version: The version number of your extension.
- description: A brief description of what your extension does.
- icons: An object that defines the icons used for your extension in different sizes.
- permissions: An array that lists the permissions your extension requires, such as accessing tabs or specific websites. Specify the required permissions based on your extension's functionality.
- action: Specifies the behaviour of the extension's browser action (typically the icon displayed in the browser's toolbar).
- default_popup: The HTML file that serves as the popup window when the user clicks on the extension's icon.
- default_icon: An object that defines the default icon for your extension in different sizes
- scripts: An array of JavaScript files that make up the background script.
- background: Specifies the background script that runs in the background and handles
Next, we need to create three .js files popup.js content.js and background.js These are our main js files where we will write all our logic and API to perform the desired action.
let's start with a popup.js file this will be our main file
this code waits for the DOM to be fully loaded (DOMContentLoaded event) and then adds a click event listener to a button with the ID "select-button". When the button is clicked, it retrieves information about the active tab and sends a message to the content script in that tab, indicating that a section should be selected (the message payload { selectSection: true }). You can refer to the Chrome API developer section to know more.
next is content.js file Content scripts are JavaScript files that are injected into web pages by the browser when the extension is activated on specific web pages or matches certain URL patterns. In Our case, it is to detect a click event on a section of a website and then remove that section
Next is the background.js we have discussed this code so we are not going to discuss now
You can add some styling to your extension. it's up to you. After that add some icons for your extension which have specific sizes like 16*16,48*48,128*128 and make sure they are jpg or png
Now that we are done with the Coding part , let us check/test our extension but before moving forward let's have a look at our final folder structure
Testing our extension using the Chrome browser
- Open Chrome browser and type chrome://extensions/ in your URL section. it will open the Chrome Extension page.
Now Click on Developer Mode on the right side of the screen. it will give you three buttons as you can see in the above image
Now click on the Load unpacked button, It will open a popup screen asking you to upload your extensions folder containing all the files we have discussed. Upload them
After some time you will see your extension (see in the above image) on this page along with other extensions you have already installed.
To check, open any website, then click on your extension icon, it will then open your extension popup with a button, now click on that button, after that click on any section of that website and see the magic, it has removed that section
Note: you can use this code to make your extension.
Congratulations! You've successfully learned the step-by-step process of creating a Chrome extension. Now go ahead and make some cool extensions and share it with others
If you have made till here, Thank You for reading, Share and subscribe to get more content like this in future
Connect with me on socials :
Github
Top comments (0)