| OLD | NEW |
|---|
| (Empty) | |
| 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—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>—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 a
pp</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 The following articles can help you understand |
| 57 the differences between web apps and websites, |
| 58 extensions and packaged apps, and packaged apps and hosted apps: |
| 59 </p> |
| 60 |
| 61 <ul> |
| 62 <li> <a href="http://code.google.com/chrome/apps/articles/thinking_in_web_apps
.html">Thinking in Web Apps</a> </li> |
| 63 <li> <a href="http://codesite-staging:29006/chrome/webstore/articles/apps_vs_e
xtensions.html">Extensions, Packaged Apps, and Hosted Apps in the Chrome Web Sto
re</a> </li> |
| 64 </ul> |
| 65 |
| 66 |
| 67 <h2 id="manifest"> The manifest </h2> |
| 68 |
| 69 <p> |
| 70 A packaged app's manifest can have any field |
| 71 that's available to extensions, |
| 72 except for "browser_action" and "page_action". |
| 73 In addition, a packaged app's manifest <b>must</b> |
| 74 have an "app" field. |
| 75 Here is a typical manifest for a packaged app: |
| 76 </p> |
| 77 |
| 78 <pre> |
| 79 { |
| 80 "name": "My Awesome Racing Game", |
| 81 "description": "Enter a world where a Vanagon can beat a Maserati", |
| 82 "version": "1", |
| 83 <b>"app": { |
| 84 "launch": { |
| 85 "local_path": "main.html" |
| 86 } |
| 87 },</b> |
| 88 "icons": { |
| 89 "16": "icon_16.png", |
| 90 "128": "icon_128.png" |
| 91 }, |
| 92 "permissions": [ |
| 93 "unlimitedStorage", |
| 94 "notifications" |
| 95 ] |
| 96 } |
| 97 </pre> |
| 98 |
| 99 <p> |
| 100 The "app" field has one subfield, "launch", |
| 101 which specifies the <em>launch page</em> for the app—the |
| 102 page (HTML file bundled into the <code>.crx</code> file) |
| 103 that the browser goes to when the user clicks the app's icon |
| 104 in the New Tab page. |
| 105 The "launch" field can contain the following: |
| 106 </p> |
| 107 |
| 108 <dl> |
| 109 <dt>local_path:</dt> |
| 110 <dd><em>Required.</em> |
| 111 Specifies the launch page |
| 112 as a relative path referring to a file |
| 113 in the <code>.crx</code> package. |
| 114 </dd> |
| 115 <dt>container:</dt> |
| 116 <dd> The value "panel" makes the app appear |
| 117 in an app panel. |
| 118 By default, or when you specify "tab", |
| 119 the app appears in a tab. |
| 120 |
| 121 <!-- PENDING: In the overview |
| 122 (or somewhere else before here) |
| 123 we should show and define both app panels and tabs. |
| 124 We should link to that place from here. --> |
| 125 </dd> |
| 126 <dt>height:</dt> |
| 127 <dd> |
| 128 If the container is set to "panel", |
| 129 this integer specifies the height |
| 130 of the panel in pixels. |
| 131 For example, you might specify |
| 132 <code>"height":400</code>. |
| 133 Note that you don't use quotation marks in the value. |
| 134 This field specifies the height of the area |
| 135 to display contents in; |
| 136 window decorations add a few more pixels to the total height. |
| 137 If the container isn't a panel, this field is ignored. |
| 138 </dd> |
| 139 <dt>width:</dt> |
| 140 <dd> |
| 141 Similar to "height", |
| 142 but specifies the width of the panel. |
| 143 </dd> |
| 144 </dd> |
| 145 </dl> |
| 146 |
| 147 <p> |
| 148 Packaged apps usually provide a 16x16 icon |
| 149 to be used as the favicon for |
| 150 tabs that contain app's pages. |
| 151 They also should provide a 128x128 icon, |
| 152 but not a 48x48 icon. |
| 153 See the manifest documentation for the |
| 154 <a href="manifest.html#icons">"icons" field</a> |
| 155 for more information. |
| 156 </p> |
| 157 |
| 158 <p> |
| 159 For further details on what a packaged app's manifest can contain, see the |
| 160 <a href="manifest.html">manifest documentation</a>. |
| 161 </p> |
| 162 |
| 163 <h2 id="next">What next?</h2> |
| 164 |
| 165 <p> |
| 166 Read the <a href="overview.html">Overview</a> to learn |
| 167 basic concepts about extensions. |
| 168 </p> |
| 169 |
| 170 <p class="backtotop"><a href="#top">Back to top</a></p> |
| 171 |
| OLD | NEW |
|---|
Chromium Code Reviews
