Hello.

My name is Stephen.

I like to write and tweet.

I work, code and photograph.

I've written 30259 words in 29 posts.

Chrome Web App Development Guide

Chrome Web App was a trendy topic in the web development circle around this time, so I used my experience with OhBoard to write a step-by-step tutorial on how to create a Chrome web app.

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:

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:

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:

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 paymentwith 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.

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

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!/