Chrome Web App Development Guide

I launched OhBoard, my little whiteboarding app, in 10 days. I took my idea-cranking shower on December 12th, and I made my first $3.99 on December 22nd. It was only 240 hours apart. Pretty cool, huh?

I then decided to carefully craft a development guide for you. If you are planning to make a Chrome Web App, you are in luck! Because after reading this guide, you can do what I just did and start taking advantage of this huge market (10% of all Internet citizens) today!

Step 1: Come up with your idea

The listing on Chrome Web Store is still pretty small, nowhere near Apple’s App Store yet. So there are many things you can make.

I have a list of free, simple ideas you can consider using:

Also, before moving on, I recommend reading this article by two Chrome developer advocates: Thinking in Web Apps.

Step 2: Make your app

There are two different types of apps, hosted apps and packaged apps.

Hosted apps are regular web apps with a special file called manifest.json. Everything is hosted on your own server. But you have the advantage of gaining exposure on Chrome Web Store. When a user launches the app, they go straight to your site and that’s it.

Packaged apps, on the other hand, are apps that users download from the Web Store and save into their own computer. All packaged app content are made out of HTML, CSS and JavaScript. So if you have knowledge about them, you can get started making packaged apps very easily. PS: OhBoard is a packaged app.

Chrome supports all native HTML5 features. In OhBoard, I use local storage that saves all your drawing in local computer and it is available at all time. Besides, you can also take advantage of geolocation, desktop notifications, and many more.

Step 3: Create manifest.json

Manifest.json serves as the manual for your app. It tells Chrome the name, description, version, icon location, etc. Most importantly, it tells Chrome what page to open when a user launches the app. You can also give your app different permissions such as unlimited storage, geolocation, desktop notification, history, bookmarks, cookies and more.

Here is OhBoard’s manifest.json:
{
"name": "OhBoard",
"description": "A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.",
"version": "1.1",
"app": {
"launch": {
"local_path": "index.html"
}
},
"icons": {
"16": "favicon.png",
"128": "logo.png"
},
"permissions": [ "unlimitedStorage" ]
}

Step 4: Create your icon

You need two icons. The first one is 128x128px, it is used on your app page, and it also represents your app on the new tab page. The second one is 16x16px, better known as favicon. It stays in the title bar and gives people a visual way to identify different tabs.

There are few guidelines Google wants you to follow:

  • Don’t put an edge around the 128×128 image; the UI might add edges.
  • If your icon is mostly dark, consider adding a subtle white outer glow so it’ll look good against dark backgrounds.
  • Avoid large drop shadows; the UI might add shadows. It’s OK to use small shadows for contrast.
  • If you have a bevel at the bottom of your icon, we recommend 4 pixels of depth.
  • Make the icon face the viewer, rather than having built-in perspective.

Wherever you place both icons in your package, you must specify the locations in manifest.json (as mentioned above).

Step 5: Make your screenshots

Picture is worth thousand words. So making your screenshot correctly will increase your sales. Each screenshot is 400x275px.

Take a look at a few I did:

Few tips to keep in mind: The screenshots should only do 1 thing: show what your app looks like. Many people made the mistake of adding captions and putting testimonials and writing features and telling your Twitter handle. But you have the description field for that. Just show what it looks like so user can get a visual understanding.

Also, make sure you don’t break Google’s rules!

Step 6: Make your demo videos

Video is worth thousand pictures, too! If you want to save money, you can make a DIY video yourself using these powerful tools:

Or if you want your app to look cutting-edge, consider contracting with agencies that makes professional demos. Few media producers that have done work for high-profile apps:

Step 7: Write your descriptions

If your screenshots and video aren’t that good, a golden description can still turn it over. Here are 3 well-known tips:

  1. Keep it simple. Most people aren’t going to have time to read a 5-paragraph description. So the rule of thumb is to keep it as short as possible. Just tell what benefits and features do the app provide.
  2. Use bullet points. Since people won’t read paragraph, listing benefits and features in bullet points will be a great idea.
  3. Showcase testimonials. Maybe users don’t trust what you have to say, listing your customer’s testimonials can be a convincing call-to-action.

Take a look at mine for an example.

Step 8: Set your price

