| OLD | NEW |
| 1 <style> | 1 <style> |
| 2 #pics { | 2 #pics { |
| 3 margin:2em 1em 1.5em; | 3 margin:2em 1em 1.5em; |
| 4 } | 4 } |
| 5 | 5 |
| 6 #pics td { | 6 #pics td { |
| 7 text-align:center; | 7 text-align:center; |
| 8 width:50%!important; | 8 width:50%!important; |
| 9 border:none; | 9 border:none; |
| 10 padding:0 1em; | 10 padding:0 1em; |
| 11 font-size:90%; | 11 font-size:90%; |
| 12 } | 12 } |
| 13 | 13 |
| 14 #pics img { | 14 #pics img { |
| 15 width:188; | 15 width:188; |
| 16 height:246; | 16 height:246; |
| 17 border:none; | 17 border:none; |
| 18 } | 18 } |
| 19 </style> | 19 </style> |
| 20 | 20 |
| 21 <div id="pageData-title" class="pageData">Override Pages</div> | 21 <div id="pageData-title" class="pageData">Override Pages</div> |
| 22 <div id="pageData-showTOC" class="pageData">true</div> | 22 <div id="pageData-showTOC" class="pageData">true</div> |
| 23 | 23 |
| 24 <p> | 24 <p> |
| 25 Override pages are a way to replace a page | 25 Override pages are a way to replace a page |
| 26 that Google Chrome provides | 26 that Google Chrome provides |
| 27 with an HTML file that your extension provides. | 27 with an HTML file that your extension provides. |
| 28 An override page usually has CSS and JavaScript code, | 28 An override page usually has CSS and JavaScript code, |
| 29 in addition to HTML. | 29 in addition to HTML. A single extension can only override |
| 30 one page. |
| 30 </p> | 31 </p> |
| 31 | 32 |
| 32 <p> | 33 <p> |
| 33 Currently, the only page you can replace is | 34 Currently, extensions can replace two pages: |
| 34 the <em>New Tab page</em> — | 35 <ul> |
| 35 the page that appears | 36 <li> The <em>New Tab page</em> — |
| 36 when the user creates a new tab or window. | 37 the page that appears when the user creates a new tab or window.</li> |
| 38 |
| 39 <li> The <em>History page</em> — |
| 40 the page that appears when the user selects the 'History' menu item.</li> |
| 41 </ul> |
| 37 </p> | 42 </p> |
| 38 | |
| 39 <table id="pics"> | 43 <table id="pics"> |
| 40 <tr> | 44 <tr> |
| 41 <td> <b>The default New Tab page</b> </td> | 45 <td> <b>The default New Tab page</b> </td> |
| 42 <td> <b>An alternative New Tab page</b> </td> | 46 <td> <b>An alternative New Tab page</b> </td> |
| 43 </tr> | 47 </tr> |
| 44 <tr> | 48 <tr> |
| 45 <td> | 49 <td> |
| 46 <img src="images/ntp-default.png" | 50 <img src="images/ntp-default.png" |
| 47 alt="default New Tab page" | 51 alt="default New Tab page" |
| 48 width="200" height="173"> | 52 width="200" height="173"> |
| 49 </td> | 53 </td> |
| 50 <td> | 54 <td> |
| 51 <img src="images/ntp-blank.png" | 55 <img src="images/ntp-blank.png" |
| 52 alt="a blank New Tab page" | 56 alt="a blank New Tab page" |
| 53 width="200" height="173"> | 57 width="200" height="173"> |
| 54 </td> | 58 </td> |
| 55 </tr> | 59 </tr> |
| 56 </table> | 60 </table> |
| 57 | 61 |
| 58 | |
| 59 <h2 id="manifest">Manifest</h2> | 62 <h2 id="manifest">Manifest</h2> |
| 60 | 63 |
| 61 <p> | 64 <p> |
| 62 Register your New Tab page in the | 65 Register override pages in the |
| 63 <a href="manifest.html">extension manifest</a> | 66 <a href="manifest.html">extension manifest</a> |
| 64 like this: | 67 using property <code>chrome_url_overrides</code>. For example, the new tabs pag
e can be overridden like this: |
| 65 </p> | 68 </p> |
| 66 | 69 |
| 67 <pre>{ | 70 <pre>{ |
| 68 "name": "My extension", | 71 "name": "My extension", |
| 69 ... | 72 ... |
| 70 <b>"chrome_url_overrides": { | 73 <b>"chrome_url_overrides": { |
| 71 "newtab": "newtab.html" | 74 "newtab": "newtab.html" |
| 72 }</b>, | 75 }</b>, |
| 73 ... | 76 ... |
| 74 }</pre> | 77 }</pre> |
| 75 | 78 |
| 79 You can override the history page like this: |
| 80 |
| 81 <pre>{ |
| 82 "name": "My extension", |
| 83 ... |
| 84 <b>"chrome_url_overrides": { |
| 85 "history": "history.html" |
| 86 }</b>, |
| 87 ... |
| 88 }</pre> |
| 89 |
| 90 A single extension may only override one page. |
| 91 |
| 76 <h2 id="tips">Tips</h2> | 92 <h2 id="tips">Tips</h2> |
| 77 | 93 |
| 78 <p> | 94 <p> |
| 79 For an effective New Tab page, follow these guidelines: | 95 For an effective override pages, follow these guidelines: |
| 80 </p> | 96 </p> |
| 81 | 97 |
| 82 <ul> | 98 <ul> |
| 83 <li> | 99 <li> |
| 84 <p> | 100 <p> |
| 85 <b>Make your page quick and small.</b> <br /> | 101 <b>Make your page quick and small.</b> <br /> |
| 86 Because the New Tab page appears often, | 102 Users expect built in browser pages to open instantly. Avoid doing things t
hat |
| 87 its performance is important. | 103 may take a long time. |
| 88 For example, avoid synchronous fetches of network or database resources. | 104 For example, avoid synchronous fetches of network or database resources. |
| 89 </p> | 105 </p> |
| 90 </li> | 106 </li> |
| 91 <li> | 107 <li> |
| 92 <p> | 108 <p> |
| 93 <b>Include a title in your page.</b> <br /> | 109 <b>Include a title in your page.</b> <br /> |
| 94 Otherwise people will see the URL of the page, | 110 Otherwise people will see the URL of the page, |
| 95 which might confuse them. | 111 which might confuse them. |
| 96 Here's an example of specifying the title: | 112 Here's an example of specifying the title: |
| 97 <code><title>New Tab</title></code> | 113 <code><title>New Tab</title></code> |
| 98 </p> | 114 </p> |
| 99 | 115 |
| 100 <li> | 116 <li> |
| 101 <p> | 117 <p> |
| 102 <b>Don't rely on the page having the keyboard focus.</b> <br /> | 118 <b>Don't rely on the page having the keyboard focus.</b> <br /> |
| 103 The address bar always gets the focus first | 119 The address bar always gets the focus first |
| 104 when the user creates a new tab. | 120 when the user creates a new tab. |
| 105 </p> | 121 </p> |
| 106 </li> | 122 </li> |
| 107 <li> | 123 <li> |
| 108 <p> | 124 <p> |
| 109 <b>Don't try to emulate the default New Tab page.</b> <br /> | 125 <b>Don't try to emulate the default pages.</b> <br /> |
| 110 The APIs necessary to create | 126 The APIs necessary to create |
| 111 a slightly modified version of the default New Tab page — | 127 a slightly modified version of the default New Tab page — |
| 112 with top pages, | 128 with top pages, |
| 113 recently closed pages, | 129 recently closed pages, |
| 114 tips, | 130 tips, |
| 115 a theme background image, | 131 a theme background image, |
| 116 and so on — | 132 and so on — |
| 117 don't exist yet. | 133 don't exist yet. |
| 118 Until they do, | 134 Until they do, |
| 119 you're better off trying to make something completely different. | 135 you're better off trying to make something completely different. |
| 120 </p> | 136 </p> |
| 121 </li> | 137 </li> |
| 122 </ul> | 138 </ul> |
| 123 | 139 |
| 124 <h2 id="examples"> Examples </h2> | 140 <h2 id="examples"> Examples </h2> |
| 125 | 141 |
| 126 <p> | 142 <p> |
| 127 You can find simple examples of defining override pages in the | 143 You can find simple examples of defining override pages in the |
| 128 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/override/">examples/api/override</a> | 144 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/override/">examples/api/override</a> |
| 129 directory. | 145 directory. |
| 130 For other examples and for help in viewing the source code, see | 146 For other examples and for help in viewing the source code, see |
| 131 <a href="samples.html">Samples</a>. | 147 <a href="samples.html">Samples</a>. |
| 132 </p> | 148 </p> |
| 133 | 149 |
| 134 | 150 |
| 135 <!-- [PENDING: Maybe have a gallery of NTPs?] --> | 151 <!-- [PENDING: Maybe have a gallery of NTPs?] --> |
| OLD | NEW |