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:
- Use any Editor which supports intellisense for HTML, JS and CSS
- Prepare all the required items
- 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:
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:
- Create your app’s zip file
- Login to Chrome Developer Dashboard
- Upload your app (.zip not .crx)
- Pick a payments system (if your app is not free). This step can be skipped if your app is free
- Get app constraints and finish your app’s code
- Get the app ID
- Get the OAuth token
- Finish the app
- Provide store content
- Pay the developer signup fee
- 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.