OLD | NEW |
1 <div id="pageData-name" class="pageData">Tutorial: Getting Started (Hello, World
!)</div> | 1 <h1>Tutorial: Getting Started (Hello, World!)</h1> |
2 <div id="pageData-showTOC" class="pageData">true</div> | 2 |
3 | 3 |
4 <p> | 4 <p> |
5 This tutorial walks you through creating a simple extension. You'll add an | 5 This tutorial walks you through creating a simple extension. You'll add an |
6 icon to Google Chrome that, when clicked, displays an automatically generated | 6 icon to Google Chrome that, when clicked, displays an automatically generated |
7 page. The icon and page will look something like this: | 7 page. The icon and page will look something like this: |
8 </p> | 8 </p> |
9 | 9 |
10 <img src="../images/hello-world-small.png" | 10 <img src="{{static}}/images/hello-world-small.png" |
11 width="300" | 11 width="300" |
12 height="221" | 12 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 <p> | 15 <p> |
16 You can develop extensions using any release of Google Chrome, on Windows, | 16 You can develop extensions using any release of Google Chrome, on Windows, |
17 Mac, or Linux. Extensions you develop on one platform should run without | 17 Mac, or Linux. Extensions you develop on one platform should run without |
18 change on every platform Chrome supports. | 18 change on every platform Chrome supports. |
19 </p> | 19 </p> |
20 | 20 |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
62 Download icon.png | 62 Download icon.png |
63 </a> | 63 </a> |
64 </div> | 64 </div> |
65 </li> | 65 </li> |
66 <li id="load-ext"> | 66 <li id="load-ext"> |
67 <p>Load the extension.</p> | 67 <p>Load the extension.</p> |
68 <ol type="a"> | 68 <ol type="a"> |
69 <li style="margin-top:0" /> | 69 <li style="margin-top:0" /> |
70 Bring up the extensions management page | 70 Bring up the extensions management page |
71 by clicking the wrench icon | 71 by clicking the wrench icon |
72 <img src="../images/toolsmenu.gif" width="29" height="29" alt="" | 72 <img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt="" |
73 style="margin-top:0" /> | 73 style="margin-top:0" /> |
74 and choosing <b>Tools > Extensions</b>. | 74 and choosing <b>Tools > Extensions</b>. |
75 </li> | 75 </li> |
76 | 76 |
77 <li> | 77 <li> |
78 If <b>Developer mode</b> has a + by it, | 78 If <b>Developer mode</b> has a + by it, |
79 click the + to add developer information to the page. | 79 click the + to add developer information to the page. |
80 The + changes to a -, | 80 The + changes to a -, |
81 and more buttons and information appear. | 81 and more buttons and information appear. |
82 </li> | 82 </li> |
(...skipping 13 matching lines...) Expand all Loading... |
96 | 96 |
97 <p> | 97 <p> |
98 If your extension is valid, | 98 If your extension is valid, |
99 its icon appears next to the address bar, | 99 its icon appears next to the address bar, |
100 and information about the extension | 100 and information about the extension |
101 appears in the extensions page, | 101 appears in the extensions page, |
102 as the following screenshot shows. | 102 as the following screenshot shows. |
103 </p> | 103 </p> |
104 | 104 |
105 <p> | 105 <p> |
106 <a href="../images/load_after.png"><img | 106 <a href="{{static}}/images/load_after.png"><img |
107 src="../images/load_after_small.png" | 107 src="{{static}}/images/load_after_small.png" |
108 width="300" height="132" /></a> | 108 width="300" height="132" /></a> |
109 </p> | 109 </p> |
110 | 110 |
111 <h2 id="code">Add code to the extension</h2> | 111 <h2 id="code">Add code to the extension</h2> |
112 <p> | 112 <p> |
113 In this step, you'll make your extension <em>do</em> something besides just | 113 In this step, you'll make your extension <em>do</em> something besides just |
114 look good. | 114 look good. |
115 </p> | 115 </p> |
116 | 116 |
117 <ol> | 117 <ol> |
(...skipping 21 matching lines...) Expand all Loading... |
139 <li> | 139 <li> |
140 Return to the extensions management page, | 140 Return to the extensions management page, |
141 and click the <b>Reload</b> button | 141 and click the <b>Reload</b> button |
142 to load the new version of the extension.</li> | 142 to load the new version of the extension.</li> |
143 <li>Click the extension's icon. | 143 <li>Click the extension's icon. |
144 A popup should appear that displays the contents of | 144 A popup should appear that displays the contents of |
145 <code>popup.html</code>. </li> | 145 <code>popup.html</code>. </li> |
146 </ol> | 146 </ol> |
147 <p> It should look something like this:</p> | 147 <p> It should look something like this:</p> |
148 | 148 |
149 <img src="../images/hello-world.png" | 149 <img src="{{static}}/images/hello-world.png" |
150 width="500" height="369" | 150 width="500" height="369" |
151 alt="a popup with a grid of images related to HELLO WORLD" /> | 151 alt="a popup with a grid of images related to HELLO WORLD" /> |
152 | 152 |
153 <p> If you don't see the popup, | 153 <p> If you don't see the popup, |
154 try the instructions again, | 154 try the instructions again, |
155 following them exactly. | 155 following them exactly. |
156 Don't try loading an HTML file that isn't in the extension's folder — | 156 Don't try loading an HTML file that isn't in the extension's folder — |
157 it won't work! </p> | 157 it won't work! </p> |
158 | 158 |
159 <h2 id="summary">Now what?</h2> | 159 <h2 id="summary">Now what?</h2> |
160 | 160 |
161 <!-- [PENDING: Summarize what we did, what it means, what else we would've done
if this were a real extension (e.g. package/zip it), and where to find more info
rmation.] --> | 161 |
162 | 162 |
163 <p> | 163 <p> |
164 Here are some suggestions for what to read next: | 164 Here are some suggestions for what to read next: |
165 </p> | 165 </p> |
166 | 166 |
167 <ul> | 167 <ul> |
168 <li> | 168 <li> |
169 The <a href="overview.html">Overview</a>, | 169 The <a href="overview.html">Overview</a>, |
170 which has important conceptual and practical information | 170 which has important conceptual and practical information |
171 </li> | 171 </li> |
(...skipping 22 matching lines...) Expand all Loading... |
194 </li> | 194 </li> |
195 <li> | 195 <li> |
196 Look at some | 196 Look at some |
197 <a href="samples.html">sample extensions</a> | 197 <a href="samples.html">sample extensions</a> |
198 </li> | 198 </li> |
199 <li> | 199 <li> |
200 Watch some | 200 Watch some |
201 <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">videos</a
>, such as | 201 <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">videos</a
>, such as |
202 <a href="http://www.youtube.com/watch?v=e3McMaHvlBY&feature=PlayList&p=CA101
D6A85FE9D4B&index=3">How to build an extension</a> | 202 <a href="http://www.youtube.com/watch?v=e3McMaHvlBY&feature=PlayList&p=CA101
D6A85FE9D4B&index=3">How to build an extension</a> |
203 </li> | 203 </li> |
204 </ul> | 204 </ul> |
OLD | NEW |