Build your first chrome extension (Part 1)

#chrome #javascript #extensions

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

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"
        }
    }
}

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>

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);
}

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())

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.