Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(165)

Side by Side Diff: chrome/common/extensions/docs/getstarted.html

Issue 437001: Docs polish (Closed)
Patch Set: Add an NPAPI warning Created 11 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/common/extensions/docs/faq.html ('k') | chrome/common/extensions/docs/hosting.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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&amp;t13n_langs=en"></script>
83 95 <script type="text/javascript" src="http://www.google.com/coop/cse/bra nd?form=cse&amp;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>&nbsp;</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&amp;t13n_langs=en"></script>
101 <script type="text/javascript" src="http://www.google.com/coop/cse/brand ?form=cse&amp;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
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
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
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
OLDNEW
« no previous file with comments | « chrome/common/extensions/docs/faq.html ('k') | chrome/common/extensions/docs/hosting.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698