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 |