Building a Daily Motivational Quotes – Google Chrome & Microsoft Edge Extension

Last Updated : 04 Mar, 2024

We will learn how to build a daily motivational quote for Google Chrome & Microsoft Edge Extension. As developers, programmers, or coders, we get demotivated at times, With this guide, you’ll learn how to build your very own Daily Motivational Quote extension, empowering yourself and others with uplifting words of wisdom!

Packed with clear instructions, step-by-step screenshots, and helpful tips, this tutorial equips you with the knowledge to create a Chrome extension that delivers random, inspiring quotes every single day. Whether you’re a seasoned developer or a coding newbie, this guide makes the process accessible and fun.

Prerequisite: Before we start we need some basic things on our computer.

Download or update your Google Chrome & Microsoft Edge to the latest version.
Now we need an IDE where we can write our code, here I am using VS Code.

The process of building a Chrome Extension and a Microsoft Edge Extension is very similar.

Creating files for application:

Step 1: Create a folder on your local system called DailyQuotes. Then open the folder in the terminal and type the below commands one by one.

mkdir DailyQuotes
cd DailyQuotesCreate

Step 2: Create the files we need for our application to operate by clicking the Create file button in the left sidebar of Visual Studio Code. These files are essential:

popup.html
manifest.json
style.css
script.js

Or write this in the terminal:

touch popup.html
touch manifest.json
touch style.css
touch script.js

Optional files: logo.png or logo.jpg (Use 128×128), README.md (If you upload the code on GitHub then this will help you)

Project Structure:

File Structure

To better understand the files, let’s see a brief of each file

manifest.json: Without this file, we are unable to utilize the extension on our Chrome browser, which is the fundamental structure and foundation of the project.
popup.html: As we can see, this file is an HTML document in which we outline the project’s structure. This file aids in the Chrome extension’s pop-up functionality. Thus, they are the most crucial files.
script.js: This file serves as the extension’s brain, enabling API calls and all other functioning aspects of the Chrome extension.
style.css & logo.png: It is entirely up to you whether we include these files or just skip them. Nevertheless, we advise using a logo.png as clicking on it will launch the extension and give the page a more polished appearance.

Let’s now examine each code individually to build our app:

manifest.json: The icon option below the browser_action will display the icon and cause the HTML file to open. Additionally, we have to give the active tab permission in order for our Chrome extension to function. Otherwise, the browser will not consider this action and block the Chrome extension.

{
    "name": "Daily Quotes",
    "version": "1.0.1",
    "manifest_version" : 2,
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "logo.png"
    },
    "icons": {
        "128": "logo.png"
    },
    "permissions": ["activeTab"]
}

popup.html: Now with popup.html we can see the quotes that will appear randomly. In addition to the quotations, the author’s name will be displayed here, so for that we have added an additional space for it. In the default state, we will show the default values like in the “Quotes will appear here” & in the author’s section “Author”. So that after the data has been correctly fetched, we can display the results.

HTML

<!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>Daily Quotes</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="container">
        <h1><u> Daily Quotes </u></h1>
        <div class="quote-box">
            <p id="quote">
                "Quotes will appear here"
            </p>
            <small id="author">
                Author
            </small>
        </div>
    </div>
    <script src="script.js"></script>
</body>
 
</html>

style.css: For a better viewing experience we added some CSS to the quote and author’s section. So let us see the code for better understanding.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Cambria, Cochin, Georgia, Times, 
                 'Times New Roman', serif;
}
body {
    display: flex;
    /* background-color: aqua; */
    justify-content: center;
    align-items: center;
    border: 3px solid red;
    border-radius: 3px;
    min-height: 100vh;
}
 
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 50px;
    border-radius: 2px solid red;
}
#quote {
    margin: 10px 10px;
    width: 500px;
    color: blue;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
}
#author {
    font-size: 18px;
    padding-left: 300px;
    font-style: italic;
    font-weight: 900;
}

script .js: As the project’s brain, this file has to be handled with care. Any incorrect code has the potential to crash the entire application, rendering the results impossible to view. So let us see the code first and then we will understand it line by line.

Javascript

let quote = document.querySelector("#quote");
let author = document.querySelector("#author");
 
let api_url = "http://quotable.io/random";
 
fetch(api_url)
    .then(res => res.json())
    .then(data => {
        quote.innerHTML = '"' + data.content + '"';
        author.innerHTML = "-" + data.author;
    });

For this app, we used a random quote generator API. Here is the API’s link, you can click on it and you will see that it generates random quotes every time you clicked.

http://quotable.io/random

Consequently, the API fetched the data as we used the JavaScript’s fetch function for this scenario, so when we clicked the extension’s logo, it changed the innerHTML using JavaScript as we can see in the script.js code.

After all of this work, our extension is now prepared for usage in production. So let’s learn how to utilize it and add it to our browser.

Steps to load the extension and use it on the browser

Here we will see how to load the extension on the Microsoft Edge browser & loading it on the Google Chrome browser following the same steps.

Step 1: Open Microsoft Edge and choose the three dots next to the screen’s right side. You will now see a menu with several options, but you must select the extensions as indicated in the figure below

Extension Option

Step 2: Click on the extensions and you will see a “Manage Extensions” option will popup. Then click on it and a new extensions page will open.

Step 3: The developers’ option will be found on the left side of the extensions page. Enable the developers’ mode. Now click on “Load Unpack“. This will allow us to select our projects folder and upload it to the browser. Check the below image:

Manage Extension

Step 4: Select the DailyQuotes folder, where all our codes are written. Then it will upload to the browser.

Step 5: After successfully uploading the extension, click on the extension button of your browser and you will see the list of your installed extensions. You may now view how the app functions by clicking on the DailyQuotes extension logo. Here is a picture for you to review: