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