| 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> |
| 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| 12 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> | 12 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> |
| 13 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> | 13 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> |
| 14 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla
te_compiled.js"> | 14 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla
te_compiled.js"> |
| 15 </script> | 15 </script> |
| 16 <script type="text/javascript" src="js/api_page_generator.js"></script> | 16 <script type="text/javascript" src="js/api_page_generator.js"></script> |
| 17 <script type="text/javascript" src="js/bootstrap.js"></script> | 17 <script type="text/javascript" src="js/bootstrap.js"></script> |
| 18 <title>Tutorial: Getting Started (Hello, World!)</title></head><body> <div id
="gc-container" class="labs"> | 18 <title>Tutorial: Getting Started (Hello, World!) - Google Chrome Extensions -
Google Code</title></head><body> <div id="gc-container" class="labs"> |
| 19 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> | 19 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> |
| 20 <!-- In particular, sub-templates that recurse, must be used by allowing | 20 <!-- In particular, sub-templates that recurse, must be used by allowing |
| 21 jstemplate to make a copy of the template in this section which | 21 jstemplate to make a copy of the template in this section which |
| 22 are not operated on by way of the jsskip="true" --> | 22 are not operated on by way of the jsskip="true" --> |
| 23 <div style="display:none"> | 23 <div style="display:none"> |
| 24 | 24 |
| 25 <!-- VALUE --> | 25 <!-- VALUE --> |
| 26 <div id="valueTemplate"> | 26 <div id="valueTemplate"> |
| 27 <dt> | 27 <dt> |
| 28 <var>paramName</var> | 28 <var>paramName</var> |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 67 </div> <!-- /VALUE --> | 67 </div> <!-- /VALUE --> |
| 68 | 68 |
| 69 </div> <!-- /SUBTEMPLATES --> | 69 </div> <!-- /SUBTEMPLATES --> |
| 70 | 70 |
| 71 <a id="top"></a> | 71 <a id="top"></a> |
| 72 <div id="skipto"> | 72 <div id="skipto"> |
| 73 <a href="#gc-pagecontent">Skip to page content</a> | 73 <a href="#gc-pagecontent">Skip to page content</a> |
| 74 <a href="#gc-toc">Skip to main navigation</a> | 74 <a href="#gc-toc">Skip to main navigation</a> |
| 75 </div> | 75 </div> |
| 76 <!-- API HEADER --> | 76 <!-- API HEADER --> |
| 77 <div id="gc-header"> | 77 <table id="header" width="100%" cellspacing="0" border="0"> |
| 78 <div id="logo"> | 78 <tbody><tr> |
| 79 <td valign="middle"><img src="images/code_labs_logo.gif" height="43" wid
th="161" alt="Google Code Labs" style="border:0; margin:0;"></td> |
| 80 <td valign="middle" width="100%" style="padding-left:0.6em;"> |
| 81 <form action="http://www.google.com/cse" id="cse" style="margin-top:0.
5em"> |
| 82 <div id="gsc-search-box"> |
| 83 <input type="hidden" name="cx" value="002967670403910741006:61_cvz
fqtno"> |
| 84 <input type="hidden" name="ie" value="UTF-8"> |
| 85 <input type="text" name="q" size="55"> |
| 86 <input class="gsc-search-button" type="submit" name="sa" value="Se
arch"> |
| 87 <br> |
| 88 <span class="greytext">e.g. "ajax apis" or "open source"</span> |
| 89 </div> |
| 90 </form> |
| 79 | 91 |
| 80 | 92 <script type="text/javascript" src="http://www.google.com/jsapi"></scr
ipt> |
| 81 <img src="images/code_labs_logo.gif" height="43" width="161" alt="Googl
e Code Labs" style="border:0;"> | 93 <script type="text/javascript">google.load("elements", "1", {packages:
"transliteration"});</script> |
| 82 | 94 <script type="text/javascript" src="http://www.google.com/coop/cse/t13
n?form=cse&t13n_langs=en"></script> |
| 83 | 95 <script type="text/javascript" src="http://www.google.com/coop/cse/bra
nd?form=cse&lang=en"></script> |
| 84 </div> | 96 </td> |
| 85 <div id="search"> | 97 </tr> |
| 86 <div id="searchForm" class="searchForm"> | 98 </tbody></table> |
| 87 <form action="http://www.google.com/cse" id="cse"> | |
| 88 <div id="gsc-search-box"> | |
| 89 <input type="hidden" name="cx" value="002967670403910741006:61_cvzfq
tno"> | |
| 90 <input type="hidden" name="ie" value="UTF-8"> | |
| 91 <input type="text" name="q" size="31"> | |
| 92 <input class="gsc-search-button" type="submit" name="sa" value="Sear
ch"> | |
| 93 </div> | |
| 94 </form> | |
| 95 <p> </p> | |
| 96 </div> <!-- end searchForm --> | |
| 97 | |
| 98 <script type="text/javascript" src="http://www.google.com/jsapi"></scrip
t> | |
| 99 <script type="text/javascript">google.load("elements", "1", {packages: "
transliteration"});</script> | |
| 100 <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?
form=cse&t13n_langs=en"></script> | |
| 101 <script type="text/javascript" src="http://www.google.com/coop/cse/brand
?form=cse&lang=en"></script> | |
| 102 </div> <!-- end search --> | |
| 103 </div> <!-- end gc-header --> | |
| 104 | 99 |
| 105 <div id="codesiteContent"> | 100 <div id="codesiteContent"> |
| 106 | 101 |
| 107 <a id="gc-topnav-anchor"></a> | 102 <a id="gc-topnav-anchor"></a> |
| 108 <div id="gc-topnav"> | 103 <div id="gc-topnav"> |
| 109 <h1>Google Chrome Extensions (<a href="/labs/">Labs</a>)</h1> | 104 <h1>Google Chrome Extensions (<a href="/labs/">Labs</a>)</h1> |
| 110 <ul id="home" class="gc-topnav-tabs"> | 105 <ul id="home" class="gc-topnav-tabs"> |
| 111 <li id="home_link"> | 106 <li id="home_link"> |
| 112 <a href="index.html" class="selected" title="Google Chrome Extension
s documentation home page">Home</a> | 107 <a href="index.html" class="selected" title="Google Chrome Extension
s documentation home page">Home</a> |
| 113 </li> | 108 </li> |
| 114 <li id="blog_link"> | 109 <li id="group_link"> |
| 115 <a href="http://blog.chromium.org/" title="Chromium blog">Blog</a> | 110 <a href="http://groups.google.com/group/chromium-extensions" title="
Google Chrome Extensions mailing list">Group</a> |
| 116 </li> | 111 </li> |
| 117 <li id="faq_link"> | 112 <li id="samples_link"> |
| 118 <a href="faq.html" title="Google Chrome Extensions FAQ">FAQ</a> | 113 <a href="samples.html" title="Google Chrome Extensions samples">Samp
les</a> |
| 119 </li> | 114 </li> |
| 120 <li id="group_link"> | 115 <!-- |
| 121 <a href="http://groups.google.com/group/chromium-extensions" title="
Chromium-Extensions group">Group</a> | |
| 122 </li> | |
| 123 <li id="terms_link"> | 116 <li id="terms_link"> |
| 124 Terms | 117 Terms |
| 125 </li> | 118 </li> |
| 119 --> |
| 126 </ul> | 120 </ul> |
| 127 </div> <!-- end gc-topnav --> | 121 </div> <!-- end gc-topnav --> |
| 128 | 122 |
| 129 <div class="g-section g-tpl-170"> | 123 <div class="g-section g-tpl-170"> |
| 130 <!-- SIDENAV --> | 124 <!-- SIDENAV --> |
| 131 <div class="g-unit g-first" id="gc-toc"> | 125 <div class="g-unit g-first" id="gc-toc"> |
| 132 <ul> | 126 <ul> |
| 133 <li><a href="index.html">Home</a></li> | 127 <li><a href="index.html">Home</a></li> |
| 134 <li class="leftNavSelected">Getting Started</li> | 128 <li class="leftNavSelected">Getting Started</li> |
| 135 <li><a href="overview.html">Overview</a></li> | 129 <li><a href="overview.html">Overview</a></li> |
| (...skipping 146 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 282 The icon and page will look something like this: | 276 The icon and page will look something like this: |
| 283 </p> | 277 </p> |
| 284 | 278 |
| 285 <img src="images/hello-world-small.png" width="300" height="221" alt="a window w
ith a grid of images related to HELLO WORLD"> | 279 <img src="images/hello-world-small.png" width="300" height="221" alt="a window w
ith a grid of images related to HELLO WORLD"> |
| 286 | 280 |
| 287 | 281 |
| 288 <h2 id="browser">Get your browser ready</h2> | 282 <h2 id="browser">Get your browser ready</h2> |
| 289 | 283 |
| 290 <p>To develop extensions for Google Chrome, | 284 <p>To develop extensions for Google Chrome, |
| 291 you need to <a href="http://dev.chromium.org/getting-involved/dev-channel">subsc
ribe | 285 you need to <a href="http://dev.chromium.org/getting-involved/dev-channel">subsc
ribe |
| 292 to the Dev or Beta channel</a> of Google Chrome for Windows. Extensions aren't y
et available in the stable channel. | 286 to the Dev Channel</a> of Google Chrome. Extensions aren't yet available in the
beta or stable channels (but we're working hard on that!). |
| 293 </p> | |
| 294 | |
| 295 <p> | |
| 296 <b>Note:</b> This tutorial requires Windows. | |
| 297 You can try it on Linux and OS X, and it might work, | |
| 298 but the extensions support is less stable on those platforms. | |
| 299 We're working hard to bring them up to speed. | |
| 300 </p> | 287 </p> |
| 301 | 288 |
| 302 <h2 id="load">Create and load an extension</h2> | 289 <h2 id="load">Create and load an extension</h2> |
| 303 <p> | 290 <p> |
| 304 In this section, you'll write an extension | 291 In this section, you'll write an extension |
| 305 that adds a <em>browser action</em> | 292 that adds a <em>browser action</em> |
| 306 to the toolbar of Google Chrome. | 293 to the toolbar of Google Chrome. |
| 307 </p> | 294 </p> |
| 308 | 295 |
| 309 <ol> | 296 <ol> |
| 310 <li> | 297 <li> |
| 311 Create a folder somewhere on your computer to contain your extension's code. | 298 Create a folder somewhere on your computer to contain your extension's code. |
| 312 We'll assume the folder is located at | |
| 313 <strong><code>c:\myext</code></strong>, | |
| 314 but it can be anywhere. | |
| 315 </li> | 299 </li> |
| 316 <li> | 300 <li> |
| 317 Inside your extension's folder, | 301 Inside your extension's folder, |
| 318 create a text file called <strong><code>manifest.json</code></strong>, | 302 create a text file called <strong><code>manifest.json</code></strong>, |
| 319 and put this in it: | 303 and put this in it: |
| 320 <pre>{ | 304 <pre>{ |
| 321 "name": "My First Extension", | 305 "name": "My First Extension", |
| 322 "version": "1.0", | 306 "version": "1.0", |
| 323 "description": "The first extension that I made.", | 307 "description": "The first extension that I made.", |
| 324 "browser_action": { | 308 "browser_action": { |
| (...skipping 30 matching lines...) Expand all Loading... |
| 355 </li> | 339 </li> |
| 356 | 340 |
| 357 <li> | 341 <li> |
| 358 Click the <b>Load extension...</b> button. | 342 Click the <b>Load extension...</b> button. |
| 359 A file dialog appears. | 343 A file dialog appears. |
| 360 </li> | 344 </li> |
| 361 | 345 |
| 362 <li> | 346 <li> |
| 363 In the file dialog, | 347 In the file dialog, |
| 364 navigate to your extension's folder | 348 navigate to your extension's folder |
| 365 (<code>c:\myext</code>, for example) | |
| 366 and click <b>OK</b>. | 349 and click <b>OK</b>. |
| 367 </li> | 350 </li> |
| 368 </ol> </li> | 351 </ol> </li> |
| 369 </ol> | 352 </ol> |
| 370 | 353 |
| 371 <p> | 354 <p> |
| 372 If your extension is valid, | 355 If your extension is valid, |
| 373 its icon appears next to the address bar, | 356 its icon appears next to the address bar, |
| 374 and information about the extension | 357 and information about the extension |
| 375 appears in the extensions page, | 358 appears in the extensions page, |
| (...skipping 251 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 627 urchinTracker(); | 610 urchinTracker(); |
| 628 } | 611 } |
| 629 catch(e) {/* urchinTracker not available. */} | 612 catch(e) {/* urchinTracker not available. */} |
| 630 </script> | 613 </script> |
| 631 <!-- end analytics --> | 614 <!-- end analytics --> |
| 632 </div> | 615 </div> |
| 633 </div> <!-- /gc-footer --> | 616 </div> <!-- /gc-footer --> |
| 634 </div> <!-- /gc-container --> | 617 </div> <!-- /gc-container --> |
| 635 </body></html> | 618 </body></html> |
| 636 | 619 |
| OLD | NEW |