Chrome Web App Development Guide :

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.

Here is a list of free, simple ideas you can consider using:

  • An offline to-do list
  • A text-based calculator
  • A simple time tracking app
  • A zen-mode text editor

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.

Chrome supports all native HTML5 features. You can take advantage of local storage, 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.

An example for manifest.json:
“name”: “Your App Name”,
“description”: “Your App Description.”,
“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.

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:

  • Screenflow (the one I’m going to use)
  • Camtasia
  • iShowU
  • Captivate

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:

  • HiLoMedia
  • Clear Media
  • SwitchMarketing

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.

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.

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

By tbox