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
|
<div id="pageData-name" class="pageData">Background Pages</div>
<div id="pageData-showTOC" class="pageData">true</div>
<p id="eventPageWarning" class="warning">
<em>Caution:</em> Consider using event pages instead.
<a href="event_pages.html">Learn more</a>.
</p>
<p>
A common need for extensions is to have
a single long-running script to manage some task or state.
Background pages to the rescue.
</p>
<p>
As the <a href="overview.html#arch">architecture overview</a> explains,
the background page is an HTML page that runs in the extension process.
It exists for the lifetime of your extension,
and only one instance of it at a time is active.
</p>
<p>
In a typical extension with a background page,
the UI —
for example, the browser action or page action
and any options page —
is implemented by dumb views.
When the view needs some state,
it requests the state from the background page.
When the background page notices a state change,
the background page tells the views to update.
</p>
<h2 id="manifest">Manifest</h2>
<p>
Register your background page in the
<a href="manifest.html">extension manifest</a>.
In the common case, a background page
does not require any HTML markup.
These kind of background pages can be
implemented using JavaScript files alone,
like this:
</p>
<pre>{
"name": "My extension",
...
<b>"background": {
"scripts": ["background.js"]
}</b>,
...
}</pre>
<p>
A background page will be generated
by the extension system
that includes each of the files listed
in the <code>scripts</code> property.
</p>
<p>
If you need to specify HTML
in your background page, you can
do that using the <code>page</code>
property instead:
</p>
<pre>{
"name": "My extension",
...
<b>"background": {
"page": "background.html"
}</b>,
...
}</pre>
<p>
If you need the browser to start up early—so
you can display notifications, for example—then
you might also want to specify the
<a href="manifest.html#permissions">"background" permission</a>.
</p>
<h2>Details</h2>
<p>
You can communicate between your various pages using direct script calls,
similar to how frames can communicate.
The <a href="extension.html#method-getViews"><code>chrome.extension.getViews()</code></a> method
returns a list of window objects
for every active page belonging to your extension,
and the
<a href="extension.html#method-getBackgroundPage"><code>chrome.extension.getBackgroundPage()</code></a> method
returns the background page.
</p>
<h2 id="example">Example</h2>
<p>
The following code snippet demonstrates
how the background page
can interact with other pages in the extension.
It also shows how you can use
the background page to handle events
such as user clicks.
</p>
<p>
The extension in this example
has a background page
and multiple pages created
(with
<a href="tabs.html#method-create"><code>chrome.tabs.create()</code></a>)
from a file named <code>image.html</code>.
<!-- [PENDING: Once we have our set of samples, we should point to the example this is from and to other relevant examples. This is currently untested code derived from the screenshot sample.] -->
</p>
<pre>
<em>//In background.js:</em>
// React when a browser action's icon is clicked.
chrome.browserAction.onClicked.addListener(function(tab) {
var viewTabUrl = chrome.extension.getURL('image.html');
var imageUrl = <em>/* an image's URL */</em>;
// Look through all the pages in this extension to find one we can use.
var views = chrome.extension.getViews();
for (var i = 0; i < views.length; i++) {
var view = views[i];
// If this view has the right URL and hasn't been used yet...
if (view.location.href == viewTabUrl && !view.imageAlreadySet) {
// ...call one of its functions and set a property.
view.setImageUrl(imageUrl);
view.imageAlreadySet = true;
break; // we're done
}
}
});
<em>//In image.html:</em>
<html>
<script>
function setImageUrl(url) {
document.getElementById('target').src = url;
}
</script>
<body>
<p>
Image here:
</p>
<img id="target" src="white.png" width="640" height="480">
</body>
</html>
</pre>
|
