A feed-parsing Chrome Extension in under five minutes

I’m not a huge fan of extensions, plugins, add-ons or all other stuff which makes my system, or in this case, my browser non-vanilla. Nevertheless, for a quick and (a little bit) dirty weekend project, Chrome Extensions are a good choice to work with.

This blog entry will show, how you can create your own Google Chrome Extensions in under five minutes.

The file structure

You need at least three files to create your own Google Chrome Extension.

Basic version

1. manifest.json Contains all properties of your extension. Extension name, version, which icons to use, etc. Google Developer article.

2. popup.html This is our view. It’s basically a simple html page which could contains javascript and stylesheets.

3. icon.png A rectangular icon which will be displayed in many locations. Like the Chrome Store, or as the icon of the running extension.

Advanced version

In our case, we will also add the files popup.js, popup.css, jquery.js and dimension-dependent icon files to the file structure.

1. popup.js This contains our controller of the popup.html view. It will be also our data provider for parsing the feed.

2. popup.css As the name says. This is the stylesheet file for our view.

3. jquery.js To simplify our manifest.json, we include a minified version of jQuery to our project structure. I recommend the use of jQuery to reduce the amount of code to handle *.json or to access the html-dom.

The code

I’m a Java developer, that’s why I created my project slightly leant the MVC-pattern.

Configuration

As I wrote, we have to create a configuration file in json-format and name it manifest.json.

View

The popup.html file contains a standard html page. It includes all scripts and stylesheets and provides a dom-element to display our parsing result.

Controller

To be comfort, we use the Google Feed Service as a helper in our parsing function. The rest of the code is just ’nice to have‘.

Model

In our simple project, we don’t need no model. In further versions, I will use a model to persist and specify the blog entries as objects.

Installation

Due to the fact that this is not a Chrome App Store Extensions, you have to install it manually by hand. Open Chrome, go to chrome://extensions/ and enable the Developer mode. Afterwards, click on Load unpacked extension. Choose the cloned folder and import it. Done.

Chrome Extension Install

Result

As a result, we have our own tiny feed-reading Chrome Extensions which displays the latest five entries of the given feed url. In this case: mobilegeeks.de

Google Chrome Extension Result

Fork me

If you want to help me, blame me or just have fun – fork this project at Github. The master branch contains ‚ready to ship‘ versions. the develop branch is a bleeding version of the extension.

I have no idea if I continue this project or not. It’s just a tiny fun projects for cold weekend.

Happy coding!

  • Tobias

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s