Build Your First Chrome Extension
I hope all of you are doing well.
If you are interested in knowing how browser extensions work and how to build your very first chrome extension, then YES you are at the right place.😎
In this article, let’s stick together to build your own brand new chrome extension.
Before we start, let’s look into some important terminologies.
What is an extension? 🧐
“Extension” The name itself explains a lot, It is something¹ that enhances or “extends” the capabilities of something². In our case, the first something is a package consisting of a set of different files that are bundled together to make it a single entity called browser extension. And second, something is of which we want to enhance the functionality or say capability of web browsers.
So let’s see,
What is Web Browsers?
A web browser is the most important part of everyone’s life nowadays. I can’t even imagine my life without a web browser being a software developer 👨🏻💻 (We use it a lot). According to Wikipedia, a web browser (commonly referred to as a browser) is a software application for accessing the information on the World Wide Web. When a user requests a web page from a particular website, the web browser retrieves the necessary content from a web server and then displays the page on the screen.
How extension helps web browsers(Focusing on Google Chrome)?🤔
I think extensions are a very important part of browsers.
In my opinion, I love to use extensions that make my life easier and productive.
The extension that I use a lot is
LastPass. This extension remembers credentials on my behalf and lets my brain focus on more important stuff rather than remembering complex passwords 😉
I have to save the credentials only for the first time I log in.
Consider one case study in which you want to get all products and its price listing in a short time. If you are using a plain web browser, then you need to do that manually. Sounds like a lot to work right? But what if you create one extension once and install it into the browser. You just need to click once and all listings will be done by the extension for you in a well-formatted way.
Well, for that you must know how to build browser extensions, let’s check it out then.
Basic building blocks of chrome extensions.
Overview of the extension of basic building blocks
Before starting to build chrome extensions let’s know more about its basics.
The attached image shows all the important parts of the extension.
There are some important parts of an extension without which you can’t build one. So, let’s check them out first.
Manifest File This is the most important and necessary file while creating browser extensions. The manifest file is the JSON object of extension metadata which holds all the basic information for the extensions. Check out the sample of the Manifest file.
Example of extension popup
You can configure manifest file using options like:
run_at used to decide when to inject and execute the script.
matches responsible for deciding where to inject script on the basis of URL pattern matching.
js An array of JS file paths to be injected.
css An array of style sheet file paths to be injected.
Check the image below which shows that div is injected by the content script on the top of the page.
Content script added div on the page.
Options Page Allow users to customize the behavior of an extension by providing an options page. A user can view the extension’s options by right-clicking the extension icon in the toolbar and then selecting options. Another way to navigate to the extension management page at chrome://extensions and then selecting Details on the desired extension. In the details page select the options link. Check the options page code here.
Keep it all together to create your very first chrome extension.
Great! We are done with creating our first chrome extension, now it’s time to test our extension in developer mode.🥳
Load extension to chrome browser by visiting chrome://extensions.
- Visit Chrome://extensions
- Enable Developer mode toggle switch (placed at the top right corner) to see developer options on the same page.
Enable developer option
- Click on the load unpacked button (placed in the top left corner).
Load unpacked extension
- Select your extension folder to load extension to the browser. (Make sure manifest.json is at the root level).
Bingo! 🤩 You just created and ran your very first chrome extension.
Get code for the extension we just created from here.
In the upcoming article, I’ll explain how to upload your own extension to the chrome web store using two different approaches, manual and script-based. Stay connected!
Hope you liked it.
Thanks for your time.
Hope you like it, if yes **like & share.**