| 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 |