As always, there are two ways to go: free or paid. But in Chrome Web Store, there are actually 5 payment choices you can use.

  1. Free. If you are new to create a Chrome Web App, releasing it for free and learn from experience won’t hurt you.
  2. One-time payment with Google Checkout. Great if your app provides utility, meaning it saves users time or money.
  3. Recurring payment with Google Checkout. This is perfect if your app involves any types of file storage.
  4. Free trial. If your app is complicated, giving a free trial then charge for a fee will be the best solution, although only hosted apps support free trial at this point.
  5. Your own payment method. If you don’t want to use Google Checkout, you can always write your own system that processes payment via PayPal.

I found a detailed but pretty technical tutorial from Google about how to check for payments using their licensing API. Note: it only applies to hosted app because packaged apps only supports Google Checkout.

Step 9: Test the app

After you’ve finished making your app, you can easily test it out locally in Chrome. Window => Extensions => Developer Mode => Load unpacked extension… => Choose your app folder.

Open up a new tab, you should see your app icon showing on the dashboard! If it is packaged app, make sure everything within the app is working bug-free. If it is a hosted app, as long as the icon links to your destination website, you should be fine.

Step 10: Publish the app

Before moving on, make sure you completed all of the pre-launched checklist items!

Once everything is done, you can log in to your developer dashboard with your Google account to publish your app.

The procedure is fairly straightforward:

  1. Choose Add new item button
  2. Compress your app folder (with manifest.json and your icons) and upload the .zip.
  3. Fill in all the necessary information about your app. This includes price, categories, language, long description, Google Analytics (optional), links, ratings, etc.
  4. Upload all artwork. This includes screenshots & videos. You also have the ability to add default background & promotional items for the front page.
  5. Preview the listing
  6. Pay $5 one-time developer fee
  7. Publish the app

A little helpful video by Google:

Also, take a look at the developer dashboard:

Conclusion

If you survived all the way to the end, great job! :) My lengthy tutorial should cover up all the basic about making your own Chrome Web App as well as any relevant links I can find from Google about this process.

In the future, I will continue to write more in-depth tutorials on more specific topics, so feel free to subscribe to this blog.

I also suggest that you join Google’s Chrome development group so you can keep up with everything and ask any questions.

If you have any more questions, feel free to email me via Email, Twitter or comments.

And lastly, if you enjoy this tutorial, you will really love OhBoard as well, give it a try!

