What are Chrome extensions?

Chrome extensions are software programs that can be installed into the Google Chrome web browser to enhance its functionality. Extensions offer the ability to interact with the browser, access web pages, modify content, handle events, and perform various tasks that enhance the browsing experience.

Chrome extensions are developed using web development technologies such as HTML, CSS, and Javascript.

Building a Chrome extension

Now, since we already know what Chrome extensions are, let us build a simple Chrome extension called QuoteX that makes an API call and displays random quotes with their authors, without having to go to another website. Our extension would generate a random quote each time we click on it.

So let's get started!

Creating a directory

We would start by creating a new directory to store the extension files. We only need four files to create our extension; an HTML file, a CSS file, a Javascript file and a Manifest.json file. The Manifest.json file is very important because it serves as the central configuration file for the extension.

Building the Manifest.json file

{
    "manifest_version": 3,
    "name": "QoteX",
    "version": "1.0",
    "description": "Get a daily dose of inspiration.",
    "host_permissions": [
        "https://zenquotes.io/"
    ],
    "action": {
        "default_popup": "popup.html",
        "default_icon": "quoteX_icon.png"
    }
}

The manifest.json file defines the extension's behavior, permissions, icons, and other vital details that Chrome needs to understand how the extension should work with the browser and web pages. The manifest.json file has to contain the manifest_version, a name, version, and description. We've also included the host_permissions to specify which external websites or domains our Chrome extension will have access to which in this case is zenquotes.io because we will be using their API. The action loads the popup.html as our popup when the extension is clicked and declares the image Chrome should use as the extension's action icon.

Loading our extension to Chrome

Next, let's load our extension to Chrome.

To load an Extension in Chrome, open chrome://extensions in a new tab. Enable developer mode and click the load unpacked button and select the extension directory to upload the extension.

Adding the html and CSS

Now that our extension has been uploaded, we can head to our popup.html and have a basic UI that looks like this

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daily Inspirational Quote</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>QuoteX</h1>
    <div>
        <h3 id="loading">Loading....</h3>
        <h2 id="quoteElement"></h2>
        <p id="authorElement"></p>
    </div>
    <script src="popup.js"></script>
</body>

</html>

We can then create a style.css file and add some CSS. Nothing special, as we're focusing on the functionality.

body{
    width: 300px;
    height: fit-content;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top:2px;
    padding-bottom:5px
}

#authorElement{
    text-align: right;
    font-size: 14px;
}

After adding the HTML and CSS, our UI should look like this.

Adding the Javascript

Once we've added our HTML and CSS, we can go ahead to create a popup.js file and add our Javascript code

const loading = document.getElementById('loading')
const quoteElement = document.getElementById('quoteElement')
const authorElement = document.getElementById('authorElement')

const getQuotes = async () => {
    loading.style.display = 'block'
    try {
        const res = await fetch('https://zenquotes.io/api/random')
        const data = await res.json()
        loading.style.display = 'none'
        quoteElement.innerHTML = `${data[0].q}`
        authorElement.innerHTML = `${data[0].a}`
    } catch (error) {
        quoteElement.innerHTML = `oops... no qotes to show`
    }

}

getQuotes()

Here, we defined an asynchronous function getQuotes() using the async keyword. This function is responsible for fetching the random quote from the API and updating the extension accordingly.

We use the fetch() function to make a GET request to the 'zenquotes.io/api/random' API and await the response. We then await for the response to be converted to JSON and then assign it to the data constant.

The quoteElement.innerHTML updates the content of the quoteElement with the first quote (q) received from the API.

The authorElement.innerHTML updates the content of the authorElement with the first author (a) received from the API.

If there's an error while fetching the quote (e.g., API call fails), the quoteElement displays the message "Oops... no quotes to show"

getQuotes() calls the getQuotes function, which initiates the process of fetching and displays the random quote in our extension.

Testing out our Extension

Now that we have written all our code and saved it, we can now head back to chrome://extensions and reload the extension we have uploaded.

Click on the extension and view amazing quotes!

And yeah, we got a Chrome extension!

Here's the link to my GitHub repo for the source code.

David's blog