OLD | NEW |
1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: | 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: |
2 1) The <head> information in this page is significant, should be uniform | 2 1) The <head> information in this page is significant, should be uniform |
3 across api docs and should be edited only with knowledge of the | 3 across api docs and should be edited only with knowledge of the |
4 templating mechanism. | 4 templating mechanism. |
5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a | 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a |
6 browser, it will be re-generated from the template, json schema and | 6 browser, it will be re-generated from the template, json schema and |
7 authored overview content. | 7 authored overview content. |
8 4) The <body>.innerHTML is also generated by an offline step so that this | 8 4) The <body>.innerHTML is also generated by an offline step so that this |
9 page may easily be indexed by search engines. | 9 page may easily be indexed by search engines. |
10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> | 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> |
(...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
104 <li><a href="background_pages.html">Background Pages</a></li> | 104 <li><a href="background_pages.html">Background Pages</a></li> |
105 <li><a href="content_scripts.html">Content Scripts</a></li> | 105 <li><a href="content_scripts.html">Content Scripts</a></li> |
106 <li><a href="events.html">Events</a></li> | 106 <li><a href="events.html">Events</a></li> |
107 <li><a href="tabs.html">Tabs</a></li> | 107 <li><a href="tabs.html">Tabs</a></li> |
108 <li><a href="windows.html">Windows</a></li> | 108 <li><a href="windows.html">Windows</a></li> |
109 <li><a href="bookmarks.html">Bookmarks</a></li> | 109 <li><a href="bookmarks.html">Bookmarks</a></li> |
110 <li><a href="themes.html">Themes</a></li> | 110 <li><a href="themes.html">Themes</a></li> |
111 <li><a href="npapi.html">NPAPI Plugins</a></li> | 111 <li><a href="npapi.html">NPAPI Plugins</a></li> |
112 <li><a href="xhr.html">Cross-Origin XHR</a></li> | 112 <li><a href="xhr.html">Cross-Origin XHR</a></li> |
113 <li><a href="packaging.html">Packaging</a></li> | 113 <li><a href="packaging.html">Packaging</a></li> |
114 <li>Autoupdate</li> | 114 <li><a href="autoupdate.html">Autoupdate</a></li> |
115 </ul> | 115 </ul> |
116 </li> | 116 </li> |
117 <li><a href="tutorials.html"><div>Tutorials</div></a> | 117 <li><a href="tutorials.html"><div>Tutorials</div></a> |
118 <ul> | 118 <ul> |
119 <li><a href="tut_debugging.html">Debugging</a></li> | 119 <li><a href="tut_debugging.html">Debugging</a></li> |
120 </ul> | 120 </ul> |
121 </li> | 121 </li> |
122 <li>Reference | 122 <li>Reference |
123 <ul> | 123 <ul> |
124 <li> Formats | 124 <li> Formats |
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
212 </ol> | 212 </ol> |
213 </div> | 213 </div> |
214 <!-- /TABLE OF CONTENTS --> | 214 <!-- /TABLE OF CONTENTS --> |
215 | 215 |
216 <!-- STATIC CONTENT PLACEHOLDER --> | 216 <!-- STATIC CONTENT PLACEHOLDER --> |
217 <div id="static"><div id="pageData-title" class="pageData">Tutorial: Get
ting Started (Hello, World!)</div> | 217 <div id="static"><div id="pageData-title" class="pageData">Tutorial: Get
ting Started (Hello, World!)</div> |
218 <div id="pageData-showTOC" class="pageData">true</div> | 218 <div id="pageData-showTOC" class="pageData">true</div> |
219 | 219 |
220 <p> | 220 <p> |
221 This tutorial walks you through creating a simple extension. | 221 This tutorial walks you through creating a simple extension. |
222 To complete this tutorial, you must have Windows. | 222 You'll add a button to Google Chrome |
223 (Linux and Mac don't yet support extensions.) | 223 that, when clicked, displays an automatically generated page. |
| 224 The button and page will look something like this: |
224 </p> | 225 </p> |
225 | 226 |
| 227 <img src="images/hello_world-page-small.gif" width="291" height="184" alt="a win
dow with a grid of images related to HELLO WORLD"> |
| 228 |
226 <h2 id="browser">Get your browser ready</h2> | 229 <h2 id="browser">Get your browser ready</h2> |
227 | 230 |
228 <p>To develop extensions for Google Chrome, | 231 <p>To develop extensions for Google Chrome, |
229 you'll need to <a href="http://dev.chromium.org/getting-involved/dev-channel">su
bscribe | 232 you need to <a href="http://dev.chromium.org/getting-involved/dev-channel">subsc
ribe |
230 to the dev channel</a> of Google Chrome for Windows. | 233 to the dev channel</a> of Google Chrome for Windows. |
| 234 </p> |
231 | 235 |
232 </p><p><b>Note:</b> This tutorial requires Windows. You can try it on Linux and
OS X, and it may work, but in general the extensions support is quite a bit less
stable on those platforms. We're working hard to bring them up to speed. | 236 <p> |
| 237 <b>Note:</b> This tutorial requires Windows. |
| 238 You can try it on Linux and OS X, and it might work, |
| 239 but the extensions support is less stable on those platforms. |
| 240 We're working hard to bring them up to speed. |
| 241 </p> |
233 | 242 |
234 </p><h2 id="load">Create and load an extension</h2> | 243 <h2 id="load">Create and load an extension</h2> |
235 <p> | 244 <p> |
236 In this section, you'll write a <em>toolstrip</em> — | 245 In this section, you'll write a <em>toolstrip</em> — |
237 an extension | 246 an extension |
238 that puts a bit of UI into the <em>toolbar</em> | 247 that puts a bit of UI into the <em>toolbar</em> |
239 at the bottom of the Google Chrome window. | 248 at the bottom of the Google Chrome window. |
240 </p> | 249 </p> |
241 | 250 |
242 <ol> | 251 <ol> |
243 <li> | 252 <li> |
244 Create a folder somewhere on your computer to contain your extension's code. | 253 Create a folder somewhere on your computer to contain your extension's code. |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
276 </blockquote> | 285 </blockquote> |
277 </li> | 286 </li> |
278 | 287 |
279 <li> | 288 <li> |
280 Click the <b>Load unpacked extension</b> button. | 289 Click the <b>Load unpacked extension</b> button. |
281 A file dialog appears. | 290 A file dialog appears. |
282 </li> | 291 </li> |
283 | 292 |
284 <li> | 293 <li> |
285 In the file dialog, | 294 In the file dialog, |
286 navigate to your extension's directory | 295 navigate to your extension's folder |
287 (<code>c:\myext</code>, for example) | 296 (<code>c:\myext</code>, for example) |
288 and click the <b>OK</b> button. | 297 and click the <b>OK</b> button. |
289 </li> | 298 </li> |
290 </ol> </li> | 299 </ol> </li> |
291 </ol> | 300 </ol> |
292 | 301 |
293 <p> | 302 <p> |
294 If your extension is valid, | 303 If your extension is valid, |
295 information about it | 304 information about it |
296 appears in the <b>Installed extensions</b> part | 305 appears in the <b>Installed extensions</b> part |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
352 <span>Hello, World!</span> | 361 <span>Hello, World!</span> |
353 </div></pre> | 362 </div></pre> |
354 </li> | 363 </li> |
355 <li> | 364 <li> |
356 Restart the browser to load the new version of the extension.</li> | 365 Restart the browser to load the new version of the extension.</li> |
357 <li>Click the button. | 366 <li>Click the button. |
358 A window should come up that displays <code>hello_world.html</code>. </li> | 367 A window should come up that displays <code>hello_world.html</code>. </li> |
359 </ol> | 368 </ol> |
360 <p> It should look something like this:</p> | 369 <p> It should look something like this:</p> |
361 | 370 |
362 <img src="images/hello_world-page.gif" alt="a window with a grid of images relat
ed to HELLO WORLD"> | 371 <img src="images/hello_world-page.gif" width="583" height="368" alt="a window wi
th a grid of images related to HELLO WORLD"> |
363 | 372 |
364 <p> If you don't see that page, | 373 <p> If you don't see that page, |
365 try the instructions again, | 374 try the instructions again, |
366 following them exactly. | 375 following them exactly. |
367 Don't try loading an HTML file that isn't in the extension's folder — | 376 Don't try loading an HTML file that isn't in the extension's folder — |
368 it won't work! </p> | 377 it won't work! </p> |
369 | 378 |
370 <h2 id="summary">Now what?</h2> | 379 <h2 id="summary">Now what?</h2> |
371 | 380 |
372 <p class="comment"> | 381 <p class="comment"> |
(...skipping 179 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
552 Attribution 3.0 License</a>, and code samples are licensed under the | 561 Attribution 3.0 License</a>, and code samples are licensed under the |
553 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD Lic
ense</a>. | 562 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD Lic
ense</a>. |
554 </p> | 563 </p> |
555 <p> | 564 <p> |
556 ©2009 Google | 565 ©2009 Google |
557 </p> | 566 </p> |
558 </div> <!-- /pageFooter --> | 567 </div> <!-- /pageFooter --> |
559 </div> <!-- /container --> | 568 </div> <!-- /container --> |
560 </body></html> | 569 </body></html> |
561 | 570 |
OLD | NEW |