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 |