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.
Top comments (0)