OLD | NEW |
1 <h1>Overview</h1> | 1 <h1>Overview</h1> |
2 | 2 |
3 | 3 |
4 <p> | 4 <p> |
5 Once you've finished this page | 5 Once you've finished this page |
6 and the | 6 and the |
7 <a href="getstarted.html">Getting Started</a> tutorial, | 7 <a href="getstarted">Getting Started</a> tutorial, |
8 you'll be all set to start writing extensions. | 8 you'll be all set to start writing extensions. |
9 </p> | 9 </p> |
10 | 10 |
11 <h2 id="what">The basics</h2> | 11 <h2 id="what">The basics</h2> |
12 | 12 |
13 <p> | 13 <p> |
14 An extension is a zipped bundle of files—HTML, | 14 An extension is a zipped bundle of files—HTML, |
15 CSS, JavaScript, images, and anything else you need—that | 15 CSS, JavaScript, images, and anything else you need—that |
16 adds functionality to the Google Chrome browser. | 16 adds functionality to the Google Chrome browser. |
17 Extensions are essentially web pages, | 17 Extensions are essentially web pages, |
18 and they can use all the | 18 and they can use all the |
19 <a href="api_other.html">APIs that the browser provides to web pages</a>, | 19 <a href="api_other">APIs that the browser provides to web pages</a>, |
20 from XMLHttpRequest to JSON to HTML5. | 20 from XMLHttpRequest to JSON to HTML5. |
21 </p> | 21 </p> |
22 | 22 |
23 <p> | 23 <p> |
24 Extensions can interact with web pages or servers using | 24 Extensions can interact with web pages or servers using |
25 <a href="content_scripts.html">content scripts</a> or | 25 <a href="content_scripts">content scripts</a> or |
26 <a href="xhr.html">cross-origin XMLHttpRequests</a>. | 26 <a href="xhr">cross-origin XMLHttpRequests</a>. |
27 Extensions can also interact programmatically | 27 Extensions can also interact programmatically |
28 with browser features such as | 28 with browser features such as |
29 <a href="bookmarks.html">bookmarks</a> | 29 <a href="bookmarks">bookmarks</a> |
30 and <a href="tabs.html">tabs</a>. | 30 and <a href="tabs">tabs</a>. |
31 </p> | 31 </p> |
32 | 32 |
33 <h3 id="extension-ui">Extension UIs</h3> | 33 <h3 id="extension-ui">Extension UIs</h3> |
34 | 34 |
35 <p> | 35 <p> |
36 Many extensions—but not Chrome Apps—add | 36 Many extensions—but not Chrome Apps—add |
37 UI to Google Chrome in the form of | 37 UI to Google Chrome in the form of |
38 <a href="browserAction.html">browser actions</a> | 38 <a href="browserAction">browser actions</a> |
39 or <a href="pageAction.html">page actions</a>. | 39 or <a href="pageAction">page actions</a>. |
40 Each extension can have at most one browser action or page action. | 40 Each extension can have at most one browser action or page action. |
41 Choose a <b>browser action</b> when the extension is relevant to most pages. | 41 Choose a <b>browser action</b> when the extension is relevant to most pages. |
42 Choose a <b>page action</b> when the extension's icon | 42 Choose a <b>page action</b> when the extension's icon |
43 should appear or disappear, | 43 should appear or disappear, |
44 depending on the page. | 44 depending on the page. |
45 </p> | 45 </p> |
46 | 46 |
47 <table class="simple"> | 47 <table class="simple"> |
48 <tr> | 48 <tr> |
49 <td width="33%"> | 49 <td width="33%"> |
50 <img src="{{static}}/images/overview/browser-action.png" | 50 <img src="{{static}}/images/overview/browser-action.png" |
51 width="147" height="100" | 51 width="147" height="100" |
52 alt="screenshot" /> | 52 alt="screenshot" /> |
53 </td> | 53 </td> |
54 <td width="33%"> | 54 <td width="33%"> |
55 <img src="{{static}}/images/overview/page-action.png" | 55 <img src="{{static}}/images/overview/page-action.png" |
56 width="147" height="100" | 56 width="147" height="100" |
57 alt="screenshot" /> | 57 alt="screenshot" /> |
58 </td> | 58 </td> |
59 <td> | 59 <td> |
60 <img src="{{static}}/images/overview/browser-action-with-popup.png" | 60 <img src="{{static}}/images/overview/browser-action-with-popup.png" |
61 width="147" height="100" | 61 width="147" height="100" |
62 alt="screenshot" /> | 62 alt="screenshot" /> |
63 </td> | 63 </td> |
64 </tr> | 64 </tr> |
65 | 65 |
66 <tr> | 66 <tr> |
67 <td> | 67 <td> |
68 This <a href="samples.html#google-mail-checker">Google Mail Checker extensio
n</a> | 68 This <a href="samples#google-mail-checker">Google Mail Checker extension</a> |
69 uses a <em>browser action</em> | 69 uses a <em>browser action</em> |
70 (icon in the toolbar). | 70 (icon in the toolbar). |
71 </td> | 71 </td> |
72 <td> | 72 <td> |
73 This <a href="samples.html#mappy">Mappy extension</a> | 73 This <a href="samples#mappy">Mappy extension</a> |
74 uses a <em>page action</em> | 74 uses a <em>page action</em> |
75 (icon in the address bar) | 75 (icon in the address bar) |
76 and <em>content script</em> | 76 and <em>content script</em> |
77 (code injected into a web page). | 77 (code injected into a web page). |
78 </td> | 78 </td> |
79 <td> | 79 <td> |
80 This <a href="samples.html#news-reader">News Reader extension</a> | 80 This <a href="samples#news-reader">News Reader extension</a> |
81 features a browser action that, | 81 features a browser action that, |
82 when clicked, | 82 when clicked, |
83 shows a <em>popup</em>. | 83 shows a <em>popup</em>. |
84 </td> | 84 </td> |
85 </tr> | 85 </tr> |
86 </table> | 86 </table> |
87 | 87 |
88 <p> | 88 <p> |
89 Extensions (and Chrome Apps) can also present a UI in other ways, | 89 Extensions (and Chrome Apps) can also present a UI in other ways, |
90 such as adding to the Chrome context menu, | 90 such as adding to the Chrome context menu, |
91 providing an options page, | 91 providing an options page, |
92 or using a content script that changes how pages look. | 92 or using a content script that changes how pages look. |
93 See the <a href="devguide.html">Developer's Guide</a> | 93 See the <a href="devguide">Developer's Guide</a> |
94 for a complete list of extension features, | 94 for a complete list of extension features, |
95 with links to implementation details | 95 with links to implementation details |
96 for each one. | 96 for each one. |
97 </p> | 97 </p> |
98 | 98 |
99 <h2 id="files">Files</h2> | 99 <h2 id="files">Files</h2> |
100 <p> | 100 <p> |
101 Each extension has the following files: | 101 Each extension has the following files: |
102 | 102 |
103 </p> | 103 </p> |
104 | 104 |
105 <ul> | 105 <ul> |
106 <li>A <b>manifest file</b></li> | 106 <li>A <b>manifest file</b></li> |
107 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li> | 107 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li> |
108 <li><em>Optional:</em> One or more <b>JavaScript files</b></li> | 108 <li><em>Optional:</em> One or more <b>JavaScript files</b></li> |
109 <li><em>Optional:</em> Any other files your extension needs—for | 109 <li><em>Optional:</em> Any other files your extension needs—for |
110 example, image files</li> | 110 example, image files</li> |
111 </ul> | 111 </ul> |
112 | 112 |
113 <p> | 113 <p> |
114 While you're working on your extension, | 114 While you're working on your extension, |
115 you put all these files into a single folder. | 115 you put all these files into a single folder. |
116 When you distribute your extension, | 116 When you distribute your extension, |
117 the contents of the folder are packaged into a special ZIP file | 117 the contents of the folder are packaged into a special ZIP file |
118 that has a <code>.crx</code> suffix. | 118 that has a <code>.crx</code> suffix. |
119 If you upload your extension using the | 119 If you upload your extension using the |
120 <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Develope
r Dashboard</a>, | 120 <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Develope
r Dashboard</a>, |
121 the <code>.crx</code> file is created for you. | 121 the <code>.crx</code> file is created for you. |
122 For details on distributing extensions, | 122 For details on distributing extensions, |
123 see <a href="hosting.html">Hosting</a>. | 123 see <a href="hosting">Hosting</a>. |
124 </p> | 124 </p> |
125 | 125 |
126 | 126 |
127 <h3 id="relative-urls">Referring to files</h3> | 127 <h3 id="relative-urls">Referring to files</h3> |
128 | 128 |
129 <p> | 129 <p> |
130 You can put any file you like into an extension, | 130 You can put any file you like into an extension, |
131 but how do you use it? | 131 but how do you use it? |
132 Usually, | 132 Usually, |
133 you can refer to the file using a relative URL, | 133 you can refer to the file using a relative URL, |
(...skipping 29 matching lines...) Expand all Loading... |
163 <p> | 163 <p> |
164 While you're working on an extension | 164 While you're working on an extension |
165 (before it's packaged), | 165 (before it's packaged), |
166 the extension ID can change. | 166 the extension ID can change. |
167 Specifically, the ID of an unpacked extension will change | 167 Specifically, the ID of an unpacked extension will change |
168 if you load the extension from a different directory; | 168 if you load the extension from a different directory; |
169 the ID will change again when you package the extension. | 169 the ID will change again when you package the extension. |
170 If your extension's code | 170 If your extension's code |
171 needs to specify the full path to a file within the extension, | 171 needs to specify the full path to a file within the extension, |
172 you can use the <code>@@extension_id</code> | 172 you can use the <code>@@extension_id</code> |
173 <a href="i18n.html#overview-predefined">predefined message</a> | 173 <a href="i18n#overview-predefined">predefined message</a> |
174 to avoid hardcoding the ID during development. | 174 to avoid hardcoding the ID during development. |
175 </p> | 175 </p> |
176 | 176 |
177 <p> | 177 <p> |
178 When you package an extension | 178 When you package an extension |
179 (typically, by uploading it with the dashboard), | 179 (typically, by uploading it with the dashboard), |
180 the extension gets a permanent ID, | 180 the extension gets a permanent ID, |
181 which remains the same even after you update the extension. | 181 which remains the same even after you update the extension. |
182 Once the extension ID is permanent, | 182 Once the extension ID is permanent, |
183 you can change all occurrences of | 183 you can change all occurrences of |
(...skipping 25 matching lines...) Expand all Loading... |
209 "permissions": ["http://*.google.com/", "https://*.google.com/"], | 209 "permissions": ["http://*.google.com/", "https://*.google.com/"], |
210 "browser_action": { | 210 "browser_action": { |
211 "default_title": "", | 211 "default_title": "", |
212 "default_icon": "icon_19.png", | 212 "default_icon": "icon_19.png", |
213 "default_popup": "popup.html" | 213 "default_popup": "popup.html" |
214 } | 214 } |
215 }</pre> | 215 }</pre> |
216 | 216 |
217 <p> | 217 <p> |
218 For details, see | 218 For details, see |
219 <a href="manifest.html">Manifest Files</a>. | 219 <a href="manifest">Manifest Files</a>. |
220 </p> | 220 </p> |
221 | 221 |
222 <h2 id="arch">Architecture</h2> | 222 <h2 id="arch">Architecture</h2> |
223 | 223 |
224 <p> | 224 <p> |
225 Many extensions have a <em>background page</em>, | 225 Many extensions have a <em>background page</em>, |
226 an invisible page | 226 an invisible page |
227 that holds the main logic of the extension. | 227 that holds the main logic of the extension. |
228 An extension can also contain other pages | 228 An extension can also contain other pages |
229 that present the extension's UI. | 229 that present the extension's UI. |
(...skipping 17 matching lines...) Expand all Loading... |
247 and has JavaScript code that controls | 247 and has JavaScript code that controls |
248 the behavior of the browser action in both windows. | 248 the behavior of the browser action in both windows. |
249 </p> | 249 </p> |
250 | 250 |
251 <img src="{{static}}/images/overview/arch-1.gif" | 251 <img src="{{static}}/images/overview/arch-1.gif" |
252 width="232" height="168" | 252 width="232" height="168" |
253 alt="Two windows and a box representing a background page (background.html). On
e window has a yellow icon; the other has both a yellow icon and a blue icon. Th
e yellow icons are connected to the background page." /> | 253 alt="Two windows and a box representing a background page (background.html). On
e window has a yellow icon; the other has both a yellow icon and a blue icon. Th
e yellow icons are connected to the background page." /> |
254 | 254 |
255 <p> | 255 <p> |
256 There are two types of background pages: | 256 There are two types of background pages: |
257 <a href="background_pages.html">persistent background pages</a>, | 257 <a href="background_pages">persistent background pages</a>, |
258 and <a href="event_pages.html">event pages</a>. Persistent | 258 and <a href="event_pages">event pages</a>. Persistent |
259 background pages, as the name suggests, are always open. | 259 background pages, as the name suggests, are always open. |
260 Event pages are opened and closed as needed. Unless you absolutely | 260 Event pages are opened and closed as needed. Unless you absolutely |
261 need your background page to run all the time, prefer to use | 261 need your background page to run all the time, prefer to use |
262 an event page. | 262 an event page. |
263 </p> | 263 </p> |
264 | 264 |
265 <!-- PENDING: Perhaps show a picture of many background page processes. | 265 <!-- PENDING: Perhaps show a picture of many background page processes. |
266 This could build on a figure that shows the process architecture. --> | 266 This could build on a figure that shows the process architecture. --> |
267 | 267 |
268 <p> | 268 <p> |
269 See <a href="event_pages.html">Event Pages</a> | 269 See <a href="event_pages">Event Pages</a> |
270 and <a href="background_pages.html">Background Pages</a> | 270 and <a href="background_pages">Background Pages</a> |
271 for more details. | 271 for more details. |
272 </p> | 272 </p> |
273 | 273 |
274 <h3 id="pages">UI pages</h3> | 274 <h3 id="pages">UI pages</h3> |
275 | 275 |
276 <p> | 276 <p> |
277 Extensions can contain ordinary HTML pages that display the extension's UI. | 277 Extensions can contain ordinary HTML pages that display the extension's UI. |
278 For example, a browser action can have a popup, | 278 For example, a browser action can have a popup, |
279 which is implemented by an HTML file. | 279 which is implemented by an HTML file. |
280 Any extension can have an options page, | 280 Any extension can have an options page, |
(...skipping 26 matching lines...) Expand all Loading... |
307 The popup doesn't need to duplicate code | 307 The popup doesn't need to duplicate code |
308 that's in the background page | 308 that's in the background page |
309 because the popup can invoke functions on the background page. | 309 because the popup can invoke functions on the background page. |
310 </p> | 310 </p> |
311 | 311 |
312 <img src="{{static}}/images/overview/arch-2.gif" | 312 <img src="{{static}}/images/overview/arch-2.gif" |
313 width="256" height="168" | 313 width="256" height="168" |
314 alt="A browser window containing a browser action that's displaying a popup. Th
e popup's HTML file (popup.html) can communicate with the extension's background
page (background.html)." /> | 314 alt="A browser window containing a browser action that's displaying a popup. Th
e popup's HTML file (popup.html) can communicate with the extension's background
page (background.html)." /> |
315 | 315 |
316 <p> | 316 <p> |
317 See <a href="browserAction.html">Browser Actions</a>, | 317 See <a href="browserAction">Browser Actions</a>, |
318 <a href="options.html">Options</a>, | 318 <a href="options">Options</a>, |
319 <a href="override.html">Override Pages</a>, | 319 <a href="override">Override Pages</a>, |
320 and the <a href="#pageComm">Communication between pages</a> section | 320 and the <a href="#pageComm">Communication between pages</a> section |
321 for more details. | 321 for more details. |
322 </p> | 322 </p> |
323 | 323 |
324 | 324 |
325 <h3 id="contentScripts">Content scripts</h3> | 325 <h3 id="contentScripts">Content scripts</h3> |
326 | 326 |
327 <p> | 327 <p> |
328 If your extension needs to interact with web pages, | 328 If your extension needs to interact with web pages, |
329 then it needs a <em>content script</em>. | 329 then it needs a <em>content script</em>. |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
369 </p> | 369 </p> |
370 | 370 |
371 <img src="{{static}}/images/overview/arch-cs.gif" | 371 <img src="{{static}}/images/overview/arch-cs.gif" |
372 width="238" height="194" | 372 width="238" height="194" |
373 alt="Like the previous figure, but showing more of the parent extension's files
, as well as a communication path between the content script and the parent exte
nsion." /> | 373 alt="Like the previous figure, but showing more of the parent extension's files
, as well as a communication path between the content script and the parent exte
nsion." /> |
374 | 374 |
375 | 375 |
376 | 376 |
377 <p> | 377 <p> |
378 For more information, | 378 For more information, |
379 see <a href="content_scripts.html">Content Scripts</a>. | 379 see <a href="content_scripts">Content Scripts</a>. |
380 </p> | 380 </p> |
381 | 381 |
382 | 382 |
383 <h2 id="apis"> Using the chrome.* APIs </h2> | 383 <h2 id="apis"> Using the chrome.* APIs </h2> |
384 | 384 |
385 <p> | 385 <p> |
386 In addition to having access to all the APIs that web pages and apps can use, | 386 In addition to having access to all the APIs that web pages and apps can use, |
387 extensions can also use Chrome-only APIs | 387 extensions can also use Chrome-only APIs |
388 (often called <em>chrome.* APIs</em>) | 388 (often called <em>chrome.* APIs</em>) |
389 that allow tight integration with the browser. | 389 that allow tight integration with the browser. |
(...skipping 109 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
499 Although <code>update()</code> is asynchronous, | 499 Although <code>update()</code> is asynchronous, |
500 this example doesn't use its callback parameter, | 500 this example doesn't use its callback parameter, |
501 since we don't do anything about the results of the update. | 501 since we don't do anything about the results of the update. |
502 </p> | 502 </p> |
503 | 503 |
504 | 504 |
505 <h3 id="chrome-more"> More details </h3> | 505 <h3 id="chrome-more"> More details </h3> |
506 | 506 |
507 <p> | 507 <p> |
508 For more information, see the | 508 For more information, see the |
509 <a href="api_index.html">chrome.* API docs</a> | 509 <a href="api_index">chrome.* API docs</a> |
510 and watch this video: | 510 and watch this video: |
511 </p> | 511 </p> |
512 | 512 |
513 <p> | 513 <p> |
514 <iframe title="YouTube video player" width="640" height="390" src="http://www.yo
utube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen></iframe> | 514 <iframe title="YouTube video player" width="640" height="390" src="http://www.yo
utube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen></iframe> |
515 </p> | 515 </p> |
516 | 516 |
517 <h2 id="pageComm">Communication between pages </h2> | 517 <h2 id="pageComm">Communication between pages </h2> |
518 | 518 |
519 <p> | 519 <p> |
520 The HTML pages within an extension often need to communicate. | 520 The HTML pages within an extension often need to communicate. |
521 | 521 |
522 Because all of an extension's pages | 522 Because all of an extension's pages |
523 execute in same process on the same thread, | 523 execute in same process on the same thread, |
524 the pages can make direct function calls to each other. | 524 the pages can make direct function calls to each other. |
525 </p> | 525 </p> |
526 | 526 |
527 <p> | 527 <p> |
528 To find pages in the extension, use | 528 To find pages in the extension, use |
529 <a href="extension.html"><code>chrome.extension</code></a> | 529 <a href="extension"><code>chrome.extension</code></a> |
530 methods such as | 530 methods such as |
531 <code>getViews()</code> and | 531 <code>getViews()</code> and |
532 <code>getBackgroundPage()</code>. | 532 <code>getBackgroundPage()</code>. |
533 Once a page has a reference to other pages within the extension, | 533 Once a page has a reference to other pages within the extension, |
534 the first page can invoke functions on the other pages, | 534 the first page can invoke functions on the other pages, |
535 and it can manipulate their DOMs. | 535 and it can manipulate their DOMs. |
536 </p> | 536 </p> |
537 | 537 |
538 <h2 id="incognito"> Saving data and incognito mode </h2> | 538 <h2 id="incognito"> Saving data and incognito mode </h2> |
539 | 539 |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
593 | 593 |
594 <h2 id="now-what"> Now what? </h2> | 594 <h2 id="now-what"> Now what? </h2> |
595 | 595 |
596 <p> | 596 <p> |
597 Now that you've been introduced to extensions, | 597 Now that you've been introduced to extensions, |
598 you should be ready to write your own. | 598 you should be ready to write your own. |
599 Here are some ideas for where to go next: | 599 Here are some ideas for where to go next: |
600 </p> | 600 </p> |
601 | 601 |
602 <ul> | 602 <ul> |
603 <li> <a href="getstarted.html">Tutorial: Getting Started</a> </li> | 603 <li> <a href="getstarted">Tutorial: Getting Started</a> </li> |
604 <li> <a href="tut_debugging.html">Tutorial: Debugging</a> </li> | 604 <li> <a href="tut_debugging">Tutorial: Debugging</a> </li> |
605 <li> <a href="devguide.html">Developer's Guide</a> </li> | 605 <li> <a href="devguide">Developer's Guide</a> </li> |
606 <li> <a href="samples.html">Samples</a> </li> | 606 <li> <a href="samples">Samples</a> </li> |
607 <li> <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">Videos
</a>, | 607 <li> <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">Videos
</a>, |
608 such as | 608 such as |
609 <a href="http://www.youtube.com/watch?v=B4M_a7xejYI&feature=PlayList&p=CA101
D6A85FE9D4B&index=6">Extension Message Passing</a> | 609 <a href="http://www.youtube.com/watch?v=B4M_a7xejYI&feature=PlayList&p=CA101
D6A85FE9D4B&index=6">Extension Message Passing</a> |
610 </li> | 610 </li> |
611 </ul> | 611 </ul> |
OLD | NEW |