DEV Community

Cover image for Creating a simple Chrome extension
Paula Santamaría
Paula Santamaría

Posted on • Updated on

Creating a simple Chrome extension

Recently I decided to learn about chrome extensions and after reading the docs and building a few sample extensions I was surprised to see how fast can a very simple extension be built and how fun it is. I wish I had tried it sooner.

In this article I'll explain how to create a simple extension step by step.

About the extension

The extension we will be building in this article is just a simple example I came up with (inspired by my dog Acho 🐶). We will ask Acho "Where are we?" by clicking over the extension button on the browser toolbar and Acho will tell us the name of the page that is loaded in the current tab.

Here's a gif of the extension working:

A gif that demonstrates how the extension works. When you click on the icon a picture of a dog appears along with the title of the active tab

Let's get coding!

1. Create the Manifest

The manifest.json file is where we will describe our app: Its name, description, permissions, etc.

Our manifest will look like this (for now):



{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    "version": "0.1.0",
    "description": "Ask Acho where you are and he'll bark the page title at you."
}


Enter fullscreen mode Exit fullscreen mode

So what's all this? Let's see:

  • manifest_version(required): It's the manifest file format required by our extension. For chrome's latest versions we should use version 2, but keep in mind that Manifest v3 will be launching soon for Chrome 88. Version 1 is deprecated.
  • name (required): The name of our extension.
  • version (required):  A string representing the current version of our extension.
  • description (optional but recommended): A short description of our extension.

We will be updating our manifest later as our extension takes form.

2. Load the extension in Chrome

Now that we have a valid Manifest we can already load our extension in Chrome. To do that follow these steps:

  1. Open Chrome
  2. Navigate to chrome://extensions
  3. Turn on the "Developer Mode "switch (located on the upper right corner of the screen)
  4. Click over the "Load unpacked" button that appeared on the left
  5. Select our extension's folder

A gif representing the previously described steps

Now we can see our extension on the list, with the name and description we defined in the manifest. Of course, that's all we can do with our extension for now since we haven't added any logic yet, so let's keep going.

3. Create the popup

3.1 Update the manifest.json

First, we should update our manifest to include a reference to our popup. We'll have to add the browser_action and permissions , like so:



{
    "manifest_version": 2,
    ...

    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/icon16.png",
            "24": "images/icon24.png",
            "32": "images/icon32.png"
        },
    },
    "permissions": [
        "tabs"
    ]
}


Enter fullscreen mode Exit fullscreen mode
  • browser_action: Using a browser action will create a button for our extension on the browser's toolbar and will allow us to include an icon for the button and a popup that will appear when we click it.
    • default_popup: Here we will declare the filename for our popup.
    • default_icon (optional): A list of icons in different sizes (chrome will pick the one that better works for the user's device)
  • permissions: We need to declare the permissions we need to perform certain operations using the chrome API. In this case, we will declare the tabs permission since we will need to get the current tab Title.

3.2 Create the popup.html

Create a new file called popup.html where we will design the popup that will appear when the user clicks over our extension's button. It should look like this:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Acho, where are we?</title>
    <link href="popup.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p id="dialog-box"></p>
    <img id="acho" src="images/acho-bark.png" alt="Acho the pup">

    <script src='popup.js'></script>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

As you can see, our popup.html consist in the following main elements:

  • A paragraph <p id="dialog-box"> where we will write Acho's answer.
  • An image <img id="acho" ...> of Acho barking.
  • <link href="popup.css" ...> here we'll add some styles to our popup.
  • <script src='popup.js'> the logic of our extension will be here.

Now let's also add a bit of CSS in our popup.css. Create the file and add the following code:



#acho {
    display: block;
    margin: auto;
}

#dialog-box {
    text-align: center;
    font-size: medium;
}


Enter fullscreen mode Exit fullscreen mode

We haven't added any logic to it yet, so Acho is unable to tell us where we are. Let's fix that!

