Create a simple Chrome Extension which shows quotes.

In this tutorial I will be showing you how to create a chrome extension which shows quotes

I would give the list of major steps before giving a detailed solution.

  1. First create a manifest.json.
  2. Next create html, css and javascript files.
  3. Code

So first part is about manifest.json.

The manifest.json confused me at start, but its actually same as package.json to a react app.

In package.json, at the start of the file we provide the name, description and the version of the react app.

Same as that, in manifest.json we provide those values.

 {
    "name": "Your extension's name",
    "version": "1.0",
    "description": "Your extension's description",
    "manifest_version": 2
  }

The above lines of code are mandatory for all extensions.

Now lets discuss one more property called “browser_action” which will enhance the usability of our extension.

When we click the extension image which is on the right side of the browser, we can create a popup with browser_action property.

The popup content can be rendered with a html file. The code follows,

"browser_action": { "default_popup": "index.html" }

In index.html we can specify the content we need to output.

Now lets provide the Html, CSS and Js code for our dollar to rupees converter.

index.html

<!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="index.css"></link>
    <title>Document</title>
</head>
<body>

   <div id="quote"></div>


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

</body>
</html>

Now lets add some styles:

*{
padding:0;
margin:0;
box-sizing: border-box;

}

div{
    padding:10px;
    font-size:30px;
    width:300px;
}

Now lets add the real Js logic. We get the quotes from an api from a website called quotes with fetch.

Then we input the quotes with innerHTML in Js.


var quote = document.getElementById('quote')

const res =  fetch("https://quotes.rest/qod?category=inspire").then(res=>res.json()).then(data =>quote.innerHTML=data.contents.quotes[0].quote );


You can check the website for more quotes and other useful API.

Now after doing all the above steps, go to

chrome://extensions by clicking the given link and turn on the developer mode.

Now load the folder where you have the manifest.json and other files.

Then Click the image and see the functionality being displayed on the screen.

Thats it you have created a very simple extension which shows quotes.

There are more stuff to extensions than discussed in this video like publishing to chrome store, adding more manifest.json properties for more complex tasks and a lot more.

The above example is more than enough for a beginner to know how to create a chrome extension.

Thank you for reading!

If you like this article, Unicorn this one! Heart/Like this one and save it for reading it later.

My Other Articles:

Create your Web Presence with Namecheap

Leave a Comment

Your email address will not be published. Required fields are marked *