Write your own Google web app in under five minutes

by Mark on 0 comments

The most lay description I can give to a Google Chrome web app is that of a pinned tab which has a little bit more screen space than normal by way of removing the tool bar: It is one step between a regular pinned tab and a standalone full-screen app (Tools-> Create application shortcuts...). In short it has a bigger icon, and a big home screen presence. And you too can create one for your favourite webpage in less than five minutes. Create an app for your blog’s dashboard, your webmail service or your favourite porn family-friendly cartoon site.

/lay

Web apps for Google Chrome were announced at Google’s I/O conference in May 2010 as The Future (follow the link for an instructional video). The idea is that Google will, later in 2010, create an app store similar to Apple’s (or more aptly, Android’s…) for Chrome. You can download apps for your favourite websites, and purchase other things like games and premium access to websites. Etcetera. In the meanwhile you can sit down and play with the feature for yourself with Chrome’s latest builds.

So how do I…

  1. Go here to grab Chrome’s latest developer build for your operating system. I’m currently running it in Windows and Linux.
  2. After it downloads and installs, launch Chrome with --enable-apps appended to your shortcut. Google’s own blog has detailed instructions on the “where and how”.
  3. The newest development build has test web-applications from Google installed. The link above has instructions to activate them.
  4. Go to Tools-> Extensions, click on the Developer Mode link and finally the Load Unpacked Extension button.
  5. Browse to where Google’s app folders are (in my case, under Linux, it was /opt/google/chrome/resources) and click on the web app’s folder.

Congratulations! You have Google web app’s enabled and installed.

Now make your own!

Writing your own web app is absolute simplicity. Your first step is to decide exactly which website you’d like to turn into a web app. Now go and find usable icons on Google Images. In my case I went looking for “tumblr icon png and put the result into Photoshop. You take your own search result and crop it, save it as follows:

  • 128x128px as icon_128.png.
  • 24x24px as icon_24.png

Visit Google’s developer’s guide to get an overview, and really all the information you should need, as your first step. Grab the snippet of code given and paste it into your text editor. Change the links to that of your site. I used:


{
"name": "Tumblr",
"description": "Edit your Tumblelog",
"version": "1",
"app": {
"urls": [
"*://www.tumblr.com/tumblelog/slfh8",
"*://www.tumblr.com/dashboard"
],
"browse_urls": [
"http://www.tumblr.com/tumblelog/slfh8"
],
"launch": {
"web_url": "http://www.tumblr.com/tumblelog/slfh8"
}
},
"icons": {
"24": "icon_24.png",
"128": "icon_128.png"
},
"permissions": [
"unlimited_storage",
"notifications"
]
}

Save you file as manifest.json, put it into a new folder with the two PNG files and congratulate yourself for creating your own web app. Browse to the folder using the steps given above for Google’s and gaze upon it on your home page.

Tagged: , , , , , , , , , ,

Say something

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>