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 |