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.
1. manifest.json Contains all properties of your extension. Extension name, version, which icons to use, etc. Google Developer article.
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.
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.
I’m a Java developer, that’s why I created my project slightly leant the MVC-pattern.
As I wrote, we have to create a configuration file in json-format and name it manifest.json.
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.
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‘.
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.
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.
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
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.