| 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 |