Home | History | Annotate | Download | only in static 
      1 <div id="pageData-name" class="pageData">Packaged Apps</div>
      2 <div id="pageData-showTOC" class="pageData">true</div>
      3 
      4 <p>
      5 This page talks about packaged apps&mdash;how
      6 you implement them,
      7 and how they're different from
      8 extensions and ordinary web apps.
      9 </p>
     10 
     11 
     12 <h2 id="overview">Overview</h2>
     13 
     14 <p>
     15 A packaged app is a web app
     16 that's bundled into a <code>.crx</code> file
     17 and can use Chrome extension features.
     18 You build a packaged app just like you build an extension,
     19 except that a packaged app can't include a
     20 <a href="browserAction.html">browser action</a> or
     21 <a href="pageAction.html">page action</a>.
     22 Instead, a packaged app includes at least one HTML file
     23 within its <code>.crx</code> file
     24 that provides the app's user interface.
     25 </p>
     26 
     27 <p>
     28 Packaged apps are a type of
     29 <a href="http://code.google.com/chrome/apps/">installable web app</a>&mdash;a
     30 web app that can be installed in Chrome.
     31 The other type of installable web app is a
     32 <a href="http://code.google.com/chrome/apps/docs/developers_guide.html">hosted app</a>,
     33 which is an ordinary web app with a bit of additional metadata.
     34 </p>
     35 
     36 <p>
     37 If you're developing a web app for the Chrome Web Store,
     38 you might want to use a packaged app
     39 instead of a hosted app if any of the following are true:
     40 </p>
     41 
     42 <ul>
     43   <li>
     44     You don't want to run a service to host your app.
     45   </li>
     46   <li>
     47     You want to build an app that works really well offline.
     48   </li>
     49   <li>
     50     You want tighter integration with Chrome,
     51     using the extension APIs.
     52   </li>
     53 </ul>
     54 
     55 <p>
     56 To learn more about
     57 the differences between web apps and websites,
     58 extensions and packaged apps, and packaged apps and hosted apps,
     59 read these:
     60 </p>
     61 
     62 <ul>
     63   <li> <a href="http://code.google.com/chrome/webstore/docs/choosing.html">Choosing an App Type</a> </li>
     64   <li> <a href="http://code.google.com/chrome/apps/articles/thinking_in_web_apps.html">Thinking in Web Apps</a> </li>
     65   <li> <a href="http://code.google.com/chrome/webstore/articles/apps_vs_extensions.html">Extensions, Packaged Apps, and Hosted Apps in the Chrome Web Store</a> </li>
     66 </ul>
     67 
     68 
     69 <h2 id="manifest"> The manifest </h2>
     70 
     71 <p>
     72 A packaged app's manifest can have any field
     73 that's available to extensions,
     74 except for "browser_action" and "page_action".
     75 In addition, a packaged app's manifest <b>must</b>
     76 have an "app" field.
     77 Here is a typical manifest for a packaged app:
     78 </p>
     79 
     80 <pre>
     81 {
     82   "name": "My Awesome Racing Game",
     83   "description": "Enter a world where a Vanagon can beat a Maserati",
     84   "version": "1",
     85   <b>"app": {
     86     "launch": {
     87       "local_path": "main.html"
     88     }
     89   },</b>
     90   "icons": {
     91     "16": "icon_16.png",
     92     "128": "icon_128.png"
     93   }
     94 }
     95 </pre>
     96 
     97 <p>
     98 The "app" field has one subfield, "launch",
     99 which specifies the <em>launch page</em> for the app&mdash;the
    100 page (HTML file bundled into the <code>.crx</code> file)
    101 that the browser goes to when the user clicks the app's icon
    102 in the New Tab page.
    103 The "launch" field can contain the following:
    104 </p>
    105 
    106 <dl>
    107   <dt>local_path:</dt>
    108     <dd><em>Required.</em>
    109     Specifies the launch page
    110     as a relative path referring to a file
    111     in the <code>.crx</code> package.
    112     </dd>
    113   <dt>container:</dt>
    114     <dd> The value "panel" makes the app appear
    115     in an app panel.
    116     By default, or when you specify "tab",
    117     the app appears in a tab.
    118 
    119     <!-- PENDING: In the overview
    120     (or somewhere else before here)
    121     we should show and define both app panels and tabs.
    122     We should link to that place from here. -->
    123     </dd>
    124   <dt>height:</dt>
    125     <dd>
    126     If the container is set to "panel",
    127     this integer specifies the height
    128     of the panel in pixels.
    129     For example, you might specify
    130     <code>"height":400</code>.
    131     Note that you don't use quotation marks in the value.
    132     This field specifies the height of the area
    133     to display contents in;
    134     window decorations add a few more pixels to the total height.
    135     If the container isn't a panel, this field is ignored.
    136     </dd>
    137   <dt>width:</dt>
    138     <dd>
    139     Similar to "height",
    140     but specifies the width of the panel.
    141     </dd>
    142   </dd>
    143 </dl>
    144 
    145 <p>
    146 Packaged apps usually provide a 16x16 icon
    147 to be used as the favicon for
    148 tabs that contain app's pages.
    149 They also should provide a 128x128 icon,
    150 but not a 48x48 icon.
    151 See the manifest documentation for the
    152 <a href="manifest.html#icons">"icons" field</a>
    153 for more information.
    154 </p>
    155 
    156 <p>
    157 For further details on what a packaged app's manifest can contain, see the
    158 <a href="manifest.html">manifest documentation</a>.
    159 </p>
    160 
    161 <h2 id="next">What next?</h2>
    162 
    163 <p>
    164 Read the <a href="overview.html">Overview</a> to learn
    165 basic concepts about extensions.
    166 </p>
    167 
    168 <p class="backtotop"><a href="#top">Back to top</a></p>
    169 
    170