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!
