Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <h1>Overview</h1> | 1 <h1>Overview</h1> |
| 2 | 2 |
| 3 | |
| 4 <p> | 3 <p> |
| 5 Once you've finished this page | 4 Once you've finished this page |
| 6 and the | 5 and the |
| 7 <a href="getstarted.html">Getting Started</a> tutorial, | 6 <a href="getstarted.html">Getting Started</a> tutorial, |
| 8 you'll be all set to start writing extensions and packaged apps. | 7 you'll be all set to start writing extensions. |
| 9 </p> | |
| 10 | |
| 11 <p class="caution"> | |
| 12 <strong>Note:</strong> | |
| 13 <em>Packaged apps</em> are implemented as extensions, | |
| 14 so unless otherwise stated, | |
| 15 everything in this page applies to packaged apps. | |
| 16 </p> | 8 </p> |
| 17 | 9 |
| 18 <h2 id="what">The basics</h2> | 10 <h2 id="what">The basics</h2> |
| 19 | 11 |
| 20 <p> | 12 <p> |
| 21 An extension is a zipped bundle of files—HTML, | 13 An extension is a zipped bundle of files—HTML, |
| 22 CSS, JavaScript, images, and anything else you need—that | 14 CSS, JavaScript, images, and anything else you need—that |
| 23 adds functionality to the Google Chrome browser. | 15 adds functionality to the Google Chrome browser. |
| 24 Extensions are essentially web pages, | 16 Extensions are essentially web pages, |
| 25 and they can use all the | 17 and they can use all the |
| 26 <a href="api_other.html">APIs that the browser provides to web pages</a>, | 18 <a href="api_other.html">APIs that the browser provides to web pages</a>, |
| 27 from XMLHttpRequest to JSON to HTML5. | 19 from XMLHttpRequest to JSON to HTML5. |
| 28 </p> | 20 </p> |
| 29 | 21 |
| 30 <p> | 22 <p> |
| 31 Extensions can interact with web pages or servers using | 23 Extensions can interact with web pages or servers using |
| 32 <a href="content_scripts.html">content scripts</a> or | 24 <a href="content_scripts.html">content scripts</a> or |
| 33 <a href="xhr.html">cross-origin XMLHttpRequests</a>. | 25 <a href="xhr.html">cross-origin XMLHttpRequests</a>. |
| 34 Extensions can also interact programmatically | 26 Extensions can also interact programmatically |
| 35 with browser features such as | 27 with browser features such as |
| 36 <a href="bookmarks.html">bookmarks</a> | 28 <a href="bookmarks.html">bookmarks</a> |
| 37 and <a href="tabs.html">tabs</a>. | 29 and <a href="tabs.html">tabs</a>. |
| 38 </p> | 30 </p> |
| 39 | 31 |
| 40 <h3 id="extension-ui">Extension UIs</h3> | 32 <h3 id="extension-ui">Extension UIs</h3> |
| 41 | 33 |
| 42 <p> | 34 <p> |
| 43 Many extensions—but not packaged apps—add | 35 Many extensions add UI to Google Chrome in the form of |
| 44 UI to Google Chrome in the form of | |
| 45 <a href="browserAction.html">browser actions</a> | 36 <a href="browserAction.html">browser actions</a> |
| 46 or <a href="pageAction.html">page actions</a>. | 37 or <a href="pageAction.html">page actions</a>. |
| 47 Each extension can have at most one browser action or page action. | 38 Each extension can have at most one browser action or page action. |
| 48 Choose a <b>browser action</b> when the extension is relevant to most pages. | 39 Choose a <b>browser action</b> when the extension is relevant to most pages. |
| 49 Choose a <b>page action</b> when the extension's icon | 40 Choose a <b>page action</b> when the extension's icon |
| 50 should appear or disappear, | 41 should appear or disappear, |
| 51 depending on the page. | 42 depending on the page. |
| 52 </p> | 43 </p> |
| 53 | 44 |
| 54 <table class="columns"> | 45 <table class="columns"> |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 86 <td> | 77 <td> |
| 87 This <a href="samples.html#news">news extension</a> | 78 This <a href="samples.html#news">news extension</a> |
| 88 features a browser action that, | 79 features a browser action that, |
| 89 when clicked, | 80 when clicked, |
| 90 shows a <em>popup</em>. | 81 shows a <em>popup</em>. |
| 91 </td> | 82 </td> |
| 92 </tr> | 83 </tr> |
| 93 </table> | 84 </table> |
| 94 | 85 |
| 95 <p> | 86 <p> |
| 96 Extensions (and packaged apps) can also present a UI in other ways, | 87 Extensions can also present a UI in other ways, |
| 97 such as adding to the Chrome context menu, | 88 such as adding to the Chrome context menu, |
| 98 providing an options page, | 89 providing an options page, |
| 99 or using a content script that changes how pages look. | 90 or using a content script that changes how pages look. |
| 100 See the <a href="devguide.html">Developer's Guide</a> | 91 See the <a href="devguide.html">Developer's Guide</a> |
| 101 for a complete list of extension features, | 92 for a complete list of extension features, |
| 102 with links to implementation details | 93 with links to implementation details |
| 103 for each one. | 94 for each one. |
| 104 </p> | 95 </p> |
| 105 | 96 |
| 106 | |
| 107 <h3 id="packagedapp-ui">Packaged app UIs</h3> | |
| 108 | |
| 109 <p> | |
| 110 A packaged app usually presents its main functionality using | |
| 111 an HTML page that's bundled into the app. | |
| 112 For example, the following packaged app | |
| 113 displays a Flash file within an HTML page. | |
| 114 </p> | |
| 115 | |
| 116 <img src="{{static}}/images/overview/flash-app.png" | |
|
Mihai Parparita -not on Chrome
2012/09/16 04:55:02
Delete this image file if it's no longer reference
| |
| 117 width="372" height="300" | |
| 118 alt="screenshot" /> | |
| 119 | |
| 120 <p> | |
| 121 For more information, | |
| 122 see <a href="apps.html">Packaged Apps</a>. | |
| 123 </p> | |
| 124 | |
| 125 <h2 id="files">Files</h2> | 97 <h2 id="files">Files</h2> |
| 126 <p> | 98 <p> |
| 127 Each extension has the following files: | 99 Each extension has the following files: |
| 128 | 100 |
| 129 </p> | 101 </p> |
| 130 | 102 |
| 131 <ul> | 103 <ul> |
| 132 <li>A <b>manifest file</b></li> | 104 <li>A <b>manifest file</b></li> |
| 133 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li> | 105 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li> |
| 134 <li><em>Optional:</em> One or more <b>JavaScript files</b></li> | 106 <li><em>Optional:</em> One or more <b>JavaScript files</b></li> |
| (...skipping 147 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 282 There are two types of background pages: | 254 There are two types of background pages: |
| 283 <a href="background_pages.html">persistent background pages</a>, | 255 <a href="background_pages.html">persistent background pages</a>, |
| 284 and <a href="event_pages.html">event pages</a>. Persistent | 256 and <a href="event_pages.html">event pages</a>. Persistent |
| 285 background pages, as the name suggests, are always open. | 257 background pages, as the name suggests, are always open. |
| 286 Event pages are opened and closed as needed. Unless you absolutely | 258 Event pages are opened and closed as needed. Unless you absolutely |
| 287 need your background page to run all the time, prefer to use | 259 need your background page to run all the time, prefer to use |
| 288 an event page. | 260 an event page. |
| 289 </p> | 261 </p> |
| 290 | 262 |
| 291 <!-- PENDING: Perhaps show a picture of many background page processes. | 263 <!-- PENDING: Perhaps show a picture of many background page processes. |
| 292 This could build on a figure that shows the process architecture, | 264 This could build on a figure that shows the process architecture. --> |
| 293 and perhaps the differences between packaged apps and extensions. --> | |
| 294 | 265 |
| 295 <p> | 266 <p> |
| 296 See <a href="event_pages.html">Event Pages</a> | 267 See <a href="event_pages.html">Event Pages</a> |
| 297 and <a href="background_pages.html">Background Pages</a> | 268 and <a href="background_pages.html">Background Pages</a> |
| 298 for more details. | 269 for more details. |
| 299 </p> | 270 </p> |
| 300 | 271 |
| 301 <h3 id="pages">UI pages</h3> | 272 <h3 id="pages">UI pages</h3> |
| 302 | 273 |
| 303 <p> | 274 <p> |
| (...skipping 264 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 568 <h2 id="incognito"> Saving data and incognito mode </h2> | 539 <h2 id="incognito"> Saving data and incognito mode </h2> |
| 569 | 540 |
| 570 <p> | 541 <p> |
| 571 Extensions can save data using | 542 Extensions can save data using |
| 572 the HTML5 <a href="http://dev.w3.org/html5/webstorage/">web storage API</a> | 543 the HTML5 <a href="http://dev.w3.org/html5/webstorage/">web storage API</a> |
| 573 (such as <code>localStorage</code>) | 544 (such as <code>localStorage</code>) |
| 574 or by making server requests that result in saving data. | 545 or by making server requests that result in saving data. |
| 575 Whenever you want to save something, | 546 Whenever you want to save something, |
| 576 first consider whether it's | 547 first consider whether it's |
| 577 from a window that's in incognito mode. | 548 from a window that's in incognito mode. |
| 578 By default, extensions don't run in incognito windows, | 549 By default, extensions don't run in incognito windows. |
| 579 and packaged apps <em>do</em>. | |
| 580 You need to consider what a user expects | 550 You need to consider what a user expects |
| 581 from your extension or packaged app | 551 from your extension when the browser is incognito. |
| 582 when the browser is incognito. | |
| 583 </p> | 552 </p> |
| 584 | 553 |
| 585 <p> | 554 <p> |
| 586 <em>Incognito mode</em> promises that the window will leave no tracks. | 555 <em>Incognito mode</em> promises that the window will leave no tracks. |
| 587 When dealing with data from incognito windows, | 556 When dealing with data from incognito windows, |
| 588 do your best to honor this promise. | 557 do your best to honor this promise. |
| 589 For example, if your extension normally | 558 For example, if your extension normally |
| 590 saves browsing history to the cloud, | 559 saves browsing history to the cloud, |
| 591 don't save history from incognito windows. | 560 don't save history from incognito windows. |
| 592 On the other hand, you can store | 561 On the other hand, you can store |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 633 <ul> | 602 <ul> |
| 634 <li> <a href="getstarted.html">Tutorial: Getting Started</a> </li> | 603 <li> <a href="getstarted.html">Tutorial: Getting Started</a> </li> |
| 635 <li> <a href="tut_debugging.html">Tutorial: Debugging</a> </li> | 604 <li> <a href="tut_debugging.html">Tutorial: Debugging</a> </li> |
| 636 <li> <a href="devguide.html">Developer's Guide</a> </li> | 605 <li> <a href="devguide.html">Developer's Guide</a> </li> |
| 637 <li> <a href="http://dev.chromium.org/developers/design-documents/extensions/s amples">Samples</a> </li> | 606 <li> <a href="http://dev.chromium.org/developers/design-documents/extensions/s amples">Samples</a> </li> |
| 638 <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>, |
| 639 such as | 608 such as |
| 640 <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> |
| 641 </li> | 610 </li> |
| 642 </ul> | 611 </ul> |
| OLD | NEW |