Creating a Manifest for a Chrome Store Web App

By Scott Clark

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3900531/Creating-a-Manifest-for-a-Chrome-Store-Web-App.htm (Back to article)

In our last article, we explained the details of creating an app for Google's Chrome Web Store. This time we'll actually create a manifest file, and add the app to Google Chrome, explaining the process along the way.

Tell Me About a Manifest File

As we've learned from the Google Chrome Developer's Guide, a manifest is just a file called manifest.json that includes the metadata--that is, data and instructions about the files that are used in the app.

The manifest can include many parameters, or fields, that are used to define the app. These include some that are required, some that are recommended and others that are entirely optional. Here is the manifest file that we will be using for our sample app:

{
  "name": "Internet.com Network",
  "description": "The IT Professionals Resource",
  "version": "1",
  "app": {
    "launch": {
      "local_path": "index.html"
    }
  },
  "icons": {
    "24": "icon_24.png",
    "128": "icon_128.png"
  },
  "permissions": [
    "unlimited_storage",
    "notifications"
  ]
}

Required Manifest Fields

The app field itself has many parameters, including some that are required, specifically the urls field, which is required for hosted apps (but omitted for packaged apps), and browse_urls which is optional for hosted apps, (and is also omitted for packaged apps). The urls field are actually the live urls that are used by the app, while browse_urls are urls that a user can navigate to without leaving the app.

Another field used by the app field is launch, which tells the browser what is going to happen when the app is launched in the Chrome browser. You can use additional parameters along with launch to describe the web_url of hosted apps (and is required for hosted apps), the local_path, which is required for packaged apps (and omitted from local apps). Other parameters include the container field, which enables you to specify a panel or tab where the app will appear (tab is selected by default), and height and width, which are optional and describe the height and width of the panel, if the container is set to use one.

The next field is icons, another optional field that is used to define the icon that appears on the tab when an app is added, and the icon that shows up within the launcher. It is recommended to include the icons, as they provide the user with a way to recognize your app on their tab or launcher.

Other fields to be aware of include the following:

Our Sample Chrome Store App

For our sample application, we've basically just created a mobile version of internet.com, in fact, using the iWebkit that we used to create apps for the iPhone and iPad. All we had to do was to create a manifest file that specified the name, description, local path and icons (along with the launch url). You can see how the manifest file appears in the sample code shown above. Then we edited two .png icon images from a previous iPhone app to work with a Chrome app by changing their sizes to 24x24 pixels for the icon that is shown in the app tab, and 128x128 pixels for the icon that is shown in the launcher. We placed them all in the same directory (the manifest file and two icons), and proceeded to add them to Chrome as an extension.

How Does It Work In Chrome?

First, remember that you have to be using the Dev channel release of Google Chrome as we discussed in our previous article. Assuming you've copied your manifest file and two icons to a folder for your app, you simply add them as an extension by opening the extensions management page, clicking the Tools menu and choosing Tools > Extensions. Then you'll see several buttons for loading an unpacked extension, pack an extension and update an extension--you will want to select Load unpacked extension. When you do that, it will allow you to select the folder where you placed the three files for your app. Once you've done that, your new app/extension icon will show up whenever you open a new tab. Clicking it will open your app in the browser, and will show your smaller icon on the tab at the top of the browser. Here's what we see when we open a new tab:

And here's what we see when we actually open the app, which is also pretty much how it appears if it is viewed in an iPad or iPhone:

Next time we're going to turn our local app into a packaged app so you can download and try it out yourself!