DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How to Make a Chrome Extension in 5 Minutes

In this article, learn step-by-step how to make an awesome extension in Google's web browser, Chrome, using the three basic web dev language: HTML, CSS, and JavaScript.

Vivek Sharma user avatar by
Vivek Sharma
·
Feb. 28, 17 · Tutorial
Like (2)
Save
Tweet
Share
20.15K Views

Join the DZone community and get the full member experience.

Join For Free

What Is a Chrome Extension?

Before making a Chrome Extension, we must have a basic idea of what an extension actually is. It is a 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 and show the quote of the day every time you open a new tab. 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

We will make a simple website with HTML, CSS, and JavaScript and host it inside Google Chrome. We can add our business logic with the help of JavaScript. To make a Chrome Extension, there are some best practices or formats 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 and go to, chrome://extensions/. Then enable developer mode.

How to make a chrome extension in javascript developer mode

Step 2

Go to extensionizr.com and select one of the following options (you can read more about what to do with these 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 this, 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.

{
"name": "Beautiful New Tab",
"version": "0.0.1",
"manifest_version": 2,
"description": "Get beautiful images with quotes whenever you open a new tab.",
"homepage_url": "http://codesparta.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"chrome_url_overrides": {
"newtab": "src/override/override.html"
},
"permissions": [ "https://source.unsplash.com/","http://quotes.rest/"]
}

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

<!DOCTYPE html>
<html>
  <head>
<title>Make a Chrome Extension | Beautiful New Tab</title>
<link href="../../css/custom.css" rel="stylesheet" />
</head>
<body>
  <h1>Quote of the day</h1>
  <div class="quote">
     <h1 id="quoteblock"></h1>
     <h3 id="author"></h3>
  </div>
<script src="../../js/jquery/jquery-1.12.3.min.js"></script>
<script src="../../js/jquery/app.js"></script>
</body>
</html>

Step 6

We are going to use the following two websites. Unsplash will provide us with some awesome images, and the TheySaidSo will provide us with the daily quote.

  • https://source.unsplash.com
  • https://theysaidso.com/api/

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 )

@import url(https://fonts.googleapis.com/css?family=PT+Serif:400italic);
body {
background-image:url("https://source.unsplash.com/category/nature/1600x900");
background-repeat:no-repeat;
height:100%;
width:auto;
 
}
h1{
font-family: 'PT Serif', serif;
font-size:2.5em;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px rgba(150,150,150,0.75);
 
}
.quote{
color:#ffffff;
text-align:center;
vertical-align:middle;
padding:19% 15% 0 15%;
}
 
#quoteblock{
font-family: 'PT Serif', serif;
text-shadow:2px 2px 3px rgba(150,150,150,0.75);
font-size:2em;
}
 
#author{
font-family: 'PT Serif', serif;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px rgba(150,150,150,0.75);
}


Step 7 

Getting a 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:

$(function(){
var url = "http://quotes.rest/qod.json";
var quote = $("#quoteblock");// the id of the heading
$.get(url, function (data) {
var the_quote = data;
quote.text(the_quote.contents.quotes[0].quote);
var author = $("#author");// id of author
author.text(the_quote.contents.quotes[0].author);
});
});


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/, and 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 open a new tab, a new image with a quote will show up. 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

Published at DZone with permission of Vivek Sharma. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • The Importance of Delegation in Management Teams
  • ChatGPT — The Google Killer? The Job Taker? Or Just a Fancy Chatbot?
  • Java Development Trends 2023
  • 9 Ways You Can Improve Security Posture

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: