OLD | NEW |
1 <h1>Getting Started: Building a Chrome Extension</h1> | 1 <h1>Getting Started: Building a Chrome Extension</h1> |
2 | 2 |
3 <p> | 3 <p> |
4 Extensions allow you to add functionality to Chrome without diving deeply | 4 Extensions allow you to add functionality to Chrome without diving deeply |
5 into native code. You can create new extensions for Chrome with those core | 5 into native code. You can create new extensions for Chrome with those core |
6 technologies that you're already familiar with from web development: HTML, | 6 technologies that you're already familiar with from web development: HTML, |
7 CSS, and JavaScript. If you've ever built a web page, you should feel right at | 7 CSS, and JavaScript. If you've ever built a web page, you should feel right at |
8 home with extensions pretty quickly; we'll put that to the test right now by | 8 home with extensions pretty quickly; we'll put that to the test right now by |
9 walking through the construction of a simple extension that will give you | 9 walking through the construction of a simple extension that will give you |
10 one-click access to pictures of kittens. Kittens! | 10 one-click access to pictures of kittens. Kittens! |
11 </p> | 11 </p> |
12 | 12 |
13 <p> | 13 <p> |
14 We'll do so by implementing a UI element we call a | 14 We'll do so by implementing a UI element we call a |
15 <a href="browserAction.html">browser action</a>, which allows us to place a | 15 <a href="browserAction">browser action</a>, which allows us to place a |
16 clickable icon right next to Chrome's Omnibox for easy access. Clicking that | 16 clickable icon right next to Chrome's Omnibox for easy access. Clicking that |
17 icon will open a popup window filled with kittenish goodness, which will look | 17 icon will open a popup window filled with kittenish goodness, which will look |
18 something like this: | 18 something like this: |
19 </p> | 19 </p> |
20 | 20 |
21 <img src="{{static}}/images/gettingstarted-1.jpg" | 21 <img src="{{static}}/images/gettingstarted-1.jpg" |
22 width="600" | 22 width="600" |
23 height="420" | 23 height="420" |
24 alt="Chrome, with an extension's popup open and displaying many kittens."> | 24 alt="Chrome, with an extension's popup open and displaying many kittens."> |
25 | 25 |
(...skipping 220 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
246 You now know about the manifest file's central role in bringing things | 246 You now know about the manifest file's central role in bringing things |
247 together, and you've mastered the basics of declaring a browser action, and | 247 together, and you've mastered the basics of declaring a browser action, and |
248 rendering some kittens (or puppies!) in response to a user's click. That's a | 248 rendering some kittens (or puppies!) in response to a user's click. That's a |
249 great start, and has hopefully gotten you interested enough to explore | 249 great start, and has hopefully gotten you interested enough to explore |
250 further. There's a lot more out there to play around with. | 250 further. There's a lot more out there to play around with. |
251 </p> | 251 </p> |
252 | 252 |
253 <ul> | 253 <ul> |
254 <li> | 254 <li> |
255 <p> | 255 <p> |
256 The <a href="overview.html">Chrome Extension Overview</a> backs up a bit, | 256 The <a href="overview">Chrome Extension Overview</a> backs up a bit, |
257 and fills in a lot of detail about extensions' architecture in general, | 257 and fills in a lot of detail about extensions' architecture in general, |
258 and some specific concepts you'll want to be familiar with going forward. | 258 and some specific concepts you'll want to be familiar with going forward. |
259 It's the best next step on your journey towards extension mastery. | 259 It's the best next step on your journey towards extension mastery. |
260 </p> | 260 </p> |
261 </li> | 261 </li> |
262 <li> | 262 <li> |
263 <p> | 263 <p> |
264 No one writes perfect code on the first try, which means that you'll need | 264 No one writes perfect code on the first try, which means that you'll need |
265 to learn about the options available for debugging your creations. Our | 265 to learn about the options available for debugging your creations. Our |
266 <a href="tut_debugging.html">debugging tutorial</a> is perfect for that, | 266 <a href="tut_debugging">debugging tutorial</a> is perfect for that, |
267 and is well worth carefully reading. | 267 and is well worth carefully reading. |
268 </p> | 268 </p> |
269 </li> | 269 </li> |
270 <li> | 270 <li> |
271 <p> | 271 <p> |
272 Chrome extensions have access to powerful APIs above and beyond what's | 272 Chrome extensions have access to powerful APIs above and beyond what's |
273 available on the open web: browser actions are just the tip of the | 273 available on the open web: browser actions are just the tip of the |
274 iceburg. Our <a href="api_index.html">chrome.* APIs documentation</a> will | 274 iceburg. Our <a href="api_index">chrome.* APIs documentation</a> will |
275 walk you through each API in turn. | 275 walk you through each API in turn. |
276 </p> | 276 </p> |
277 </li> | 277 </li> |
278 <li> | 278 <li> |
279 <p> | 279 <p> |
280 Finally, the <a href="devguide.html">developer's guide</a> has dozens of | 280 Finally, the <a href="devguide">developer's guide</a> has dozens of |
281 additional links to pieces of documentation you might be interested in. | 281 additional links to pieces of documentation you might be interested in. |
282 </p> | 282 </p> |
283 </li> | 283 </li> |
284 </ul> | 284 </ul> |
OLD | NEW |