Pin Me

Create a Chrome Web App for Your Website in Minutes

written by: Maitraya K B•edited by: Amy Carson•updated: 7/15/2011

While life is moving to the cloud, more and more cloud applications are being developed which are replacing desktop apps fast. This article teaches you how to create a simple Chrome App for Google Chrome or Chrome OS.

  • slide 1 of 9

    Why Web Apps? Why Chrome?

    If you look at browser market share statistics, you may have noticed that Google Chrome is the browser which is slowly gaining immense popularity owing to its speed, its simplicity, its fast development cycle and also because it brings tons of new features with every release. Therefore it is quite sensible that you create a Chrome application for your website to reach out to a wide section of the internet audience.

    Before we go any further, let me tell you what Chrome applications are.

  • slide 2 of 9

    Chrome Applications

    Basically, Chrome apps can be anything from a simple link to a website to an offline game which can be played within the browser. Websites which provide services to its customers (like cloud storage, email, cloud office and so on) are not simply a group of web-pages linked together but smart web-applications which can basically do anything that a desktop application can. Thus, these may be also called web applications.

    The latest trend is to move to the cloud and Google has realised this, which is clear from the introduction of the cloud OS, Chrome OS. With more and more people embracing the cloud for various advantages, it becomes increasingly important for web application developers to create small Chrome apps which will appear on the menu of Chrome OS and direct users to their web application. These apps can also be used with the Chrome/Chromium browser.

    The picture below shows some Chrome apps installed on Google Chrome.

    Chrome apps 

  • slide 3 of 9

    Chrome Apps in a Jiffy: The Basics

    A Chrome app consists of two files: the manifest.json file (which contains information about the app name, the app URL and permissions) and an icon (a 128x128 PNG file). Both the files have to be kept in the same folder. This constitutes the unpacked app. Later, the browser developer tools are used to pack the app into a .crx file which can be distributed to your customers. Doing all this should not take more than 5 minutes.

  • slide 4 of 9

    The 5 Minute Magic

    Writing the manifest.json file:

    Open notepad and type the following.


    "name": "Bright Hub",

    "description": "The Hub for Bright Minds ",

    "version": "1.0",

    "icons": { "128": "brighthubicon.png" },

    "app": {

    "urls": [ "" ],

    "launch": { "web_url": "" }


    "permissions": [ "unlimitedStorage", "notifications" ]


    Here I have created a sample Bright Hub Chrome app. Change the name, description, icon name and the URL. Remember web_url is the URL which opens when the app is clicked. Also note that the web app has been given certain permissions. Save the above file as manifest.json

    Creating the icon:

    In the above, the icon has been named as brighthubicon.png. So create a 128x128 PNG icon with the same name. I have used Photoshop for creating the icon.

    Creating an icon 

  • slide 5 of 9

    Packing the App

    Now the only thing left to be done is pack and distribute the app as a .crx file. Open the Extensions option from the Tools menu and make sure it is in developer mode. Then click on Load unpacked extension and select the folder where the .json file and icon is stored.

    Loading the extension 

  • slide 6 of 9

    The app is created and added to the Apps list. To pack it into a .crx file simply click on Pack extension, select the app folder and click Ok. The .crx file is generated along with a .pem private key which can be used to upload the app to the Chrome Web Store. Drag the .crx file to Chrome to install the Chrome app.

    Insalling the Chrome app 

  • slide 7 of 9

    That's It!

    Creating a simple Chrome app is as easy as that. You can further upload the app to the Chrome Web Store by following instructions from here. So what are you waiting for? Go upload your own Chrome app. You have to pay a one-time fee of $5 before you upload your first Chrome application to the Web Store.

  • slide 8 of 9

    The Future

    Chrome applications are just the beginning to what we're going to see in the future. Many apps on the Web Store are links to websites. So what's the difference between this and a bookmark? The basic difference lies in the way we look at them. Websites are no longer pages with formatted text, pictures and hyperlinks. They are becoming smarter by the day and can be used as serious desktop software alternatives. With new technologies like HTML5 and CSS3 these web applications can flawlessly integrate with the desktop and yet keep your data on the cloud. They can be made to send desktop notifications, render 3D objects using hardware acceleration, provide a collaborative platform for professionals and even take your whole office work to the cloud. We shall soon see mainstream web applications which allow the most popular games to be played using a browser. In short, we are moving to a world where applications are truly cross-platform: you just need a modern browser.

  • slide 9 of 9


    Google Code, Chrome Web Store

    All images have been provided by the author.