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