Build a Google Chrome extension: Tutorial for beginners with free code to download

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Chrome extensions are third party programs that are installed to Google Chrome browser to provide additional services. They are like add-ons of Mozilla Firefox, merely a change of name.

chrome extensions for google services

Some of the common Chrome extension are,

  1. Avast WebRep extension shows the reputation of websites.
  2. Alexa extension for Chrome provides the ranking of every website visited by a user.
  3. Google has extensions for most of its services like Maps, Gmail, Reader, News, AdSense and others. They help in directly accessing the service and receiving notifications of updates.

Build a Chrome Extension: The tutorial

In the tutorial, we’ll be building a Chrome extension that displays a simple message to users. Let’s start,

1. Make a folder called ‘CyberPassion’.

2. Create 4 files inside it: ‘manifest.json’, ‘favi.png’, ‘popup.html’ and ‘popup.js’ files.

2.1 Manifest.json is our configuration file wherein we put all meta information of the extension. Open the file in notepad and write the following code inside it,


{
 "name": "CyberPassion",
 "version": "1.0",
 "manifest_version": 2,
 "description": "A Demo Chrome Browser Extension.",
 "browser_action": {
 "default_icon": "favi.png",
 "default_popup": "popup.html"
 },
 "permissions": [
 "http://www.yourravi.com/"
 ]
 }

‘CyberPassion’ is the ‘name’ of extension while ‘description’ is concise information of it.

chrome extension manifest file created-1

after installation

‘Browser action’ includes the image of the extension and ‘popup.html’ page shows up when the extension is used.

simple google chrome extension for tutorial

‘Permissions’ includes the website from which data would be retrieved using Ajax calls. One thing to note here is that Chrome extensions can make cross-site ajax calls that we usually can’t make in a browser.

2.2 favi.png is the image the icon for the extension.

2.3 Popup.html is the file that shows up as popup when extension is used. This file is just like a normal HTML webpage. It displays data received from server after making Ajax call using ‘popup,js’ file.

Write the following code in the file,


<!doctype html>
<html>
 <head>
 <title>A Simple Extension for Google Chrome</title>

<style>
 body {
 font-family:Tahoma,Arial;
 min-width:450px;font-size:12px;
 overflow-x:hidden;
 }

</style>

<script src="popup.js"></script>
 </head>

<body>
 <div id='load'></div>
 </body>
</html>

Results are retrieved from ‘demo1.php’ file at server, and displayed inside ‘load’ div.

2.4 Popup.js is the file that does the entire job of data transfer. It makes connection to the ‘demo1.php’ file and exchanges data to-and-fro.

Here is the code of ‘popup.js’ file,


if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById('load').innerHTML=xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET","http://www.yourravi.com/design-dev-demo/google-chrome-extension/demo1.php",true);
 xmlhttp.send(null);

Here we make a simple Ajax GET request call to get results from ‘http://www.yourravi.com/design-dev-demo/google-chrome-extension/demo1.php’ page.

The results are displayed inside ‘load’ div of ‘popup.html’.

File at Server (demo1.php)

Ajax request made by the ‘popup.js’ file is quenched by ‘demo1.php’. The result is shown inside ‘load’ div of ‘popup.html’ file.

Here is what our ‘demo1.php’ file contains,


<?php
echo "This is a simple Google Chrome Extension";
?>

[Note: For the tutorial, ‘demo1.php’ is already placed at yourravi.com. You don’t need to create this file.]

Free Download code of Chrome extension

One you understand the coding of the discussed Google Chrome extension, download the tutorial and run on your browser. Go through the code multiple times to better understand it.

Install and run extension

Here are the steps to use the recently built Chrome extension in developer/debugging mode.

  1. Click wrench icon against adress bar in Chrome. Go to Tools>Extensions.
  2. Check ‘Developer Extension’ box at the top.
  3. Click ‘Load unpacked Extension’ tab and load the recently built Chrome extension.
  4. You should see the extension icon at the top. We’re now ready use the extension.
  5. Click the extension and see your extension in action.

If you want the extension to be available to the world, you can deploy it to Chrome store by paying 5$.

By now you must feel that writing a Chrome extension is an easy thing. In fact, it’s really easy if you have a basic understanding of Ajax and know how to communicate with server by making Ajax calls.

As this tutorial is for beginners, we have eliminated the confusing terms. Once you understand the tutorial, you can start making more complex Google Chrome extensions.

blog comments powered by Disqus