How to Make a Chrome Extension in 5 Minutes ? |Awesome New Tab Override

how to make a chrome extension

What is a Chrome Extension ?

Before making a Chrome Extension , we must have a basic idea what actually an extension is , it is nothing but plugin or add-on made to enhance the features of your browser .

In this post, we will make a chrome extension that will show awesome backgrounds every time you click new tab and will show the quote of the day . This extension will work in Google Chrome as well as all the other chromium based browsers.

Prerequisites :

You need to know the basics of the following –

  • HTML
  • CSS
  • JavaScript

If you are already familiar with the above technology then you would already know what the respective technologies. We will make a simple website with HTML , CSS and JavaScript and host it inside the Google Chrome . We can add our business logic with the help of JavaScript. To make a Chrome Extension , there are some best practices or format that we should follow .

How to make a Chrome Extension with JavaScript ( Step by Step guide ) ?

Let’s get started. Building an Extension is very  easy just follow the steps below .

Step 1 – Open your Google Chrome & go to chrome://extensions/ and enable developer mode.

How to make a chrome extension in javascript developer mode

Step 2 – Go to extensionizr.com and select  (Read more about what do these do by hovering over the ‘?’ at each option )

  • Hidden Extension
  • No Background
  • No fancy options
  • Override New Tab
  •  Add jQuery

How to make a chrome extension in javascript hidden extension

After you have done these things Download the zip file .

Step 3 – Once you extract the zip file , go to manifest.json file in the main folder and edit the manifest.json . Manifest.json contains all the metadata that your Chrome Extension will need , it is  the entry point of the extension. This is nothing but a JavaScript Object with the following properties like name, version, description etc. you may not have the permissions property simply copy paste from here it will need later.

Step 4 – Create a .css file and a .js file in CSS and js folders respectively.

Step 5 – Making the basic HTML document . Go to src/override/ you will find override.html file.

Add both .js and .css files in the override.html

 Step 6 – We are going to use two websites one of them will provide us with some awesome images and the second one will provide us with the daily quote.

To make a request to external links we have to add URL’s in permissions in manifest.json .

Add the following CSS in the custom.css (We have used PT serif Google font  )

Step 7 –  Getting quote from theysaidso API .

We have to request the to get the JSON data from API (http://quotes.rest/qod.json) and get the Quote from that we are doing this by using AJAX .

How to make a chrome extension in javascript use json data

Add the following code to the JavaScript  file you made

Step 8 –  Making the Chrome Extension (.crx) file . Load your folder to test first , and then go to pack extension that will make a .crx file that you can share with your friends , Simply drag and drop the .crx file on  chrome://extensions/ it will install the extension.

How to make a chrome extension in javascript make .crx file

How to make a chrome extension in javascript 5

Final Result – Every time you click new tab a new image with quote will show , you can use a single image per day by using the background property of JSON data from the API.

How to make a chrome extension in javascript new tab override

How to make a Chrome Extension with JavaScript step by step guide

2 Responses to “How to Make a Chrome Extension in 5 Minutes ? |Awesome New Tab Override

Leave a Reply

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