| OLD | NEW |
| (Empty) | |
| 1 <h1 class="page_title">Override Pages</h1> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 3 <style> |
| 4 #pics { |
| 5 margin:2em 1em 1.5em; |
| 6 } |
| 7 #pics td { |
| 8 text-align:center; |
| 9 width:50%!important; |
| 10 border:none; |
| 11 padding:0 1em; |
| 12 font-size:90%; |
| 13 } |
| 14 #pics img { |
| 15 width:188; |
| 16 height:246; |
| 17 border:none; |
| 18 } |
| 19 </style> |
| 20 <p> |
| 21 Override pages are a way to substitute an HTML file from your extension |
| 22 for a page that Google Chrome normally provides. |
| 23 In addition to HTML, |
| 24 an override page usually has CSS and JavaScript code. |
| 25 </p> |
| 26 <p> |
| 27 An extension can replace any one of the following pages: |
| 28 <ul> |
| 29 <li> <b>Bookmark Manager:</b> |
| 30 The page that appears when the user chooses |
| 31 the Bookmark Manager menu item |
| 32 from the wrench menu or, on Mac, |
| 33 the Bookmark Manager item from the Bookmarks menu. |
| 34 You can also get to this page by entering the URL |
| 35 <b>chrome://bookmarks</b>. |
| 36 </li> |
| 37 <li> <b>History:</b> |
| 38 The page that appears when the user |
| 39 chooses the History menu item |
| 40 from the Tools (wrench) menu or, on Mac, |
| 41 the Show Full History item from the History menu. |
| 42 You can also get to this page by entering the URL |
| 43 <b>chrome://history</b>. |
| 44 </li> |
| 45 <li> <b>New Tab:</b> |
| 46 The page that appears when the user creates a new tab or window. |
| 47 You can also get to this page by entering the URL |
| 48 <b>chrome://newtab</b>. |
| 49 </li> |
| 50 </ul> |
| 51 </p> |
| 52 <p class="note"> |
| 53 <b>Note:</b> |
| 54 A single extension can override |
| 55 <b>only one page</b>. |
| 56 For example, an extension can't override both |
| 57 the Bookmark Manager and History pages. |
| 58 </p> |
| 59 <p> |
| 60 Incognito windows are treated specially. |
| 61 New Tab pages cannot be overridden in incognito windows. |
| 62 Other override pages work in incognito windows |
| 63 as long as the |
| 64 <a href="manifest.html#incognito">incognito</a> |
| 65 manifest property is set to "spanning" |
| 66 (which is the default value for extensions |
| 67 but not for packaged apps). |
| 68 See <a href="overview.html#incognito">Saving data and incognito mode</a> |
| 69 in the Overview for more details on how you should treat |
| 70 incognito windows. |
| 71 </p> |
| 72 <p> |
| 73 The following screenshots show the default New Tab page |
| 74 next to a custom New Tab page. |
| 75 </p> |
| 76 <table id="pics"> |
| 77 <tr> |
| 78 <td> <b>The default New Tab page</b> </td> |
| 79 <td> <b>An alternative New Tab page</b> </td> |
| 80 </tr> |
| 81 <tr> |
| 82 <td> |
| 83 <img src="{{static}}/images/ntp-default.png" |
| 84 alt="default New Tab page" |
| 85 width="200" height="173"> |
| 86 </td> |
| 87 <td> |
| 88 <img src="{{static}}/images/ntp-blank.png" |
| 89 alt="a blank New Tab page" |
| 90 width="200" height="173"> |
| 91 </td> |
| 92 </tr> |
| 93 </table> |
| 94 <h2 id="manifest">Manifest</h2> |
| 95 <p> |
| 96 Register an override page in the |
| 97 <a href="manifest.html">extension manifest</a> like this: |
| 98 </p> |
| 99 <pre>{ |
| 100 "name": "My extension", |
| 101 ... |
| 102 <b> "chrome_url_overrides" : { |
| 103 "<em>pageToOverride</em>": "<em>myPage.html</em>" |
| 104 }</b>, |
| 105 ... |
| 106 }</pre> |
| 107 <p> |
| 108 For <code><em>pageToOverride</em></code>, substitute one of the following: |
| 109 </p> |
| 110 <ul> |
| 111 <li> <code>bookmarks</code> |
| 112 <li> <code>history</code> |
| 113 <li> <code>newtab</code> |
| 114 </ul> |
| 115 <h2 id="tips">Tips</h2> |
| 116 <p> |
| 117 For an effective override page, follow these guidelines: |
| 118 </p> |
| 119 <ul> |
| 120 <li> |
| 121 <p> |
| 122 <b>Make your page quick and small.</b> <br /> |
| 123 Users expect built-in browser pages to open instantly. |
| 124 Avoid doing things that might take a long time. |
| 125 For example, avoid synchronous fetches of network or database resources. |
| 126 </p> |
| 127 </li> |
| 128 <li> |
| 129 <p> |
| 130 <b>Include a title in your page.</b> <br /> |
| 131 Otherwise people might see the URL of the page, |
| 132 which could be confusing. |
| 133 Here's an example of specifying the title: |
| 134 <code><title>New Tab</title></code> |
| 135 </p> |
| 136 </li> |
| 137 <li> |
| 138 <p> |
| 139 <b>Don't rely on the page having the keyboard focus.</b> <br /> |
| 140 The address bar always gets the focus first |
| 141 when the user creates a new tab. |
| 142 </p> |
| 143 </li> |
| 144 <li> |
| 145 <p> |
| 146 <b>Don't try to emulate the default New Tab page.</b> <br /> |
| 147 The APIs necessary to create |
| 148 a slightly modified version of the default New Tab page — |
| 149 with top pages, |
| 150 recently closed pages, |
| 151 tips, |
| 152 a theme background image, |
| 153 and so on — |
| 154 don't exist yet. |
| 155 Until they do, |
| 156 you're better off trying to make something completely different. |
| 157 </p> |
| 158 </li> |
| 159 </ul> |
| 160 <h2 id="examples"> Examples </h2> |
| 161 <p> |
| 162 See the |
| 163 <a href="samples.html#chrome_url_overrides">override samples</a>. |
| 164 </p> |
| OLD | NEW |