DEV Community

Cover image for Build Chrome Extension in 15 Minutes
Rohan Kiratsata
Rohan Kiratsata

Posted on

Build Chrome Extension in 15 Minutes

Hello developers! Today I'm gonna show you how you can build your own Basic Chrome Extension in just 15 minutes. Before you start you should have basic understanding of HTML, CSS and JavaScript.

What is chrome extension?

Google Chrome extensions are programs you can install in your Chrome browser to change its functionality. Chrome extension are build using HTML, CSS, and JavaScript. Every chrome extension have manifest.json file that contains everything it needs to know to properly load the extension in chrome.

What I'll be creating?

I will create a simple chrome extension that show motivational quote using API every time we click on extension icon. This simple Chrome extension gives you a basic idea of how to get started with the Chrome extension. You can also build complex chrome extension. Learn more here

Step 1: Create the project

The first thing we need to do is create a folder that will hold all of the extension files.
Files we will create through out the project:

  • manifest.json - This file holds the information about chrome extension.
  • popup.html - HTML file which will popup when clicked on icon.
  • style.css - for styling the popup.html file
  • main.js - this will generate random motivational quote using API

Step 2: Create the manifest.json file

Write the following code in the manifest.json file.

{
    "name": "Motivate Me",
    "description": "This extension will help you stay motivated while you work.",
    "version": "1.0.0",
    "manifest_version": 3,
    "action": {
        "default_popup": "popup.html"
    }
}
Enter fullscreen mode Exit fullscreen mode

The first four lines are self-explanatory. The only thing to notice is that version here is the version of the extension.
To open our html file we need to add action object to the manifest and set popup.html as the default_popup.

Step 3: Create the popup.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Motivate Me</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Motivate Me</h1>
        <div class="quoteDiv">
            <p class="quote" id="quote"></p>
            <p class="author" id="author"></p>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here I have created a class called quoteDiv which will contain randomly generated quote.
class quote will contain quote and class author will contain the name of the author.

Step 4: Styling the popup.html

Create a style.css and add the following css.

html{
    /* This height and width defines the height and width of the popup page.*/
    height:200px;
    width: 200px;
    text-align: center;
    background-color: rgb(189, 233, 253);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1{
    color: rgb(252, 86, 86);
    text-shadow: 1px 1px 1px #444;
}
p{
    font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Adding Functionality

Create a main.js which will be used to generate random quotes using API.
API I am using is here : https://type.fit/api/quotes

const text = document.getElementById('quote');
const author = document.getElementById('author');

async function getNewQuote(){

    var url = "https://type.fit/api/quotes";

    const response = await fetch(url);
    const allQuote = await response.json();

    const indx = Math.floor(Math.random() * allQuote.length);

    const quote = allQuote[indx].text;
    const auth = allQuote[indx].author;

    if (auth == null) {
        author = "Anonymous";
    }

    text.innerHTML = quote;
    author.innerHTML = "~ " + auth;
}

window.onload  = getNewQuote;
Enter fullscreen mode Exit fullscreen mode

Step 6: Loading extension in chrome

Go to extensions from chrome settings. Now enable developer mode located at the top right corner of the window.
Click on Load unpacked and select the folder where your project and you are good to go.

If you are reading till here and was building with me, congratulations on your very first chrome extension.

You can publish your extension in chrome web store. You just have pay 5$ signup fee. Learn more about it here

Final Image

Final Image

What next?

Now there so much you can do in chrome extension like adding your own icons, store or fetch data, modifying tabs, and many more. Explore and try to play around with it. Learn more about chrome extensions here.

Till then ... KEEP CODING... KEEP HUSTLING..

Discussion (0)