How To: Create Chrome Web Apps

[woodyman]

The following guide was produced with much help from
http://code.google.com/chrome/websto...ed_simple.html

I have simplified and edited parts as I've seen fit, I do not take credit for anything I may have taken directly from that guide, I have just simply tried to simplify that guide where possible for the end user, I have left out parts because I'm sure most of you do not plan on publishing these apps in the Chrome Web Store, if you wish to do that please refer to the link above for more details. I made this guide for the everyday person who just wants to convert all their bookmarks/any other site they wish into an installable web app.

If you find anything you think should be changed or worded differently please post below with the original text quoted, and your proposed revision following it.

[woodyman]

How To: Create Chrome Web Apps
-Create a folder and name it ChromeWebStore
-Create another folder and name it after your app [example DroidConcepts]
-Open that folder and create a new text file
-Name the text file “manifest.json” [make sure its not manifest.json.txt or something like that]
-copy the following into that text file

{
 "name": "Great App Name",
 "description": "Pithy description (132 characters or less, no HTML)",
 "version": "0.0.0.1",
 "icons": {
   "128": "icon_128.png"
 },
 "app": {
   "urls": [
     "http://mysubdomain.example.com/"
   ],
   "launch": {
     "web_url": "http://mysubdomain.example.com/"
   }
 }
}

-Replace the italic blue text with the info for your app.
-You can make the name and description say what ever you wish.
-The version number is completely up to you as well.
-You can change the name of the icon but make sure it matches the icon that we will later place in the folder with this manifest.
-The url fields should be the complete web address for the site you wish to make the app for.
-Next create a 128x128 pixel image for you app.
-The icon part should be 96x96 pixels with 16 pixels on each side for a transparetn padding.
Of course if you would prefer a lager icon you can do that as well, but 128x128 is the max for the image size.
-The image must be in PNG format, and make sure it will look good on both dark and light backgrounds. [Because you may switch your theme and you still need to be able to see your app.]
-That's it, you've created a Chrome Web App!!

[woodyman]

Installing your App
-In Chrome, bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions. (On the Mac, go to the Window menu and choose Extensions.)
-If Developer mode has a + by it, click the +.
-Click the Load unpacked extension button.
-In the file dialog, navigate to the folder that you unziped after downloading
-You've now installed the app.
-Create a new tab.
-The icon for the newly installed app appears in Chrome's launcher on the New Tab page.
-Click the icon for the app.
-You've now launched the app.

[woodyman]

If you run into issues or have problems please post below...

I will be making a thread shortly for everyone to post their apps that they make for their favorite sites/a place for people to post icons they have created that others can use..

I have made a Google Docs version of the guide, in case you would like to check it out and/or download a copy
https://docs.google.com/document/pub...CspbzZZSQN8aRg

[LoneWolfArcher]

Awesome Woodyman! I appreciate this guide. I will be following this tonight at home. Can't wait to start creating apps.