DEV Community

loading...
Cover image for Create a simple Chrome Extension which shows quotes.

Create a simple Chrome Extension which shows quotes.

gautham495 profile image Gautham Vijayan Updated on ・3 min read

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
  }
Enter fullscreen mode Exit fullscreen mode

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" }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Now lets add some styles:

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

}

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

Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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:

Discussion (0)

pic
Editor guide