| 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 <h1>Create Your First App</h1> |
| 3 <div id="pageData-showTOC" class="pageData">true</div> | 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 |
| 11 in order to <a href="publish_app.html">publish</a> your app. | 11 in order to <a href="publish_app.html">publish</a> your app. |
| 12 </p> | 12 </p> |
| 13 | 13 |
| (...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 107 </html> | 107 </html> |
| 108 </pre> | 108 </pre> |
| 109 | 109 |
| 110 <h2 id="four">Step 4: Create the icons</h2> | 110 <h2 id="four">Step 4: Create the icons</h2> |
| 111 | 111 |
| 112 <p> | 112 <p> |
| 113 Copy these icons to your app folder: | 113 Copy these icons to your app folder: |
| 114 </p> | 114 </p> |
| 115 | 115 |
| 116 <ul> | 116 <ul> |
| 117 <li><a href="../images/calculator-16.png">calculator-16.png</a></li> | 117 <li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li> |
| 118 <li><a href="../images/calculator-128.png">calculator-128.png</a></li> | 118 <li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li> |
| 119 </ul> | 119 </ul> |
| 120 | 120 |
| 121 <h2 id="five">Step 5: Launch your app</h2> | 121 <h2 id="five">Step 5: Launch your app</h2> |
| 122 | 122 |
| 123 <h3>Enable flags</h3> | 123 <h3>Enable flags</h3> |
| 124 | 124 |
| 125 <p> | 125 <p> |
| 126 Many of the packaged apps APIs are still experimental, | 126 Many of the packaged apps APIs are still experimental, |
| 127 so you should enable experimental APIs | 127 so you should enable experimental APIs |
| 128 so that you can try them out: | 128 so that you can try them out: |
| 129 </p> | 129 </p> |
| 130 | 130 |
| 131 <ul> | 131 <ul> |
| 132 <li>Go to <b>chrome://flags</b>.</li> | 132 <li>Go to <b>chrome://flags</b>.</li> |
| 133 <li>Find "Experimental Extension APIs", | 133 <li>Find "Experimental Extension APIs", |
| 134 and click its "Enable" link.</li> | 134 and click its "Enable" link.</li> |
| 135 <li>Restart Chrome.</li> | 135 <li>Restart Chrome.</li> |
| 136 </ul> | 136 </ul> |
| 137 | 137 |
| 138 <h3>Load your app</h3> | 138 <h3>Load your app</h3> |
| 139 | 139 |
| 140 <p> | 140 <p> |
| 141 To load your app, | 141 To load your app, |
| 142 bring up the apps and extensions management page | 142 bring up the apps and extensions management page |
| 143 by clicking the wrench icon | 143 by clicking the wrench icon |
| 144 <img src="../images/toolsmenu.gif" width="29" height="29" alt="" | 144 <img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt="" |
| 145 style="margin-top:0" /> | 145 style="margin-top:0" /> |
| 146 and choosing <b>Tools > Extensions</b>. | 146 and choosing <b>Tools > Extensions</b>. |
| 147 </p> | 147 </p> |
| 148 | 148 |
| 149 <p> | 149 <p> |
| 150 Make sure the <b>Developer mode</b> | 150 Make sure the <b>Developer mode</b> |
| 151 checkbox has been selected. | 151 checkbox has been selected. |
| 152 </p> | 152 </p> |
| 153 | 153 |
| 154 <p> | 154 <p> |
| 155 Click the <b>Load unpacked extension</b> button, | 155 Click the <b>Load unpacked extension</b> button, |
| 156 navigate to your app's folder | 156 navigate to your app's folder |
| 157 and click <b>OK</b>. | 157 and click <b>OK</b>. |
| 158 </p> | 158 </p> |
| 159 | 159 |
| 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 | |
| OLD | NEW |