chrome/common/extensions/docs/templates/articles/apps.html

   1 <h1>Packaged Apps</h1>
   2
   3
   4 <p class="warning">
   5 <b>Warning: </b>
   6 All content in this doc refers to the legacy version of packaged apps.
   7 Legacy packaged apps are discontinued, and Chrome will <strong>stop loading them
   8 </strong> in June 2015.
   9 Check out the new version of <a href="../apps/about_apps">Chrome Apps</a> or
  10 read the <a href="https://developer.chrome.com/webstore/migrating">migration
  11 tutorial for legacy packaged apps</a>.
  12 </p>
  13
  14 <p>
  15 This page talks about legacy packaged apps &mdash; how
  16 you implement them,
  17 and how they're different from
  18 extensions and ordinary web apps.
  19 </p>
  20
  21 <h2 id="overview">Overview</h2>
  22
  23 <p>
  24 A legacy packaged app is a web app that's bundled into a <code>.crx</code> file.
  25 In the past, legacy packaged apps could use most of the extension APIs, but
  26 <a href="https://blog.chromium.org/2012/11/restricting-extension-apis-in-legacy.html">
  27 since November 2012</a>, the feature set of legacy packaged apps was reduced.
  28 And in June 2014, discontinuation of legacy packaged apps
  29 <a href="https://blog.chromium.org/2014/06/migrate-your-legacy-packaged-apps-to.html">
  30 was announced</a>; support for them will be removed from Chrome in June 2015.
  31 </p>
  32
  33 <p>
  34 The term "packaged app" used to refer to the "legacy packaged app" as described
  35 in this document, but
  36 <a href="https://blog.chromium.org/2012/08/the-evolution-of-chrome-packaged-apps.html">
  37 since the introduction of Chrome Apps in August 2012</a>, the term "packaged
  38 app" is also used to refer to <a href="../apps/about_apps">Chrome Apps</a>.
  39 Keep this in mind when you read about "packaged apps" in online resources.
  40 </p>
  41
  42 <p>
  43 A close alternative to legacy packaged apps are
  44 <a href="https://developers.google.com/chrome/apps/docs/developers_guide">hosted
  45 apps</a>, which are ordinary web apps with a bit of additional metadata.
  46 To learn more about extensions, packaged apps, and hosted apps, read
  47 <a href="https://developer.chrome.com/webstore/choosing">Choosing an App Type</a>.
  48 </p>
  49
  50 <h2 id="manifest">The manifest</h2>
  51
  52 <p>
  53 A packaged app's manifest can have any field
  54 that's available to extensions,
  55 except for "browser_action" and "page_action".
  56 In addition, a packaged app's manifest <b>must</b>
  57 have an "app" field.
  58 Here is a typical manifest for a packaged app:
  59 </p>
  60
  61 <pre data-filename="manifest.json">
  62 {
  63   "name": "My Awesome Racing Game",
  64   "description": "Enter a world where a Vanagon can beat a Maserati",
  65   "version": "1",
  66   <b>"app": {
  67     "launch": {
  68       "local_path": "main.html"
  69     }
  70   },</b>
  71   "icons": {
  72     "16": "icon_16.png",
  73     "128": "icon_128.png"
  74   }
  75 }
  76 </pre>
  77
  78 <p>
  79 The "app" field has one subfield, "launch",
  80 which specifies the <em>launch page</em> for the app&mdash;the
  81 page (HTML file bundled into the <code>.crx</code> file)
  82 that the browser goes to when the user clicks the app's icon
  83 in the New Tab page.
  84 The "launch" field can contain the following:
  85 </p>
  86
  87 <dl>
  88   <dt>local_path:</dt>
  89     <dd><em>Required.</em>
  90     Specifies the launch page
  91     as a relative path referring to a file
  92     in the <code>.crx</code> package.
  93     </dd>
  94   <dt>container:</dt>
  95     <dd> The value "panel" makes the app appear
  96     in an app panel.
  97     By default, or when you specify "tab",
  98     the app appears in a tab.
  99
 100     <!-- PENDING: In the overview
 101     (or somewhere else before here)
 102     we should show and define both app panels and tabs.
 103     We should link to that place from here. -->
 104     </dd>
 105   <dt>height:</dt>
 106     <dd>
 107     If the container is set to "panel",
 108     this integer specifies the height
 109     of the panel in pixels.
 110     For example, you might specify
 111     <code>"height":400</code>.
 112     Note that you don't use quotation marks in the value.
 113     This field specifies the height of the area
 114     to display contents in;
 115     window decorations add a few more pixels to the total height.
 116     If the container isn't a panel, this field is ignored.
 117     </dd>
 118   <dt>width:</dt>
 119     <dd>
 120     Similar to "height",
 121     but specifies the width of the panel.
 122     </dd>
 123   </dd>
 124 </dl>
 125
 126 <p>
 127 Packaged apps usually provide a 16x16 icon
 128 to be used as the favicon for
 129 tabs that contain app's pages.
 130 They also should provide a 128x128 icon,
 131 but not a 48x48 icon.
 132 See the manifest documentation for the
 133 <a href="manifest/icons">"icons" field</a>
 134 for more information.
 135 </p>
 136
 137 <p>
 138 For further details on what a packaged app's manifest can contain, see the
 139 <a href="manifest">manifest documentation</a>.
 140 </p>
 141
 142 <h2 id="next">What next?</h2>
 143
 144 <p>
 145 Read the <a href="overview">Overview</a> to learn
 146 basic concepts about extensions.
 147 </p>
 148
 149 <p class="backtotop"><a href="#top">Back to top</a></p>