How-to Create A Google Chrome Web App for Your Ning

[JFarrow]

In the past, i showed you how to create a desktop extension for your Ning network using chrome, but that was just too easy.  Now I am going to show you a trick that takes only a few minutes and in the end you'll have a Google Chrome Web App of your Ning network and can submit it to the Chrome Web Store for your members to download and use.  Here is a look at the finished product as seen in the Google Chrome Browser (along with a custom theme I made for my network for land surveyors, which may become a future how-to post):

 What the heck is a Chrome Web App?

You can create application shortcuts to websites that you regularly visit, as well as apps that you've installed from the Chrome Web Store. These shortcuts can be placed on your computer desktop and menus for quick and easy access.

What is required to make a CWA?

A Chrome Web App requires two components, the Manifest and an Icon.

The Manifest is a JSON file with the namemanifest.json

The Icon is a 128px x 128px image that will be used on the New Tab page.

To create the Manifest, copy the following into a text editor like Notepad or TextEdit:

{
"name": "Your-Network-Name",
"description": "Your Description of Your Network",
"version": "1.0",
"icons": {
"128": "128.png"
},
"app": {
"urls": [
"http://www.yournetwork.ning.com/"
],
"launch": {
"web_url": "http://www.yournetwork.ning.com/"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

 

You will need to make the appropriate changes (replace text and urls with red line beside them with your own) to the areas indicated below (name, description, urls, and launch):

Once this is done, save the file as manifest.json (NOT manifest.json.txt!!!)

Next, you need to have created an icon for your web app. You can use any graphics application such as photoshop or GIMP or web app that allows you to save it as a 128×128 png file. Save the file with the name 128.png.

 

NOW...Create a new folder somewhere on your computer and give it a name (connecting the words in the name with either an _ or - for example: Your_Network )and give it the name that you will call your Web app and place both the manifest and icon files inside the folder.

Now it’s time to install the Web App into Chrome.

1. Open Google Chrome.

2. Click the wrench in the upper-right corner of the application.

3. Click Tools and select Extensions.

4. On the right side of the Extensions page, click the + that is next to Developer mode.

5. Click the Load unpacked extension button.

6. Browse to the Web App’s folder and click OK.

BOOM!!  Your web app should now be created for your network, any errors are likely a manifest typo. Go back and check the manifest for any missed character(or an unnecessary ones).

Now when you click on the New Tab page in Chrome Browser, your new web app will appear with the others as shown above.

 

Whew..this post got long....i will create a follow up post soon to show you how to submit it to the Chrome Web store and share with your members.  For now, you have all you need to run your new app on your computer.

[Fitzroy Farquharson]

This sounds interesting...gonna try this as soon as I'm around a pc.

[solo]

nice post lots of works,i look fowards to your postings thank you

[JFarrow]

glad you guys like it...it looks complicated but the whole thing shouldn't take more than 5 minutes

[Speed Racer]

getting error that says "cannot load icon extension '128.png'" 

 

thats not even the name of the icon

 

how do i fix this?

 

EDIT>> got it-had to name the icon 128.png....i guess that it has to match the code you posted..i was wondering what the deal was! Did you ever do a follow up to show how to add to store and share?

[JFarrow]

As promised, here are the instructions for how to upload and submit your app to Google Web Store:
http://creators.ning.com/forum/topics/how-to-add-your-chrome-web-app

Enjoy!

[Greg Johnston]

Hi JaFarrow,

I tried doing this but getting an error. See below. I followed each step carefully. Attached is a copy of the folder with all the appropriate files. 

[Patrick Chappelle]

I'm having the exact same problem, and I've followed the instructions precisely as written.

[JFarrow]

something might have changed with chrome themes and extensions...ill look into this..  this post was from Feb of 2011

[Patrick Chappelle]

Thanks J!

[Greg Johnston]

Thanks so much J!

[Innovative IT Systems]

Thanks for the detailed explonation.

Regards

[JFarrow]

i went through and edited updated all of my existing apps and even added a new one with success

find it here:  Mobile Surveyor Network App

links to my mobile version of the network

the only aspects that I find that could be causing these problems are keeping the title of your app inside the manifest.json file under 45 characters...if it goes over 45 characters the app will not be accepted.  Use this character counter to be sure

if you are unsure of how to add this app to Chrome web store look here:   http://creators.ning.com/forum/topics/how-to-add-your-chrome-web-app

let me know if you have any other questions...