Now that we learned the different types of extensions, let's see how we can create our first browser extension.
In this article, we'll create an extension that changes the body color on each page to pink.
Because pink is a great color.
The browser extension wireframe
Browser extensions function through something called a manifest.
This is a JSON file that contains all specific data about the extension.
It states the extension's metadata and the actual content it should run.
Let's create a new folder and navigate to it.
mkdir pinkify-extension && cd pinkify-extension
The next step is to create a manifest.json
file which will become the brain of this operation.
Inside, place the following information.
{
"manifest_version": 2,
"name": "Pinkify",
"version": "1.0",
"description": "Convert any page to a pinkish page π",
"icons": {
"48": "icons/pinkify-48.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["pinkify.js"]
}
]
}
As you can see, it contains quite a lot of data about the application.
-
manifest_version
: Which type of manifest to use? Three is recommended but not supported in Firefox yet, so I use two. -
name
: The name of your extension -
version
: The version of this extension -
description
: A small description of what it does -
icons
: You can add multiple icon files for your extension -
content_scripts
: This is the actual function that will be injected. We say on all URLs, add thepinkify.js
script.
We'll dive into more details on the content_scripts later.
You can place a sample 48x48 pixels icon in the root directory.
Then you can add the script file, called pinkify.js
, and put the following line of code in it.
document.body.style.setProperty('background', '#FDF2F7');
This will set the body background color to light pink.
Note: I didn't add any overwrites, so if a page already sets the body color, it won't be activated.
Testing your extension
We don't want to publish to the stores without testing our extension, so let's see what it takes to try it locally.
I prefer to use Chrome as it has a quicker interface for it.
In Chrome, click the plugins button and open up that page.
Next, toggle the developer mode on. You'll get another menu where you get the option to load unpacked extensions.
Click the load unpacked and navigate to the pinkify-extension
folder.
Once loaded, you should see something like this:
Now navigate to google.com or any webpage, and you should be able to see the pinkish background activated.
Amazing you made your first ever browser extension. As you can see, it's not as hard as one would think.
In the following articles, we'll create some more advanced extensions as well.
You can find today's code in the following GitHub repo.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (18)
Creating an extension with manifest v2 at this point will be pretty much outdated, when 2023 hits.
developer.chrome.com/docs/extensio...
developer.chrome.com/docs/extensio...
v3 allows you to build an extension for firefox and chrome at once. :)
Ah yes, aware of that, the new articles are on v3.
I kind of default to v2 for some support we are missing in our own ones π (habit)
Thanks for writing a nice and simple introduction into how to create extensions! I think a lot of people are not aware of how easy it is to create an extension, so this does a good job of showing the basics of it!
Since youβre creating a series around this topic, I would recommend you mention the importance of supporting v3 moving forward. I know that firefox currently does not support v3, but when you develop more and more extensions youβll realize anyway that you canβt really write the same code or tutorial for both browsers. Also, moving from v2 to v3 can be difficult as there are many changes between the two versions.
Yeah I think the new ones I use v3 all over.
I default to v2 as we need to support firefox, would really wish they hurry up and make it accept v3 π’
According to this seems like Firefox will be supporting v3 by the end of this year. However, theyβre looking into different ways for adapting it. So, again, one codebase for an extension wouldnβt be enough, you would need to write 2 to support chrominum browsers and firefox.
Honestly, after publishing two extensions, I found managing that a hassle and fully dropped support for firefox. Not sure how other devs feel about this too π
We still run mv2 for daily .dev and so far it's been good with one build.
However we're lucky to be a "older" extension so not forced to migrate to 3 for Chrome standards.
Nice article on how to create a simple extension. Very beginner friendly!
Glad you enjoyed it Julia.
Got a whole beginner series coming up π
Nice! Canβt wait to read them π
Nice tutorial
Thanks a lot Sakshi π
Nice and beginner friendly artic. Thanks for sharing.
Glad you enjoyed it π
Well explained!
Thank you Ganesh π
The article was interesting, don't be bored
Thanks, glad you enjoyed it β¨
Hi Khanh, I have not explicitly tested it in Firefox, they might use a slightly different way of defining the title bar.
I'll look into that.