LETS CREATE OUR FIRST CHROME EXTENSION

#webdev #programming #beginners #tutorial

Hello, everyone! Welcome back to my channel.

Today, we will learn how to create a simple Chrome extension from scratch.

The task is to create an extension that will display random quotes each time it's clicked.

Pre-requisites of building a Chrome extension

You only need basic knowledge of HTML, CSS and Javascript to start building your first Chrome extension.

The Manifest file

This file is a special file. It contains information about the Chrome extension. It is a .json-type file.

It must mandatorily contain the following:

The Manifest version
The name of the extension.
The version of the extension.

Let's get started!

Now that we understand the basics, let's start building the Chrome extension.

Create a new folder

Make a new folder and create a file named Manifest.json in it.
The following are the contents of the Manifest.json file. Put these contents in the file.

{
    "name":"quotes Of the day",
    "description":"Get a quote every day",
    "version":"1.0",
    "manifest_version":3,
    "action":{
"default_popup":"quotes.html",
"default_icon":"1.jpg"
    }
}

Write the HTML file

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

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

<body>
    <p>Get a quote every day to stay motivated </p>
    <p id="quote">My Quotes</p>
    <p>@ishratjahanpinky2023 </p>

    <script src="index.js"></script>
</body>

</html>

Add some styles in the CSS file; that's optional if you want to add.

Write the JavaScript file

We will be using quotable.io API to get the quotes randomly.

const getQuotes = async () => {
  try {
    const res = await fetch("http://api.quotable.io/random");
    const data = await res.json();
    const myQuotes = document.querySelector("#quote");
    myQuotes.innerHTML = data.content;
  } catch (error) {}
};

window.addEventListener("load", () => {
  getQuotes();
});