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 |