How To Create A Chrome Web App

A while ago I visited the Chrome Web Store to try and find a web app for an application I'd seen on a well known web site. The store didn't have the app, so I did a bit of research and came up with the following method of creating my own Chrome Web app.

First Steps To Building A Chrome Web App 

Chrome Web apps are derived from two files namely a 128 x 128 pixel png image file and a JSON file called manifest.json which contains a reference to the image file and other information such as the URL of the site you want to turn into a web application. So, to create a chrome web app you first need to create a png image file. This image will represent the the icon of the web app you want to create. The image will be displayed on the new tabs page along with other chrome web apps. When you have located an appropriate image, save it as 128.png.

Next, create a JSON file. Below is a template for the file which you can copy, adjust and then save as manifest.json. (This can be done using windows Notepad)

{

"name": "AppName",

"description": "AppDescription",

"version": "1.0",

"icons": {

"128": "128.png"

},

"app": {

"urls": [

"AppURL"

],

"launch": {

"web_url": "AppURL"

}

},

"permissions": [

"unlimitedStorage",

"notifications"

]

}

The highlighted text in the above code should be replaced as follows

• Replace AppName with the name of your app (place the name between the speech marks).
• Replace AppDescription with a description for the app. (Again, place the description between the speech marks).
• Replace AppURL with the full web address of the web page that contains the app e.g. http://www.webapp.com/ once again make sure that the URL is placed between speech marks in the above code.

Once you've created the png image file and manifest.json file, place them in a separate folder. Call the folder something like ChromeWebApps.

Test Your Chrome Web App

Now you need to test your app. To do this open chrome, and select Tools, then Extensions from the spanner icon in the top right hand corner of the browser. Next, locate the "Developer Mode" plus/minus button on the top right hand side of the Extensions page. Make sure the button shows the minus sign. If it shows the plus sign click the button so that it shows the minus sign.

Select "Load Unpacked Extension" from the developer mode menu. When the pop up menu appears, navigate to the folder that contains the image and manifest files then select the folder and click ok. The icon for your Chrome web app now appears on the new tab page with your other apps (if you have any). Click the icon to make sure that it loads the correct page.

Create The Full Chrome Web App

Now that you've determined that your app works, you can go ahead and create the full web app. Chrome web apps are contained in files with the .crx extension. This file combines (by a process known as  packing) the png and manifest.json files you created.

To create the full chrome web app, first navigate back to the Entensions page in the chrome browser. Next locate your web app (the one you just tested) in the extensions list. Now click uninstall. Once the app has been uninstalled, click the "Pack Extension" button from the Developer Mode menu on the chrome browser extensions page. A new pop up with two fields appears.

In the field titled "Extension Root Directory" use the "Browse" button to navigate to the directory containing your png image file and manifest.json files as before. (The field labled "Private key file (optional)"  is used for editing Chrome web apps. You do not need this at the moment). Select the directory and click ok. The path of your Chrome Extension now appears in the "Extension Root Directory" field. Click the ok button. A new pop up appears titled "The page at chrome://extensions says:" which gives information regarding the location of two files namely a .crx file (your newly created full web app) and a .pem file which contains a key code which can be used to edit your app if needed.

Go to the location of the .crx file as mentioned above then select and drag the file to the Chrome web browser. A window should now appear entitled "Confirm Installation" with a message saying "Install (whatever your app is called)?". Click the Install button. A New Tab page is now automatically generated with your newly created Chrome web application appearing alongside other apps. Enjoy!