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