Developing and Publishing Chrome Apps

Introduction

Like Apple Store of iOS and MacOS applications, 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 their interest towards Chrome App Development.

Difference between Chrome App and Chrome Extensions

Chrome Apps are generally known as packaged app which directly runs from your PC and do not necessarily need 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. 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 respect of development, packaging and installation process. 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 extensions bar which can be used as quick shortcuts for extensions. Lists of Chrome extensions can be seen by typing "chrome://extensions" in the address bar of the Chrome browser. This post does not cover anything about extensions.

Prerequisites

If we talk about prerequisites for developing a Chrome App, it requires:

• Chrome Browser installed in your system
• A good Text Editor which supports HTML, JavaScript and CSS, etc.
• Knowledge of HTML, JavaScript, CSS and any preferred JavaScript framework (if required in your app)

Components of Chrome App

Four basic items required inside the package of Chrome App:

• manifest
• background script
• icon files
• source code for the 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:

{
"manifest_version": 2,
"name":
"HelloWorldApp",
"short_name":
"HelloWorldApp",
"description": "",
"version": "0.0.1",
"minimum_chrome_version":
"38",
 
"icons": {
"16":
"assets/icon_16.png",
"128":
"assets/icon_128.png"
},
 
"app": {
"background": {
"scripts":
["background.js"]
}
}
}

Properties of the above json are explained below:

• name and shortname properties are the name of the application
• icons property requires the name of the icon files of size 16x16 and 128x128 size images and paths should be mentioned against respective properties of "icons" properties of the json.
• scripts property accepts array and that name should include "background.js" file name.
• And other properties are self explanatory.

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:

chrome.app.runtime.onLaunched.addListener(function(launchData)
{
chrome.app.window.create(
'index.html',
{
id: 'mainWindow',
bounds: {width: 800, height: 600}
}
);
});

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 16x16pixels and another should be 128x128 pixels. If not, both your icon size should be 128x128 pixels and it 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 are all 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. Below are few 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 below dialog box:

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.

Things to Remember during Development

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

• Any type of JavaScript in HTML page does not work.
• JavaScript inside <script> tag does not work. JavaScript only works if it is written in a separate .js file and imported using:
  JavaScript

  <script src="main.js"></script>

• Inline event handlers like onclick, onload, etc. does not work. These need to be declared using querySelectors in JavaScript. Examples of inline event handlers:
  JavaScript

  <body onload="onloadHandler()"></body>
  <div onclick="onClickHandler()"></div>

• <a> tag navigation does not work.
• Access to external assets are restricted. For example, assigning an online image path to <img> tag does not work. To access the image, it is required to keep that image inside the app package or load that image as a blob and assign to the <img> tag.
• HTML’s alert does not work. To show any dialog box, custom dialog box or bootstrap dialog box need to be used.
• Embedding any object like Flash objects does not work.

Launch your App

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

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

• Open "chrome://extensions" in Chrome browser.
• Click on "Developer Mode" checkbox to enable Developer mode.
• Click on "Load unpacked extension…" button.
• Browse and select the application folder and Click OK. Application will get listed in the extensions page.
• Launch the application by clicking the Launch button.

Publishing Your App in Chrome Web Store

To publish your chrome App, Google charges $5 which is a one-time fee to use Chrome Web Store. Apart from the fee, as described in 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 reading, please refer to Chrome Developer Documentation.