Create Your First Web App for Chrome

I have been using Google Chrome as my default browser for a few months now and like it a lot. Even though I switch back to Safari from time to time, Chrome stays as my major browser since it is the most comfortable place where I can do all my works. Chrome has all kinds of interesting extensions and apps in the web store, but sometime it fails to satisfy my needs. I want a simple Instapaper shortcut (like a bookmark) so I can quickly switch to my favorite offline reader but there are few options out there. You may have a similar needs so there is a simple tutorial to help you create a simple web app for your chrome. You can see the final result in the below screenshot.

Create Your First Web App for Chrome

First of all, a shortcut is quite similar to a bookmark. You can drag a bookmark from your toolbar to the new tab window and it will automatically become a web app for you. But you cannot edit it according to your needs. This tutorial is for Mac users, haven’t test it out but it should work for Windows users. On the Mac version of Chrome, we cannot use the Application Shortcut under the Tools menu, thus a workaround is needed. In this simple tutorial, I will create a shortcut link to my blog ThemeFortress and here we go.

You will need two files: a 128×128 PNG image (128.png in our example) for your shortcut and a manifest.json file. You can create the manifest.json file using TextEdit and rename it to manifest.json, not manifest.json.txt. Put the two files in a folder, in our example, called ThemeFortress. The content of manifest.json is below:

Change several parts to fit to your own app. For example, the name, description and most important, the web_url. You can learn more about how these terms mean by reading Google’s Developer Guide.

All the works are done and you can navigate to the extension page by: Window -> Extensions. Turn on the Developer Mode on the top right corner and then click Load Unpacked Extension and locate the folder you just created. Now you can open a  New Tab and you will find you Web App just created sits here.

I include the file mentioned in this simple tutorial and you can download here.

Chrome Web App

Well, I’ve just created a simple Chrome Web App, when not submit to Chrome’s Web Store and let everybody download it? You can check this little Chrome app on the Web Store here.