This page talks about packaged apps—how you implement them, and how they're different from extensions and ordinary web apps.

Overview

A packaged app is a web app that's bundled into a .crx file and can use Chrome extension features. You build a packaged app just like you build an extension, except that a packaged app can't include a browser action or page action. Instead, a packaged app includes at least one HTML file within its .crx file that provides the app's user interface.

Packaged apps are a type of installable web app—a web app that can be installed in Chrome. The other type of installable web app is a hosted app, which is an ordinary web app with a bit of additional metadata.

If you're developing a web app for the Chrome Web Store, you might want to use a packaged app instead of a hosted app if any of the following are true:

• You don't want to run a service to host your app.
• You want to build an app that works really well offline.
• You want tighter integration with Chrome, using the extension APIs.

To learn more about the differences between web apps and websites, extensions and packaged apps, and packaged apps and hosted apps, read these:

• Choosing an App Type
• Thinking in Web Apps
• Extensions, Packaged Apps, and Hosted Apps in the Chrome Web Store

The manifest

A packaged app's manifest can have any field that's available to extensions, except for "browser_action" and "page_action". In addition, a packaged app's manifest must have an "app" field. Here is a typical manifest for a packaged app:

{
  "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": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  }
}

The "app" field has one subfield, "launch", which specifies the launch page for the app—the page (HTML file bundled into the .crx file) that the browser goes to when the user clicks the app's icon in the New Tab page. The "launch" field can contain the following:

local_path:

Required. Specifies the launch page as a relative path referring to a file in the .crx package.

container:

The value "panel" makes the app appear in an app panel. By default, or when you specify "tab", the app appears in a tab.

height:

If the container is set to "panel", this integer specifies the height of the panel in pixels. For example, you might specify "height":400. Note that you don't use quotation marks in the value. This field specifies the height of the area to display contents in; window decorations add a few more pixels to the total height. If the container isn't a panel, this field is ignored.

width:

Similar to "height", but specifies the width of the panel.

Packaged apps usually provide a 16x16 icon to be used as the favicon for tabs that contain app's pages. They also should provide a 128x128 icon, but not a 48x48 icon. See the manifest documentation for the "icons" field for more information.

For further details on what a packaged app's manifest can contain, see the manifest documentation.

What next?

Read the Overview to learn basic concepts about extensions.

Back to top