DEV Community

Cover image for Build your first chrome extension (Part 1)
djibril mugisho
djibril mugisho

Posted on

Build your first chrome extension (Part 1)

Welcome to this series of articles where you learn how to build Chrome extensions by building a website blocker, in this first episode we shall cover the basic concepts of Chrome web extension development and then move on with intermediate concepts like message passing and background script, if this is your first time building a chrome extension then don't mind about what I have just said. Everything will be explained in a future episode๐Ÿ˜….

What is a Chrome extension?

Before writing any line of code, let's define what is a Chrome extension. A Chrome extension is software built on web technologies such(as HTML, CSS, and Javascript) that enable users to customize the browsing experience, this can be achieved by providing external services or with existing Chrome's APIS.

Folder structure

chrome extensio

There are two files here that you should pay attention to, manifest.json and popup.html

manifest.json: This file is probably the most important in a Chrome extension project, this file contains configurations and information that Chrome uses to understand and manage extensions, this may include permissions or scripts that should be running in the background.

manifest.json



{
    "manifest_version": 3,
    "name": "simple blocker",
    "version": "1.0",
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "128": "images/blocker.png"
        }
    }
}


Enter fullscreen mode Exit fullscreen mode

popup.html: The popup.html is an HTML file that Chrome uses to create the UI that appears when users click on the extension icon, you can use your existing knowledge of Javascript and CSS, to make it beautiful and dynamic.

First code
let's start with the popup skeleton, styling will come after this

popup.html



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blocker</title>
    <link rel="stylesheet" type="text/css" href="styles/popup.css">
    <script src="./scripts/pop_up.js" defer></script>
</head>

<body>
    <ul class="blocked-sits">
        <li>
            <div class="title-container">
                <h2>facebook.com</h2>
            </div>

            <div class="trailing">
                <button>remove</button>
            </div>
        </li>
    </ul>
</body>

</html>


Enter fullscreen mode Exit fullscreen mode

Install Extension

Time to test our previous work, please follow the steps bellow

If you were able to install the extension, what you saw may have been the ugliest thing on the internet. Let's work on some styling.
quickly add a popup.css file in the styles folder, Don't forget to import it in your popup.html.

popup.css



@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:wght@100&display=swap');


* {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: 'Montserrat', sans-serif;
    width: 600px;
    height: 600px;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}


body::-webkit-scrollbar {
    background-color: white;
    appearance: none;
    margin-right: 3px;
    width: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(158, 158, 158, 0.529);
    appearance: none;
}

.blocked-sits li {
    border: 1px solid rgba(0, 0, 0, 0.062);
    display: flex;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px;
    gap: 10px;
    align-items: center;
}

.blocked-sits li .title-container {
    flex: 1;
}

.blocked-sits li .title-container h2 {
    color: #555;
    margin-bottom: 5px;
    width: 100%;
}

.blocked-sits li .trailing {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blocked-sits li .trailing button {
    padding: 10px 20px;
    background-color: #fa4343;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.blocked-sits li .trailing button:active {
    background-color: rgb(241, 109, 109);
}



Enter fullscreen mode Exit fullscreen mode

For now, everything is static it could be a good idea if that card were rendered dynamically with Javascript ๐Ÿค”, let do it.

Don't forget to import your Javascript file




const unlockWebsite = (host) => {
    const container = document.getElementById(host)
    container.remove();
}

const siteElement = (host) => {
    const element = document.createElement("li");
    element.id = host;
    element.innerHTML = `
    <div class="title-container">
        <h2>${host}</h2>
    </div>

    <div class="trailing">
      <button>remove</button>
    </div>
    `;

    element.querySelector("button").addEventListener("click", () => unlockWebsite(host))
    return element;
}

const printSiteElement = () => {
    const sites = ['facebook.com', 'instagram.com'];
    sites.forEach((site) => {
        document.querySelector(".blocked-sits").appendChild(siteElement(site));
    })
};

window.addEventListener('load', () => printSiteElement())


Enter fullscreen mode Exit fullscreen mode

Currently what we have just done does not have any impact and seems like a waste of time, please note that it will become important when we start adding more functionalities

Finally, the pop looks a bit nice and this is how you build chrome extensions popup, as I said at the beginning of this series we shall built a full and functional website blocker, and what we have right here is far from being something that can be added on a portfolio ๐Ÿ˜.

what's next

The next article introduces more advanced concepts like message passing, storage API, tab management, content scripts, and background scripts. if you enjoyed this first episode then the next one will be much more interesting, here is the link to the second episode, let's meet on the other side.

Top comments (2)

Collapse
 
karleb profile image
Karleb

This is a good tutorial

Collapse
 
djibrilm profile image
djibril mugisho

For more about this topic, you should consider having a look at the third part of this tutorial. Thanks for reading โค๏ธ