| OLD | NEW |
| 1 <div id="pageData-title" class="pageData">Tutorial: Getting Started (Hello, Worl
d!)</div> | 1 <div id="pageData-title" class="pageData">Tutorial: Getting Started (Hello, Worl
d!)</div> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> | 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 3 | 3 |
| 4 <p> | 4 <p> |
| 5 This tutorial walks you through creating a simple extension. | 5 This tutorial walks you through creating a simple extension. |
| 6 You'll add an icon to Google Chrome | 6 You'll add an icon to Google Chrome |
| 7 that, when clicked, displays an automatically generated page. | 7 that, when clicked, displays an automatically generated page. |
| 8 The icon and page will look something like this: | 8 The icon and page will look something like this: |
| 9 </p> | 9 </p> |
| 10 | 10 |
| 11 <img src="images/hello-world-small.png" | 11 <img src="images/hello-world-small.png" |
| 12 width="300" height="221" | 12 width="300" height="221" |
| 13 alt="a window with a grid of images related to HELLO WORLD" /> | 13 alt="a window with a grid of images related to HELLO WORLD" /> |
| 14 | 14 |
| 15 | 15 |
| 16 <h2 id="browser">Get your browser ready</h2> | 16 <h2 id="browser">Get your browser ready</h2> |
| 17 | 17 |
| 18 <p>To develop extensions for Google Chrome, | 18 <p>To develop extensions for Google Chrome, |
| 19 you need to <a href="http://dev.chromium.org/getting-involved/dev-channel">subsc
ribe | 19 you need to <a href="http://dev.chromium.org/getting-involved/dev-channel">subsc
ribe |
| 20 to the Dev or Beta channel</a> of Google Chrome for Windows. Extensions aren't y
et available in the stable channel. | 20 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!). |
| 21 </p> | |
| 22 | |
| 23 <p> | |
| 24 <b>Note:</b> This tutorial requires Windows. | |
| 25 You can try it on Linux and OS X, and it might work, | |
| 26 but the extensions support is less stable on those platforms. | |
| 27 We're working hard to bring them up to speed. | |
| 28 </p> | 21 </p> |
| 29 | 22 |
| 30 <h2 id="load">Create and load an extension</h2> | 23 <h2 id="load">Create and load an extension</h2> |
| 31 <p> | 24 <p> |
| 32 In this section, you'll write an extension | 25 In this section, you'll write an extension |
| 33 that adds a <em>browser action</em> | 26 that adds a <em>browser action</em> |
| 34 to the toolbar of Google Chrome. | 27 to the toolbar of Google Chrome. |
| 35 </p> | 28 </p> |
| 36 | 29 |
| 37 <ol> | 30 <ol> |
| 38 <li> | 31 <li> |
| 39 Create a folder somewhere on your computer to contain your extension's code. | 32 Create a folder somewhere on your computer to contain your extension's code. |
| 40 We'll assume the folder is located at | |
| 41 <strong><code>c:\myext</code></strong>, | |
| 42 but it can be anywhere. | |
| 43 </li> | 33 </li> |
| 44 <li> | 34 <li> |
| 45 Inside your extension's folder, | 35 Inside your extension's folder, |
| 46 create a text file called <strong><code>manifest.json</code></strong>, | 36 create a text file called <strong><code>manifest.json</code></strong>, |
| 47 and put this in it: | 37 and put this in it: |
| 48 <pre>{ | 38 <pre>{ |
| 49 "name": "My First Extension", | 39 "name": "My First Extension", |
| 50 "version": "1.0", | 40 "version": "1.0", |
| 51 "description": "The first extension that I made.", | 41 "description": "The first extension that I made.", |
| 52 "browser_action": { | 42 "browser_action": { |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 88 </li> | 78 </li> |
| 89 | 79 |
| 90 <li> | 80 <li> |
| 91 Click the <b>Load extension...</b> button. | 81 Click the <b>Load extension...</b> button. |
| 92 A file dialog appears. | 82 A file dialog appears. |
| 93 </li> | 83 </li> |
| 94 | 84 |
| 95 <li> | 85 <li> |
| 96 In the file dialog, | 86 In the file dialog, |
| 97 navigate to your extension's folder | 87 navigate to your extension's folder |
| 98 (<code>c:\myext</code>, for example) | |
| 99 and click <b>OK</b>. | 88 and click <b>OK</b>. |
| 100 </li> | 89 </li> |
| 101 </ol> </li> | 90 </ol> </li> |
| 102 </ol> | 91 </ol> |
| 103 | 92 |
| 104 <p> | 93 <p> |
| 105 If your extension is valid, | 94 If your extension is valid, |
| 106 its icon appears next to the address bar, | 95 its icon appears next to the address bar, |
| 107 and information about the extension | 96 and information about the extension |
| 108 appears in the extensions page, | 97 appears in the extensions page, |
| (...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 181 </li> | 170 </li> |
| 182 <li> | 171 <li> |
| 183 Learn more about | 172 Learn more about |
| 184 <a href="browserAction.html">browser actions</a> | 173 <a href="browserAction.html">browser actions</a> |
| 185 </li> | 174 </li> |
| 186 <li> | 175 <li> |
| 187 Look at some | 176 Look at some |
| 188 <a href="samples.html">sample extensions</a> | 177 <a href="samples.html">sample extensions</a> |
| 189 </li> | 178 </li> |
| 190 </ul> | 179 </ul> |
| OLD | NEW |