Developing and Publishing Chrome Apps

Introduction

Like the Apple Store for iOS and MacOS applications and the PlayStore for Android applications, Google has launched its Chrome Web Store. Looking at increasing demand and technical feasibility towards developing complex desktop applications, developers are showing interest in Chrome App Development.

Difference between Chrome App and Chrome extensions

Chrome Apps are generally known as packaged apps which directly run from your PC and do not necessarily need an Internet connection unless it is required in your application. Packaged Apps are packaged as .crx which is a special ZIP archive. And these packages contain some mandatory files along with the resources required for the app. A list of all installed Chrome apps can be seen by typing “chrome://apps/” in the address bar of the Chrome browser.

Chrome extensions are very similar to Chrome Apps in regards to development, packaging, and installation processes. But as its name (extension) suggests, these modify or extend the functionalities of the Chrome Browser, as they have access to Chrome APIs. And one of the main differences is that extensions can add a button to the extensions bar which can be used as quick shortcuts for extensions. The list of Chrome extensions can be seen by typing “chrome://extensions” in the address bar of the Chrome browser. This article does not cover anything about extensions.

Prerequisites

If we talk about prerequisites for developing a Chrome App, they are:

Components of Chrome App

Four basic items are required inside the package of Chrome App:

How to create a manifest

The name of the manifest file should be manifest.json. And the structure of the manifest.json should look like the following:

  1. {
  2. "manifest_version": 2,
  3. "name": "HelloWorldApp",
  4. "short_name": "HelloWorldApp",
  5. "description": "",
  6. "version": "0.0.1",
  7. "minimum_chrome_version": "38",
  9. "icons": {
  10. "16": "assets/icon_16.png",
  11. "128": "assets/icon_128.png"
  12. },
  14. "app": {
  15. "background": {
  16. "scripts": ["background.js"]
  17. }
  18. }
  19. }
Properties of above JSON are explained below:

How to create background script file

The recommended name of the background script file is background.js. And the structure of the background script file should look like the following:

  1. chrome.app.runtime.onLaunched.addListener(function(launchData) {
  2. chrome.app.window.create(
  3. 'index.html',
  4. {
  5. id: 'mainWindow',
  6. bounds: {width: 800, height: 600}
  7. }
  8. );
  9. });
When the application launches, an event chrome.app.runtime.onLaunched gets fired and it looks for the launcher HTML file which is “index.html” in this case. Bounds property accepts width and height of the application window.

There are some other events like chrome.runtime.onInstalled and chrome.runtime.onSuspend for which handlers can be set in background script file.

How to prepare icon files

It is recommended that two images should be provided. One icon size should be 16x16 pixels and another should be 128x128 pixels. If not, both your icon's sizes should be 128x128 pixels and they will be resized by Chrome as required. It accepts various image formats but PNG format works best as it supports transparency.

Source code for the application

This is basically the HTML, JavaScript, CSS files and other assets like audio, video etc. which all are required for your application package.

IDEs for Development of Chrome App

I have used two ways to develop, test, and run Chrome Apps:

Option one:

  1. Use any Editor which supports IntelliSense for HTML, JS and CSS.
  2. Prepare all the required items.
  3. Run the build using manual process as described in Launch your App section.

Option two:

This is the easiest way to create a new project and launch in Chrome. Google has released an IDE for Chrome called Chrome Dev Editor. This Editor makes Chrome App creation and running the App easy. The following are some steps which explain how to create project and run:

Step 1: Go to Web Store and search for Chrome Dev Editor and add it to Chrome.

Step 2: Launch Chrome Dev Editor.

Step 3: Go to Main Menu (in left top corner) and click on New Project. It will open the following dialog box:

New Project

Enter project name and select JavaScript Chrome App from the drop down.

Step 4: And then click on CREATE button. It will create a new Chrome App project with all required files inside.

new Chrome App project

Things to remember while developing

Developing Chrome App using HTML, JavaScript and CSS is not the same as developing Web Apps. Here are few things to remember while developing a Chrome App:

Launch your App

If you are using Chrome Dev Editor, then its just one click. By clicking on Run button (available in top left corner of the Editor) build will get launched.

Launch your App

To launch the Chrome App manually, then following steps need to be followed:

Publishing your App in ChromeWeb Store

To publish your chrome App, Google charges $5 which is one-time fee to use Chrome Web Store. Apart from the fee, as described on the Chrome Developer Site, there are few steps that need to be followed:

  1. Create your app’s zip file.
  2. Login to Chrome Developer Dashboard.
  3. Upload your app (.zip not .crx)
  4. Pick a payments system (if your app is not free). This step can be skipped if your app is free.
  5. Get app constraints and finish your app’s code.
  6. Get the app ID.
  7. Get the OAuth token.
  8. Finish the app.
  9. Provide store content.
  10. Pay the developer signup fee.
  11. Publish your app.

A more detailed documentation about publishing Chrome App is available in Chrome Developer Documentation.

For further readings please refer Chrome Developer Documentation.