| 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 27 matching lines...) Expand all Loading... |
| 53 | 53 |
| 54 "name": "One-click Kittens", | 54 "name": "One-click Kittens", |
| 55 "description": "This extension demonstrates a browser action with kittens.", | 55 "description": "This extension demonstrates a browser action with kittens.", |
| 56 "version": "1.0", | 56 "version": "1.0", |
| 57 | 57 |
| 58 "permissions": [ | 58 "permissions": [ |
| 59 "https://secure.flickr.com/" | 59 "https://secure.flickr.com/" |
| 60 ], | 60 ], |
| 61 "browser_action": { | 61 "browser_action": { |
| 62 "default_icon": "icon.png", | 62 "default_icon": "icon.png", |
| 63 "default_popup": "popup.html" | 63 "default_popup": "popup" |
| 64 } | 64 } |
| 65 } | 65 } |
| 66 </pre> | 66 </pre> |
| 67 | 67 |
| 68 <p> | 68 <p> |
| 69 Go ahead and save that data to a file named <code>manifest.json</code> in the | 69 Go ahead and save that data to a file named <code>manifest.json</code> in the |
| 70 directory you created, or | 70 directory you created, or |
| 71 <a href="examples/tutorials/getstarted/manifest.json" download="manifest.json"
> | 71 <a href="examples/tutorials/getstarted/manifest.json" download="manifest.json"
> |
| 72 download a copy of <code>manifest.json</code> from our sample repository | 72 download a copy of <code>manifest.json</code> from our sample repository |
| 73 </a>. | 73 </a>. |
| (...skipping 26 matching lines...) Expand all Loading... |
| 100 <code>https://secure.flickr.com/</code>, and declares that this extension | 100 <code>https://secure.flickr.com/</code>, and declares that this extension |
| 101 implements a browser action, assigning it a default icon and popup in the | 101 implements a browser action, assigning it a default icon and popup in the |
| 102 process. | 102 process. |
| 103 </p> | 103 </p> |
| 104 | 104 |
| 105 <h2 id="resources">Resources</h2> | 105 <h2 id="resources">Resources</h2> |
| 106 | 106 |
| 107 <p> | 107 <p> |
| 108 You probably noticed that <code>manifest.json</code> pointed at two resource | 108 You probably noticed that <code>manifest.json</code> pointed at two resource |
| 109 files when defining the browser action: <code>icon.png</code> and | 109 files when defining the browser action: <code>icon.png</code> and |
| 110 <code>popup.html</code>. Both resources must exist inside the extension | 110 <code>popup</code>. Both resources must exist inside the extension |
| 111 package, so let's create them now: | 111 package, so let's create them now: |
| 112 </p> | 112 </p> |
| 113 | 113 |
| 114 <ul class="imaged"> | 114 <ul class="imaged"> |
| 115 <li> | 115 <li> |
| 116 <p> | 116 <p> |
| 117 <img src="{{static}}/images/gettingstarted-icon.png" | 117 <img src="{{static}}/images/gettingstarted-icon.png" |
| 118 width="127" | 118 width="127" |
| 119 height="127" | 119 height="127" |
| 120 alt="The popup's icon will be displayed right next to the Omnibox."> | 120 alt="The popup's icon will be displayed right next to the Omnibox."> |
| 121 <code>icon.png</code> will be displayed next to the Omnibox, waiting for | 121 <code>icon.png</code> will be displayed next to the Omnibox, waiting for |
| 122 user interaction. Download a copy of icon.png from our sample repository, | 122 user interaction. Download a copy of icon.png from our sample repository, |
| 123 <a href="examples/tutorials/getstarted/icon.png" download="icon.png"> | 123 <a href="examples/tutorials/getstarted/icon.png" download="icon.png"> |
| 124 Download a copy of <code>icon.png</code> from our sample repository | 124 Download a copy of <code>icon.png</code> from our sample repository |
| 125 </a>, and save it into the directory you're working in. You could also | 125 </a>, and save it into the directory you're working in. You could also |
| 126 create your own if you're so inclined; it's just a 19px-square PNG file. | 126 create your own if you're so inclined; it's just a 19px-square PNG file. |
| 127 </p> | 127 </p> |
| 128 </li> | 128 </li> |
| 129 <li> | 129 <li> |
| 130 <p> | 130 <p> |
| 131 <img src="{{static}}/images/gettingstarted-popup.jpg" | 131 <img src="{{static}}/images/gettingstarted-popup.jpg" |
| 132 width="165" | 132 width="165" |
| 133 height="200" | 133 height="200" |
| 134 alt="The popup's HTML will be rendered directly below the icon when c
licked."> | 134 alt="The popup's HTML will be rendered directly below the icon when c
licked."> |
| 135 <code>popup.html</code> will be rendered inside the popup window that's | 135 <code>popup</code> will be rendered inside the popup window that's |
| 136 created in response to a user's click on the browser action. It's a | 136 created in response to a user's click on the browser action. It's a |
| 137 standard HTML file, just like you're used to from web development, giving | 137 standard HTML file, just like you're used to from web development, giving |
| 138 you more or less free reign over what the popup displays. | 138 you more or less free reign over what the popup displays. |
| 139 <a href="examples/tutorials/getstarted/popup.html" download="popup.html"> | 139 <a href="examples/tutorials/getstarted/popup" download="popup"> |
| 140 Download a copy of <code>popup.html</code> from our sample repository | 140 Download a copy of <code>popup</code> from our sample repository |
| 141 </a>, and save it into | 141 </a>, and save it into |
| 142 the directory you're working in. | 142 the directory you're working in. |
| 143 </p> | 143 </p> |
| 144 <p> | 144 <p> |
| 145 <code>popup.html</code> requires an additional JavaScript file in order to | 145 <code>popup</code> requires an additional JavaScript file in order to |
| 146 do the work of grabbing kitten images from the web and loading them into | 146 do the work of grabbing kitten images from the web and loading them into |
| 147 the popup. To save you some effort, just | 147 the popup. To save you some effort, just |
| 148 <a href="examples/tutorials/getstarted/popup.js" download="popup.js"> | 148 <a href="examples/tutorials/getstarted/popup.js" download="popup.js"> |
| 149 download a copy of <code>popup.js</code> from our sample repository | 149 download a copy of <code>popup.js</code> from our sample repository |
| 150 </a>, and save it into the directory you're working in. | 150 </a>, and save it into the directory you're working in. |
| 151 </p> | 151 </p> |
| 152 </li> | 152 </li> |
| 153 </ul> | 153 </ul> |
| 154 | 154 |
| 155 <p> | 155 <p> |
| 156 You should now have four files in your working directory: | 156 You should now have four files in your working directory: |
| 157 <a href="examples/tutorials/getstarted/icon.png" download="icon.png"><code>ico
n.png</code></a>, | 157 <a href="examples/tutorials/getstarted/icon.png" download="icon.png"><code>ico
n.png</code></a>, |
| 158 <a href="examples/tutorials/getstarted/manifest.json" download="manifest.json"
><code>manifest.json</code></a>, | 158 <a href="examples/tutorials/getstarted/manifest.json" download="manifest.json"
><code>manifest.json</code></a>, |
| 159 <a href="examples/tutorials/getstarted/popup.html" download="popup.html"><code
>popup.html</code></a>, | 159 <a href="examples/tutorials/getstarted/popup" download="popup"><code>popup</co
de></a>, |
| 160 <a href="examples/tutorials/getstarted/popup.js" download="popup.js"><code>pop
up.js</code></a>. | 160 <a href="examples/tutorials/getstarted/popup.js" download="popup.js"><code>pop
up.js</code></a>. |
| 161 The next step is to load those files into Chrome. | 161 The next step is to load those files into Chrome. |
| 162 </p> | 162 </p> |
| 163 | 163 |
| 164 <h2 id="unpacked">Load the extension</h2> | 164 <h2 id="unpacked">Load the extension</h2> |
| 165 | 165 |
| 166 <p> | 166 <p> |
| 167 Extensions that you download from the Chrome Web Store are packaged up as | 167 Extensions that you download from the Chrome Web Store are packaged up as |
| 168 <code>.crx</code> files, which is great for distribution, but not so great for | 168 <code>.crx</code> files, which is great for distribution, but not so great for |
| 169 development. Recognizing this, Chrome gives you a quick way of loading up your | 169 development. Recognizing this, Chrome gives you a quick way of loading up your |
| (...skipping 76 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 |