4. Add logic to the popup

To add the logic to our popup create the popup.js file and add the following code:



document.addEventListener('DOMContentLoaded', () => {
    const dialogBox = document.getElementById('dialog-box');
    const query = { active: true, currentWindow: true };

    chrome.tabs.query(query, (tabs) => {
        dialogBox.innerHTML = getBarkedTitle(tabs[0].title);
    });
});

const getBarkedTitle = (tabTitle) => {
    const barkTitle = `${getRandomBark()} Ahem.. I mean, we are at: ${tabTitle}`
    return barkTitle;
}

const barks = [
    'Barf barf!',
    'Birf birf!',
    'Woof woof!',
    'Arf arf!',
    'Yip yip!',
    'Biiiirf!'
]

const getRandomBark = () => {
    const bark = barks[Math.floor(Math.random() * barks.length)];
    return bark;
}


Enter fullscreen mode Exit fullscreen mode

The previous code will wait for the content to be loaded and use the  chrome.tabs.query method to get the currently active tab. We then extract the Title of the tab and, just for fun, concatenate it to a randomly selected bark sound. Finally, the complete string is added to our popup paragraph #dialog-box.

That's it! Our extension is now complete 🙌

Conclusion

In this article, we've learned the basics of Chrome extensions by creating a very simple extension using only HTML, CSS and JavaScript. I hope you found it useful!

Check the repo for this project:

GitHub logo pawap90 / acho-where-are-we

Acho (a cute pup) tells you the title of the current page on your browser. A sample chrome extension.

Let me know what you think in the comments!


Here's a photo of my muse for this extension, Acho:

A pic of my dog Acho


If anyone's interested in building their extension using Svelte, here's a great guide with a boilerplate:

Top comments (18)

Collapse
 
atndesign profile image
Moulun Kevin

Really helpful article, with that I had the possibility to open a note taking web page anytime I open a new tab, thank you! 🙏

Collapse
 
paulasantamaria profile image
Paula Santamaría

Glad I could help! I'm working on a new post, that I will be publishing on friday, about adding keyboard shortcuts to a chrome extension :)

Collapse
 
atndesign profile image
Moulun Kevin

Oh I'll make sure to follow you then!

Thread Thread
 
paulasantamaria profile image
Paula Santamaría

Thank you! 🙏

Collapse
 
vaneeswaran profile image
Vaneeswaran

Honestly , I tried to start my hello-world of chrome extension couple of times back but didn't finish it bcoz none of the articles worked, and I found this post have to say this one is really helpful article :) Its soo exciting to see when the code worked :) Acho looks cute in the popup too :)

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thank you! I'm so glad my article was helpful :)

Collapse
 
tomassirio profile image
Tomas Sirio

Loved the post. I adapted it to show my cat Benito :D Hope you don't mind

dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
paulasantamaria profile image
Paula Santamaría

That's awesome and Benito is so cute! Give him a hug for me ♥️

Collapse
 
mihirpa98294668 profile image
mihir patel

Very good web page, thank oneself for the exciting material for guaranteed I am going to be back. I would recommend kodlogs.net/562/how-to-get-quality... It's awesome, I like it a lot.

Collapse
 
raagpc profile image
raag pc

Great post, thank you

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks for reading!

Collapse
 
nicolasguzca profile image
Nick

Awesome post! Thank you for sharing

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks! Glad you like it :)

Collapse
 
jatniel profile image
Jatniel Guzmán Gámez

Thanks !

Collapse
 
paulasantamaria profile image
Paula Santamaría

Happy to help :)

Collapse
 
dontfixyourpc profile image
Richard Rhein

Hello, it is an interesting post. I´ve tested it and I´ve got an 'undefined' in the section of, where the name of the website should be there and idk why.

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks! Could you show me the contents of your "manifest.json" file? I believe you may be missing the permissions for "tabs".

Collapse
 
jbau93 profile image
Mr J • Edited

You are fantastic