Wednesday 13 July 2011

Creating a chrome extension for showing up your feed.

Creating a feed is really a very important part of blogging so that your readers could subscribe to your feeds and they can easily get it right into their inbox. So almost each and every blogger would have his or her own feed. Everyone is familiar with google chrome which is a browser by google and it is the fastest browser when compared to other browsers like safari and firefox. Many people in this world use chrome as their default browser. So here is a way using which you can create a chrome extension by which your readers can easily see the latest topic of your blog right from their browser.

1. First of all you must have a fully working feed (Must be created using feedburner).

2. After you have setup your feed navigate to Publicize > BuzzBoost.

3. In the upcoming page choose all  your preferences and click on the save button.

4. Now you will get a javascript code which you are going to use in creating the extension. Copy that code to your notepad.

5. Open up your favorite text editor and paste the following codes in it :
{
"name": "Cyber Freaks",
"version": "1.0",
"description": "Latest blog post feeds of Cyber Freaks",
"browser_action": {
"default_icon": "favicon.jpg",
"popup": "popup.html"
}

}

Modify the name and the description to your own name and description. (Most recommended to use your blogs name as you are gonna create a extension for your blogs feed.)

Save the file with the name manifest.json

6. Now open up another notepad file and dump the following code into it :
<div id="my-blog">BUZZ BOOST SCRIPT</div>


Replace BUZZ BOOST SCRIPT with the code snippet that you got in that buzz boost page of feedburner.

Save this file as popup.html.

7. Now put the above two files in a new folder with the name of your extension.

Now you have to integrate it. For that :

1. Open up your browser (only chrome). Click on the wrench icon and navigate to Tools > Extensions.

2. There you will a + icon in the top right near developers mode. Click on it.

3.  Click on "Load Unpacked extension".

4. Now browse for your folder from your hard-drive. (Note : Place a a image file that you wish to make it appear as favicon.jpg within the folder)

5. And thats it now you can see a preview of your extension in your own browser.

Now just open up chrome web store and upload your extension there and publicize your extension.

Hope this was a helpful tutorial. Happy blogging day.