Create Your First Chrome Extension

Tuesday, March 3, 2015

Create Your First Chrome Extension

Creating Google Chrome would be hard right? Nope! Just a little knowledge in HTML and JavaScript will allow you to create a simple extension for Google Chrome. But you'll need some advanced knowledge to build the professional type of extensions.

This post will follow all the steps into building your first Chrome extension using pure HTML and JavaScript. This is just a demo extension and you can bend it in anyway you want to truly create your OWN extension!

What are We Going to Create?

In this tutorial we are going to create a simple extension for Google Chrome. When clicked the extension would display pop-up showing the current time & latest feeds from our Facebook Page. So lets get straight to it!

Creating the Extension

Step 1: Create a new folder and rename it Dhunkaraahaa Demo Extension.

Step 2: Open notepad and post the following code into it.

{
  "manifest_version": 2,

  "name": "Dhunkaraahaa Demo",
  "description": "Dhunkaraahaa Demo Chrome Extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Dhunkaraahaa Demo Extension"
  },

  "background": {
    "page": "popup.html"
  },

  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

You probably noticed two references in this code; icon.png & popup.html. We'll get to them in the next steps. You can change the extension name, description and several other attributes according to your needs.

Step 3: Download the sample icon.png or create your own PNG file icon which should be a 19px square image.

Step 4: Now we need to create the popup.html. The contents of this file will be displayed in a popup when the extension icon is clicked.

To do that, copy-paste the following code into notepad and save the code as popup.html into the folder we created in step 1.

<html>
  <head>
    
  </head>
  <body>
    <!-- START of The Time Display -->
    <div id="btn">
      <button id="btn" style="width:300;height:150;font-size:60pt;">START!</button>
    </div>
<!-- END of The Time Display -->
    <!-- START of The Facebook Like Box -->
    <div id="likebox">
    </div>
<!-- END of The Facebook Like Box -->
    <script src="script.js"></script>
  </body>
</html>

Please note that Google Chrome DOES NOT allow inline script in the html file. This means we will need to create a separate script file for any scripts to be used in the page. You'll see a reference to script.js which will be the script file we will use to display the current time.

Step 5: In this step we'll add JavaScript functionality. To do that, open notepad and paste the sample code given below into it and save as script.js into the folder we created earlier in step 1.

document.getElementById('btn').onclick = function loBehold() {
    document.getElementById('likebox').style.visibility = "show";
    document.getElementById('btn').remove();
    ifrm = document.createElement('IFRAME');
    ifrm.setAttribute('src', 'http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fnoorxbyte&width=300&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true&appId=423459024466133');
    ifrm.scrolling = 'no';
    ifrm.style.border = 'none';
    ifrm.style.overflow = 'hidden';
    ifrm.style.width = 300 +'px';
    ifrm.style.height = 590 +'px';
    ifrm.allowTransparency = 'true';
    document.getElementById('likebox').appendChild(ifrm);
}

Now our extension is complete! We just need to test it in Google Chrome and pack the extension into a .crx file. Read on to find out how to do it.

Testing the Extension

To test the extension, visit chrome://extensions in Chrome and enable the developer mode from the check box on the top to the right.

When the option is checked you should see three buttons appear out of thin air. Now click Load unpacked extension.. button.

Create Chrome Extension - Enable Developer Mode

Browse and select the folder we created in step 1 in the previous section.

Now you should see the new button for the extension in the toolbar.

Clicking the button will open a little popup showing a HUGE button saying START! So what are you waiting for? Click it!

When you click it the button should disappear and a new Facebook like box will appear. Please give us just 0.3 seconds of your time by clicking the like button as a thank you for this tutorial.

Packing the Extension

Now we need to pack the extension. Even this step is super easy. So let's get to it.

Again open chrome://extensions and click the Pack extension... right next to the Load unpacked extension... button we clicked moments ago.

Click the browse button and select the folder we created in step 1. Since we are creating a demo extension leave the second field (it automatically generates a key file anyway) and click Pack Extension.

Create Chrome Extension - Pack Extension

When you click the button, it will to it's magic and tell you where it placed the .crx file. You can give the file to your friends and family for them to use, if you created a useful one of course.

Create Chrome Extension - Pack Extension Output

Useful Links

Down below are some useful links which will aid you in creating your own chrome extensions.

Conclusion

So it's as easy as that to create a simple Google Chrome extension. That wasn't too difficult was it? Of course not! Just know that if there is any part of the tutorial that you didn't understand, leave it in the comments and I'll get back to you as soon as possible.

P.S. Remember to click the like button when testing the extension!