DEV Community

Cover image for Browser extensions - our first extension
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Browser extensions - our first extension

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.

Chrome extension active

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
Enter fullscreen mode Exit fullscreen mode

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"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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 the pinkify.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');
Enter fullscreen mode Exit fullscreen mode

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.

Chrome extension overview

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.

Chrome load unpacked extension

Once loaded, you should see something like this:

Pinkify extension loaded

Now navigate to google.com or any webpage, and you should be able to see the pinkish background activated.

Chrome extension active

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)

Collapse
 
supportic profile image
Supportic • Edited

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. :)

Collapse
 
dailydevtips1 profile image
Chris Bongers

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)

Collapse
 
shahednasser profile image
Shahed Nasser

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers

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 😒

Collapse
 
shahednasser profile image
Shahed Nasser

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 πŸ˜…

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

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.

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Nice article on how to create a simple extension. Very beginner friendly!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Glad you enjoyed it Julia.
Got a whole beginner series coming up πŸ’–

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Nice! Canβ€˜t wait to read them 😎

Collapse
 
bellatrix profile image
Sakshi

Nice tutorial

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks a lot Sakshi πŸ™

Collapse
 
shshank profile image
Shshank

Nice and beginner friendly artic. Thanks for sharing.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Glad you enjoyed it πŸ’–

Collapse
 
devgancode profile image
Ganesh Patil

Well explained!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thank you Ganesh πŸ™

Collapse
 
alidarrudi profile image
ali

The article was interesting, don't be bored

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks, glad you enjoyed it ✨

Collapse
 
dailydevtips1 profile image
Chris Bongers

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.