Before you get started with this tutorial, I would like you to take a look to our final WittySparks Google Chrome Extension.

Liked it? and want to create one for your site? Then lets start creating the Google Chrome Extension to promote your own blog or site or portal or application etc.

Actually, I just came across some cool Chrome Extension of a popular news site where they feature their news items under various categories as tabs. I found it so cool that one can easily and quickly read top news under various categories without actually going to the website.

The next second I thought that, why not I create a Google Chrome Extension which shows our sites/blogs updates with just a single click? So just started exploring on how to create a chrome extension by using RSS Feeds.

Here I found a quick tutorial to get started with Google Chrome Extension, where I can easily build a widget kind of extension within no time.

First we have to create a page which you want to preview once your extension is clicked from Chrome Toolbar. So thought let me start with a simple page which has got an RSS Feeds displayed from our network of sites. Since I wanted to get started with a simple page, I built a tab based RSS Feed Reader by using Google AJAX Feed API.

Here is the final output of the page which I want to display when our Google Chrome Extension is clicked.

After downloading the code provided – don’t forget to have your own Google API Key in place.

Once you are done with changing the code as per your requirements, try to have your own look and feel which matches with your Blog or Web site color schemes, obviously with your own graphics, logo etc.

Here are the four files which Google Chrome Extension needs:

1. A manifest file
2. One or more HTML files
3. One or more JS files (Optional)
4. Any other files your extension needs like CSS, Image files etc.

Lets create the manifest file now: The manifest file called manifest.json, which is used to store the information about your extension.

This is the basic code in manifest file:

{
"name": "WittySparks",
"version": "1.1",
"description": "WittySparks - networked blog updates",
"icons": { "128": "ws_logo.gif" },
"browser_action": {
"default_title": "WittySparks",
"default_icon": "ws_favicon.gif",
"popup": "wittysparks.html"
},
"permissions": [
"tabs",
"http://www.wittysparks.com/*"
]
}


I am not going to get into the details of the above code as I said quickly create Google Chrome Extension for your blog, let me do it quickly. Go through this page for more information about manifest.

Observe the “popup” in the above code which says wittysparks.html which is the actual page which is displayed when your extension is clicked – so just place your html file name in that place – the HTML which you have prepared for preview once the extension is clicked.

So now make sure you have manifest.json – wittysparks.html – Image Files – CSS Files – JS Files etc. all in one main folder. Once you are ready with all the files – lets start packaging your extension.

Google chrome extensions are packaged as signed ZIP files with the file extension “crx” — for example, myextension.crx.

Lets start creating the package:

1. Go to the chrome Extensions management page by going to this URL in Google Chrome browser:    chrome://extensions
2. Right side you will find Developer Mode link – click that
3. Then click on Pack extension
4. Then choose your extension folder as Extension Root Directory

That’s it you are done – your extension and private key files will be created.

Once you are done with the above steps, just drag and drop that .crx file into your Google Chrome Browser or try installing your unpacked extension by clicking on “Load unpacked extension…..” button in developer mode section of Google Chrome Extensions page to preview your extension. Once you have successfully previewed your extension, just go to Google Chrome Extensions page and click on “Publish your extensions” link to upload your extension to the Google Chrome Extension Library.

Just follow their step by step process to submit your Google Chrome Extension to their repository. Then observe increase in traffic and monitor how many have installed your extension :)

I hope you liked this? Then why not try to create your own extension with this built-in code, you can download the full code here which was created by our team at WittySparks and enjoy tweaking it. And don’t forget to give us a credit if you have created an extension with our sample code provided, would love to check your extension.

Good Luck with your new Google Chrome Extension.

Further Reading...

DesignCap – Free Online Poster Design Tool

5 Tips and Tools to Keep Remote Teams on Track

7 Crucial Features and Facts about CMMS Software That Makes It or Breaks It