Google Chrome app and extension without coding

Posted On // Leave a Comment
I knew almost nothing about coding or making apps before I started, and still, yesterday i wrote a Google Chrome app and an extension for my website Awesci. Actually, I didn't code at all. All i did was a mere replacement of words in the code that was written by Amit Agarwal from Labnol. And as advertised, it took me just 5 minutes to get my app running on the Chrome store. If you are wondering how I did it, here is a detailed walk-through (with video).

Walk-through and downloadable kit on Labnol by Amit Agarwal.

App: Basically, like most of the other "apps" on Chrome, all the app does is make a nice looking shortcut in your new tab page that takes you to the website. But there are a kind of new apps Chrome has started that work offline from the desktop. They are really good. But that is for some other day.

Extension: On the other hand, the extension has a bit of functionality attached to it. Firstly, it displays a link of the latest posts from your blog. Besides that, it has a search function also.

What the tutorial misses

Although on his website, Digital Inspiration, Amit did mention everything you needed to do, there were some essential things about the extension, he missed. I myself had to figure these things out. And since he doesn't allow comments on his website, I felt a need to contribute through a blog post.

1. After getting everything done on the Chrome extension, I found that the icon wasn't displaying in the Chrome extension bar i.e. in the bar beside the address bar that lets you access extensions with a click. Instead of the icon there was a broken puzzle piece icon that was showing. Despite searching for it, I found almost nothing useful (different problems). In the end I struck gold. I found that the manifest.json code had to be tweaked a bit. The "browser action" argument had to be replaced with this. Rest every thing was kept intact.

"browser_action": {
"default_icon": "iconxs.png",
        "icons": {
                "128":"images/icon-128.png" },
        "default_title": "AweSci - Science Everyday",
        "default_popup": "awesci.html"

To support the code, I also had to add 3 new icons of 16x16, 48x48 and 128x128 sizes. And another icon for the extension bar iconxs.png - 128x128 size.

2. To change the number of posts to be displayed in the extension, there is a simple thing you can do. Go to the settings > Reading in your Wordpress admin panel and change "Syndication feeds show the most recent".


Post a Comment