How to Develop a Google Chrome Web App

By TRJ

A brief guide on how to create your own Chrome Web Apps.

So Google has a Web Store full of Apps that you can use within Google Chrome.  Apps that span an entire spectrum from family fun to all your social networking needs. Want to easily access your favorite sites or play Angry Birds on the office dime?  It is all there as long as you are a Google Chrome user.

UPDATE FROM GOOGLE

As of November 21st, 2016, all newly published packaged or hosted apps are restricted to Chrome OS, and are not available to users on Windows, Mac or Linux. Existing apps will continue to be available on all major platforms and will continue to receive updates. Note: This change does not apply to Google Drive Apps or Add-Ons for Google Apps.

How To Develop a Google Chrome App 4
Chrome Web Apps

As an avid Google user, one might argue that Google currently owns my entire life when it comes to the world wide web, I have found myself using these little apps more and more each day.  Its to the point that I now have an app for all my favorite sites.  However, one of my favorite sites, Booya Gadget was missing from the store.  I figured that I would not only fix that massive error, but I would show you how to make your own Chrome Web Apps, so that you can share your blog with the world.

Head on over to your Developer’s Dashboard to get started and here are the steps to get your Blog in the Google Web Store:

How To Develop a Google Chrome App 5
Developer Dashboard

Verify your Blog- Google wants to know that you own your blog so you will have to verify it with Google Webmaster Tools.

Buck up - Five bucks to be exact.  To publish your final product it will cost you 5 dollars.  This is a one time fee so once you fork it over, you can publish as many apps as you like.

Create A Folder - On your desktop create a folder and give it the name of your blog.  In my case, we are doing the Booya Gadget site, I will name my folder “BooyaGadget”

Create A Manifest - Using notepad open up a new document.  Cut and paste the following code into your new document.  Fill in the appropriate data for you blog and save this file as “manifest.json” and store it in the folder you created.

{
    "name": "Name of Your Blog",
    "description": "Description of Your Blog",
    "version": "0.1",
    "icons": {
        "128": "icon_128.png"
    },
    "app": {
        "urls": [
            "http://www.yourblog.com"
        ],
        "launch": {
            "web_url": "http://www.yourblog.com"
        }
    }
}

Create your Icon - The icon must be 128 x 128 and saved in .png format.  This is the icon that will display in the Chrome Browser, so make it nice.  Save the file as “icon_128.png” and place it in the folder with your Manifest.

Booya Gadget Icon
Booya Gadget Icon

Compress Your Folder - With the Manifest and Icon inside compress your folder into a ZIP File.  Name the ZIP File the name of your Blog.

Upload your App - From your Developer’s Dashboard click “Add A New Item”  This will allow you to upload your ZIP File.

Describe Your App - Now that you have uploaded your App it is time to fill in the descriptions so that users will know what they can expect when they install your App.  Upload some Screenshots or images of your blog that best describe your Blog.  These files must be 400 x 175 and saved in .PNG format. Fill in all the required information for your App page, remember that this is the page that users will see before deciding to download your App.

How To Develop a Google Chrome App 6
App Meta Data and Description

Publish Your App - There are two choices for publishing. You can publish your app “for testers,” which will allow you to send your App to emails you choose for testing.  The other option is to publish your app to the Web Store.  If you feel you have done all you can and your App is ready to go live, then hit the Publish Button.

How To Develop a Google Chrome App 7
Chrome Web my App Listed. Booya!

Now you are in the Google Web Store.  Give yourself a huge BOOYA!