| 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 19 matching lines...) Expand all Loading... |
| 203 "description": "Gets information from Google.", | 203 "description": "Gets information from Google.", |
| 204 "icons": { "128": "icon_128.png" }, | 204 "icons": { "128": "icon_128.png" }, |
| 205 "background": { | 205 "background": { |
| 206 "persistent": false, | 206 "persistent": false, |
| 207 "scripts": ["bg.js"] | 207 "scripts": ["bg.js"] |
| 208 }, | 208 }, |
| 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" |
| 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. |
| 230 If an extension needs to interact with web pages that the user loads | 230 If an extension needs to interact with web pages that the user loads |
| 231 (as opposed to pages that are included in the extension), | 231 (as opposed to pages that are included in the extension), |
| 232 then the extension must use a content script. | 232 then the extension must use a content script. |
| 233 </p> | 233 </p> |
| 234 | 234 |
| 235 | 235 |
| 236 <h3 id="background_page">The background page</h3> | 236 <h3 id="background_page">The background page</h3> |
| 237 | 237 |
| 238 <p> | 238 <p> |
| 239 The following figure shows a browser | 239 The following figure shows a browser |
| 240 that has at least two extensions installed: | 240 that has at least two extensions installed: |
| 241 a browser action (yellow icon) | 241 a browser action (yellow icon) |
| 242 and a page action (blue icon). | 242 and a page action (blue icon). |
| 243 Both the browser action and the page action | 243 Both the browser action and the page action |
| 244 have background pages. | 244 have background pages. |
| 245 This figure shows the browser action's background page, | 245 This figure shows the browser action's background page, |
| 246 which is defined by <code>background.html</code> | 246 which is defined by <code>background</code> |
| 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). One win
dow has a yellow icon; the other has both a yellow icon and a blue icon. The yel
low 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 13 matching lines...) Expand all Loading... |
| 294 | 294 |
| 295 <!-- PENDING: Change the following example and figure | 295 <!-- PENDING: Change the following example and figure |
| 296 to use something that's not a popup? | 296 to use something that's not a popup? |
| 297 (It might lead people to think that popups need background pages.) --> | 297 (It might lead people to think that popups need background pages.) --> |
| 298 | 298 |
| 299 <p> | 299 <p> |
| 300 The following figure shows the architecture | 300 The following figure shows the architecture |
| 301 of a browser action's popup. | 301 of a browser action's popup. |
| 302 The popup's contents are a web page | 302 The popup's contents are a web page |
| 303 defined by an HTML file | 303 defined by an HTML file |
| 304 (<code>popup.html</code>). | 304 (<code>popup</code>). |
| 305 This extension also happens to have a background page | 305 This extension also happens to have a background page |
| 306 (<code>background.html</code>). | 306 (<code>background</code>). |
| 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) can communicate with the extension's background page
(background)." /> |
| 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 19 matching lines...) Expand all Loading... |
| 349 and they can make changes to the pages. | 349 and they can make changes to the pages. |
| 350 In the following figure, | 350 In the following figure, |
| 351 the content script | 351 the content script |
| 352 can read and modify | 352 can read and modify |
| 353 the DOM for the displayed web page. | 353 the DOM for the displayed web page. |
| 354 It cannot, however, modify the DOM of its parent extension's background page. | 354 It cannot, however, modify the DOM of its parent extension's background page. |
| 355 </p> | 355 </p> |
| 356 | 356 |
| 357 <img src="{{static}}/images/overview/arch-3.gif" | 357 <img src="{{static}}/images/overview/arch-3.gif" |
| 358 width="238" height="169" | 358 width="238" height="169" |
| 359 alt="A browser window with a browser action (controlled by background.html) and
a content script (controlled by contentscript.js)." /> | 359 alt="A browser window with a browser action (controlled by background) and a co
ntent script (controlled by contentscript.js)." /> |
| 360 | 360 |
| 361 <p> | 361 <p> |
| 362 Content scripts aren't completely cut off from their parent extensions. | 362 Content scripts aren't completely cut off from their parent extensions. |
| 363 A content script can exchange messages with its parent extension, | 363 A content script can exchange messages with its parent extension, |
| 364 as the arrows in the following figure show. | 364 as the arrows in the following figure show. |
| 365 For example, a content script might send a message | 365 For example, a content script might send a message |
| 366 whenever it finds an RSS feed in a browser page. | 366 whenever it finds an RSS feed in a browser page. |
| 367 Or a background page might send a message | 367 Or a background page might send a message |
| 368 asking a content script to change the appearance of its browser page. | 368 asking a content script to change the appearance of its browser page. |
| 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 |