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 dark web links 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.

Leave a Reply

Your email address will not be published. Required fields are marked *