| OLD | NEW |
| 1 <meta name="doc-family" content="apps"> | 1 <meta name="doc-family" content="apps"> |
| 2 <div id="pageData-name" class="pageData">Create Your First App</div> | 2 <div id="pageData-name" class="pageData">Create Your First App</div> |
| 3 <div id="pageData-showTOC" class="pageData">true</div> | 3 <div id="pageData-showTOC" class="pageData">true</div> |
| 4 | 4 |
| 5 <p> | 5 <p> |
| 6 This tutorial walks you through creating your first packaged app. | 6 This tutorial walks you through creating your first packaged app. |
| 7 Packaged apps are structured similarly to extensions | 7 Packaged apps are structured similarly to extensions |
| 8 so current developers will recognize the manifest and packaging methods. | 8 so current developers will recognize the manifest and packaging methods. |
| 9 When you're done, | 9 When you're done, |
| 10 you'll just need to produce a zip file of your code and assets | 10 you'll just need to produce a zip file of your code and assets |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 46 { | 46 { |
| 47 "name": "Hello World!", | 47 "name": "Hello World!", |
| 48 "description": "My first packaged app.", | 48 "description": "My first packaged app.", |
| 49 "manifest_version": 2, | 49 "manifest_version": 2, |
| 50 "version": "0.1", | 50 "version": "0.1", |
| 51 "app": { | 51 "app": { |
| 52 "background": { | 52 "background": { |
| 53 "scripts": ["background.js"] | 53 "scripts": ["background.js"] |
| 54 } | 54 } |
| 55 }, | 55 }, |
| 56 "permissions": ["experimental", "appWindow"], | 56 "permissions": ["experimental", "app.window"], |
| 57 "icons": { "16": "calculator-16.png", "128": "calculator-128.png" } | 57 "icons": { "16": "calculator-16.png", "128": "calculator-128.png" } |
| 58 } | 58 } |
| 59 </pre> | 59 </pre> |
| 60 | 60 |
| 61 <p class="note"> | 61 <p class="note"> |
| 62 <b>Important:</b> | 62 <b>Important:</b> |
| 63 Packaged apps <b>must</b> use | 63 Packaged apps <b>must</b> use |
| 64 <a href="manifestVersion.html">manifest version 2</a>. | 64 <a href="manifestVersion.html">manifest version 2</a>. |
| 65 </p> | 65 </p> |
| 66 | 66 |
| 67 <h2 id="two">Step 2: Create the background script</h2> | 67 <h2 id="two">Step 2: Create the background script</h2> |
| 68 | 68 |
| 69 <p> | 69 <p> |
| 70 Next create a new file called <code>background.js</code> | 70 Next create a new file called <code>background.js</code> |
| 71 with the following content: | 71 with the following content: |
| 72 </p> | 72 </p> |
| 73 | 73 |
| 74 <pre> | 74 <pre> |
| 75 chrome.experimental.app.onLaunched.addListener(function() { | 75 chrome.experimental.app.onLaunched.addListener(function() { |
| 76 chrome.appWindow.create('window.html', { | 76 chrome.app.window.create('window.html', { |
| 77 'width': 400, | 77 'width': 400, |
| 78 'height': 500 | 78 'height': 500 |
| 79 }); | 79 }); |
| 80 }); | 80 }); |
| 81 </pre> | 81 </pre> |
| 82 | 82 |
| 83 <p> | 83 <p> |
| 84 In the above sample code, | 84 In the above sample code, |
| 85 the <a href="app_lifecycle.html#lifecycle">onLaunched event</a> | 85 the <a href="app_lifecycle.html#lifecycle">onLaunched event</a> |
| 86 will be fired when the user starts the app. | 86 will be fired when the user starts the app. |
| (...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 160 <h3>Open new tab and launch</h3> | 160 <h3>Open new tab and launch</h3> |
| 161 | 161 |
| 162 <p> | 162 <p> |
| 163 Once you've loaded your app, | 163 Once you've loaded your app, |
| 164 open a New Tab page | 164 open a New Tab page |
| 165 and click on your new app icon. | 165 and click on your new app icon. |
| 166 </p> | 166 </p> |
| 167 | 167 |
| 168 <p class="backtotop"><a href="#top">Back to top</a></p> | 168 <p class="backtotop"><a href="#top">Back to top</a></p> |
| 169 | 169 |
| OLD | NEW |