If you are interested in keeping up with OhBoard and Stephen, subscribe to the blog & follow on Twitter!

  • http://twitter.com/imkevinxu Kevin Xu

    Awesome tutorial!!!!! Goes into all the things I wouldn’t have known before developing, hopefully I can be a part of that 10% ;)

  • Anonymous

    Great! I love when people found out stuff that I haven’t tweeted yet.

  • http://fishbe.in Phil Fishbein

    This is an awesome tutorial!

  • Anonymous

    Thanks, Phil. Glad it helps!

  • http://twitter.com/starry_sky_ Jerry Chen
  • http://twitter.com/bunturedempter Buntu Redempter

    Very Nice, Thank you so much!!

  • Anonymous

    No problem, glad it helps!

  • Anonymous

    Perfect. Thanks for sharing.

  • http://twitter.com/douglasfugazi Douglas Fugazi

    amazing tutorial. I’m happy see this on this blog. keep up sharing your knowledge with all world :)

  • Micahshell

    This is a good guide, I’ve wanted to see what I could make with HTML5 & css3, and I know what chrome can and can’t do.

  • http://stephenou.com Stephen Ou

    Yeah, the trend is really shifting toward HTML5 and CSS3. Although they should not be the attention-grabber, it’s important to get a sense of what they can do.

  • http://stephenou.com Stephen Ou

    Thank you, Douglas. Looking forward to share knowledge with you guys.

  • http://profiles.google.com/1dollar.atime 1 dollar

    Thanks I followed your advice and my app is up and running: 

    https://chrome.google.com/webstore/detail/hllhbmicefkhgbanfpoagelkhlhkogfj

    I have a couple more but I’m not gonna spam this board with all the links.  Thanks for the post!

  • http://stephenou.com Stephen Ou

    Nice app, thanks for letting me know and glad you find the guide useful!

  • A D

    I’m very much interested in tutorials/coverage of a packaged Chrome app interaction with local storage or a local database and how to best deliver such an app.

    For example, a simple to-do list needs local storage, but it also needs some way to perform add, edit and delete actions (CRUD) on the data. 

    With this in mind, do you have any plans to cover how to integrate JS with local storage to perform CRUD actions.

    Thanks.

  • Jim

    Thanks Stephen. I brought your app today. It is cool. I have a company called SearchBrand Inc. can we collaborate  in creating chrome apps for my clients.

  • http://twitter.com/mockuptiger Mockup Tiger

    Great tutorial. I have a hosted app. What would be different for that, any tutorials?

  • http://stephenou.com Stephen Ou

    Hosted app is much simpler. You simply need a URL to that particular website you are hosting it on. http://code.google.com/chrome/apps/docs/developers_guide.html

  • http://stephenou.com Stephen Ou

    Hi Jim, thanks for the kind word. Unfortunately my schedule is currently full with projects. So maybe we can in the future?

  • http://stephenou.com Stephen Ou

    I think you will find this article useful: http://nithinbekal.com/2010/a-simple-to-do-list-app-using-html5-and-local-storage/

  • John Drefahl

    Great tutorial!  If any of the business people on here need help converting an app or making one.  Contact me.. john.drefahl@gmail.com

  • John Drefahl

    Great tutorial!  The future of the web truly is HTML5 webapps.  Soon domain names won’t matter!  If any of the business people out there are interested in migrating their business to an HTML5 app contact me.  Better yet, build out the back end with Grails and host your webapp in the salesforce cloud!  Abstract that data straight to Salesforce! @johnsin / john.drefahl@gmail.com

  • S_subash_028

    great tutorial…

    as i am just starting with apps, u could help me.

    i am trying to write an app for certain pages only. how do i detect when that page is loaded and start my app
    my id- s_subash_028 [at] yahoo [ dot ] com

  • http://www.outsourcing-partners.com/web-application-development.html Ryan

    Thanks for sharing such a wonderful and useful information
    for

  • http://www.itconsultancyservices.com/ IT Consulting Services

    A lot of thanks for updating the post. it is very informative . Great to be here

  • Nick Lachey

    Great post. Here’s a product with a powerful database in
    the cloud with ready-made apps. Just point-and-click to build your custom apps

    http://www.caspio.com/

  • Andre Lademann

    Wohooo!

  • http://palimadra.tumblr.com/ Pali Madra

    Hey Stephen thanks a tonne for the tutorial. You got another fan.

    I had a query and that was what are the skills you think are helpful in case someone wants to start developing apps for Chrome.

    Thanks in advance.

  • http://palimadra.tumblr.com/ Pali Madra

    Thanks Stephen for sharing the tutorial. Has much changed from the time this post was written?

    Also I wanted to know the skills that would help one become a better Chrome App developer?

    The post is inspirational and I’m going to give it a shot. Keep up the good work.

  • http://stephenou.com Stephen Ou

    You just need HTML, CSS, and JavaScript proficiency.

  • Imraan Afridi

    Cool article for the app developers!!
    App development

  • http://stephenou.com Stephen Ou

    Thank you!

  • Prabhjot Singh

    Excellent! Got mine made in a jiffy. Thanks

  • http://stephenou.com Stephen Ou

    No problem. Glad I can help.

  • http://kiranatama.com/ KiranaTama

    This is awesome..  Great jobs Stephen

  • http://stephenou.com Stephen Ou

    Thank you!

  • niki4810

     Article Stephen, Thanks a lot for this.

  • http://stephenou.com Stephen Ou

    No problem!

  • nickolicka

     Funny how so many consumers doubt Google given the track record.  This article is more relevant to me today than it was when it was written.  Thank you buddy.

  • Anonymous

    and how to unlock the facebook again?
    same with the procedure or there’s something else?Facebook Application Developer

  • Jos de Jong

    Thanks for this clear tutorial.

    Can you maybe tell a little bit more about one of the other requirements: linking to your “Public Business Website”? I don’t have one, and because of that, my merchant account is suspended shortly after deploying my first app. Still trying to figure out what website I have to set up for this and what information it must contain.

  • BritanneyBernard

    tried looking at your website on my blackberry mobile phones and the framework doesn’t seem to be right. Might want to examine it out on WAP as well as it seems most cell cellphone templates are not dealing with your website.

  • Prologic

    Hi, i am Prologic from Chandigarh, India.
    today i read your blog when i am searching something on Google. I get a lot of information from your blog. Your complete blog is full of knowledge.
    I am really-2 impressed with your knowledge, and want to say thanks for this good information.

  • http://stephenou.com Stephen Ou

    You’re welcome!

  • Emma

    There could be many such applications however Replicon time tracking software suite is one of my favorite online tools & resources that is accessible easily both via web and mobile on various supported interfaces.

More in How-Tos (1 of 3 articles)