OLD | NEW |
1 <meta name="doc-family" content="apps"> | 1 <meta name="doc-family" content="apps"> |
2 <h1>Create Your First App</h1> | 2 <h1>Create Your First App</h1> |
3 | 3 |
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 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
111 Copy these icons to your app folder: | 111 Copy these icons to your app folder: |
112 </p> | 112 </p> |
113 | 113 |
114 <ul> | 114 <ul> |
115 <li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li> | 115 <li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li> |
116 <li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li> | 116 <li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li> |
117 </ul> | 117 </ul> |
118 | 118 |
119 <h2 id="five">Step 5: Launch your app</h2> | 119 <h2 id="five">Step 5: Launch your app</h2> |
120 | 120 |
121 <h3>Enable flags</h3> | 121 <h3 id="enable">Enable flags</h3> |
122 | 122 |
123 <p> | 123 <p> |
124 Many of the packaged apps APIs are still experimental, | 124 Many of the packaged apps APIs are still experimental, |
125 so you should enable experimental APIs | 125 so you should enable experimental APIs |
126 so that you can try them out: | 126 so that you can try them out: |
127 </p> | 127 </p> |
128 | 128 |
129 <ul> | 129 <ul> |
130 <li>Go to <b>chrome://flags</b>.</li> | 130 <li>Go to <b>chrome://flags</b>.</li> |
131 <li>Find "Experimental Extension APIs", | 131 <li>Find "Experimental Extension APIs", |
132 and click its "Enable" link.</li> | 132 and click its "Enable" link.</li> |
133 <li>Restart Chrome.</li> | 133 <li>Restart Chrome.</li> |
134 </ul> | 134 </ul> |
135 | 135 |
136 <h3>Load your app</h3> | 136 <h3 id="load">Load your app</h3> |
137 | 137 |
138 <p> | 138 <p> |
139 To load your app, | 139 To load your app, |
140 bring up the apps and extensions management page | 140 bring up the apps and extensions management page |
141 by clicking the wrench icon | 141 by clicking the wrench icon |
142 <img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt="" | 142 <img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt="" |
143 style="margin-top:0" /> | 143 style="margin-top:0" /> |
144 and choosing <b>Tools > Extensions</b>. | 144 and choosing <b>Tools > Extensions</b>. |
145 </p> | 145 </p> |
146 | 146 |
147 <p> | 147 <p> |
148 Make sure the <b>Developer mode</b> | 148 Make sure the <b>Developer mode</b> |
149 checkbox has been selected. | 149 checkbox has been selected. |
150 </p> | 150 </p> |
151 | 151 |
152 <p> | 152 <p> |
153 Click the <b>Load unpacked extension</b> button, | 153 Click the <b>Load unpacked extension</b> button, |
154 navigate to your app's folder | 154 navigate to your app's folder |
155 and click <b>OK</b>. | 155 and click <b>OK</b>. |
156 </p> | 156 </p> |
157 | 157 |
158 <h3>Open new tab and launch</h3> | 158 <h3 id="open">Open new tab and launch</h3> |
159 | 159 |
160 <p> | 160 <p> |
161 Once you've loaded your app, | 161 Once you've loaded your app, |
162 open a New Tab page | 162 open a New Tab page |
163 and click on your new app icon. | 163 and click on your new app icon. |
164 </p> | 164 </p> |
165 | 165 |
166 <p class="backtotop"><a href="#top">Back to top</a></p> | 166 <p class="backtotop"><a href="#top">Back to top</a></p> |
OLD | NEW |