Subscribe via RSS Feed

Creating Google Chrome Extension to add a Custom RSS Feed Reader

June 16, 2013 1 Comment

In our previous post Creating RSS Feed Reader and Decorating with Bootstrap.js we had made a RSS Feed reader which is capable to read multiple RSS Feed in same page using a tab navigation. We had used Bootstrap.js and CSS to end the Application with a standard UI from developer perspective.

Next we have tried to make this RSS Feed Reader available as Google Chrome Extension. The idea behind this was – to make all current related news to us to be readily available when we connect internet and open the Google Chrome Browser and click on an icon. Below is a pictorial representation of the Feed Reader.

rssfeedreader

We have used some of the technologies and tricks to make this. Below is a listing -

1> We had made a custom RSS Feed Reader in PHP

2> We have integrated bootstrap.js and css to make a standard UI with Tab Navigation

3> We have made our reader Cross Domain Ajax Request enabled

4> We have made a Google Chrome Extension

4> We have used Google Font to decorate Content

5> We have given permission to the Google Chrome Extension to reed the feed from external url

  • A little decoration to UI – using the Google Font, we have used -
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
<style>
body {
.....

font-family: 'Josefin Slab', serif;
}
</style>
  • Another note to reader – after reading the Getting Started: Building a Chrome Extensionwe will know about the configuration file – manifest.jon. Now to make any external content from internet to be available in Chrome Extension, we have to give permission for this in manifest.json.
  • Here the permission code snippet is -
....
  "permissions": [
    "http://phloxblog.in/"
  ],
....

as we have got the external feed content via our hosted server.

Coding :

Php code for server-side can be downloaded here.

Also the complete code for Google Chrome Extension is available here.

We will make available the Chrome Extension in Chrome Web Store after adding some more Useful functionalities. So here we have made the extension available in unpacked version, with which the reader should experiment and make the extension more useful with his/her own thoughts.

For now, this is it. Wait for our next posts.

Enter your email address:

Delivered by FeedBurner