Creating a Web App for Google’s Chrome Web Store

With the recent announcement from Google that it was opening its Chrome Web Store to developers, many web developers are suddenly interested in knowing more about the type of apps that the Chrome Store supports. In this tutorial we’ll show you how to get started, and how to use HTML, JavaScript and CSS to create a packaged app for the Chrome Web Store.

Getting Started

The first thing you

’

re going to need is to download and install the latest build of the Google Chrome browser, Developer Channel release. You can find it

. The main reason you

’

ll need it isn

’

t that other browsers won

’

t support the apps

–

pretty much any modern browser will support the features that Chrome Store apps will utilize. The reason is that if you want to install apps from the Chrome Store, you have to be using Chrome (and that specific version).

The ability to package apps, which are essentially browser-based applications, is one of the key features of the Chrome Web Store. A packaged app is a web app that’s bundled up, so that the user downloads all of its contents when they “install” the app. Packaged apps can be used both when a user is online, as well as when they are offline, as all of the contents–including HTML, JavaScript, CSS, images, and any other files–are included in the “package”.

An installable web application requires that the developer creates a .crx file that contains metadata describing the app. The .crx file format is a compression format that is actually a variation of ZIP that is used by the Chrome web browser. An app’s .crx file can be hosted on your own web server or, as Google is hoping, a developer can upload it to the Chrome Web Store where it can be downloaded by users.

Note that the Chrome Store also allows developers to create what is known as Hosted Apps. Hosted Apps are apps that require a user to be online in order to use them, as the resources for that app are downloaded and used as the user opens up the app. Packaged apps do not have that requirement, and can largely be installed and used even when the user is offline or does not have access to to internet. Whereas a Hosted App can include full URLs in the .crx file, a packaged app will only use local URLs, that is, URLs that point to files which are already located on a user’s computer or device.

What Is Included in a Manifest?

The .crx file contains a listing of the files that are used, as well as a

“

manifest

”

that tells the browser how the app is supposed to behave and act. Here is what a typical packaged app

’

s .crx file looks like, as shown on the

:

{
  “name”: “My Awesome Racing Game”,
  “description”: “Enter a world where a Vanagon can beat a Maserati”,
  “version”: “1”,
  “app”: {
    “launch”: {
      “local_path”: “main.html”
    }
  },
  “icons”: {
    “24”: “icon_24.png”,
    “128”: “icon_128.png”
  },
  “permissions”: [
    “unlimited_storage”,
    “notifications”
  ]
}

The manifest is a just a text file named

that contains metadata about the web app

–

that is, various parameters that are defined in the manifest that will be used by the app. Getting into all the various parameters used is beyond the scope of this article, however, suffice it to say that they are fairly easy to understand, and once you have worked with them for a while, like HTML tags

’

parameters, they are easy to use, and you don

’

t need any special editors to create a manifest file.

Testing Using Chrome

Since the Chrome Store isn

’

t open yet, you will likely want to work with your app on your own computer or device. Fortunately, the folks at Google have created a document that

what you need to do to work with your apps and Chrome, without even needing a .crx file. You essentially create a folder which contains your app

’

s manifest along with all the files that the app uses. Then you load the manifest file by going into Chrome, Tools

>

Extensions, and you select

and just select the folder you created with your manifest and files. That

’

s all that

’

s required to

“

install

”

the app. The icon for your new app appears in Chrome

’

s launcher on the New Tab page the next time you open a new tab. By clicking the icon, you load the app within the browser.

In our next installment, we’ll create a basic web app and manifest, and we’ll install it in Chrome and show you how it works. And we’ll provide you with a link that lets you install it in your own Chrome browser on your computer or device!