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

Trying our extension

Go to your Chrome browser and type chrome://extensions
Turn the developer mode on by toggling the switch.
Click on the load unpacked button
Select the folder where you have made the extension.
That's it! Your extension should now be visible on the page.
If you click on the puzzle icon in the corner, our extension should be visible.

That's it.

We just created a basic Chrome extension! Congrats!

LETS CREATE OUR FIRST CHROME EXTENSION

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.