background
| Type | Object |
|---|---|
| Mandatory | No |
| Manifest version | 2 or higher |
| Example |
json |
Use the background key to include one or more background scripts, a background page, or a Service worker in your extension.
Background scripts are the place to put code that needs to maintain a long-term state or perform long-term operations independently of the lifetime of any particular web pages or browser windows.
Background scripts are loaded as soon as the extension is loaded and stay loaded until the extension is disabled or uninstalled unless persistent is specified as false. You can use any WebExtension APIs in the script if you have requested the necessary permissions.
See Background scripts for some more details.
The background key is an object that must have one of these properties (for more information on how these properties are supported, see Browser support):
page |
If you need specific content in the background page, you can define a
page using the
If you use this property, you can not specify background scripts using
|
scripts |
An The scripts share the same The scripts are loaded in the order they appear in the array.
If you specify
Note: If you want to fetch a script from a remote
location with the |
service_worker |
Specify a JavaScript file as the extension service worker. A service worker is a background script that acts as the extension's main event handler. |
The background key can also contain this optional property:
persistent |
A If omitted, this property defaults to
|
preferred_environment |
An If
Chrome only supports service workers, so it ignores this key. If omitted, Firefox and Safari run background scripts as documents. Safari uses a service worker context if the extension specifies |
type |
A Determines whether the scripts specified in
If omitted, this property defaults to |
Browser support
Support for the scripts, page, and service_worker properties varies between browsers like this:
- Chrome:
- supports
background.service_worker. - supports
background.scripts(andbackground.page) in Manifest V2 extensions only. - before Chrome 121, Chrome refuses to load a Manifest V3 extension with
background.scriptsorbackground.pagepresent. From Chrome 121, their presence in a Manifest V3 extension is ignored.
- supports
- Firefox:
background.service_workeris not supported (see Firefox bug 1573659).- supports
background.scripts(orbackground.page) ifservice_workeris not specified or the service worker feature is disabled. Before Firefox 120, Firefox did not start the background page ifservice_workerwas present (see Firefox bug 1860304). From Firefox 121, the background page starts as expected, regardless of the presence ofservice_worker.
- Safari:
- supports
background.scripts(orbackground.page) andbackground.service_worker. - when both are specified, Safari uses
background.scripts(orbackground.page) unlesspreferred_environmentis set toservice_worker. - when
preferred_environmentis set toservice_workerandbackground.service_workerisn't specified, Safari generates a service worker frombackground.scriptsif present.
- supports
To illustrate, this is an example of a cross-browser extension that supports scripts and service_worker. The example has this manifest.json file:
{
"name": "Demo of service worker + event page",
"version": "1",
"manifest_version": 3,
"background": {
"scripts": ["background.js"],
"service_worker": "background.js"
}
}
And, background.js contains:
if (typeof browser === "undefined") {
// Chrome does not support the browser namespace yet.
globalThis.browser = chrome;
}
browser.runtime.onInstalled.addListener(() => {
browser.tabs.create({ url: "http://example.com/first-run.html" });
});
When the extension is executed, this happens:
- in Chrome, the
service_workerproperty is used, and a service worker starts that opens the tab because, in a Manifest V3 extension, Chrome only supports service workers for background scripts. - in Firefox, the
scriptsproperty is used, and a script starts that opens the tab because Firefox only supports scripts for background scripts. - in Safari, the
service_workerproperty is used, and a service worker starts that opens the tab because Safari gives priority to using service workers for background scripts.
Examples
"background": {
"scripts": ["jquery.js", "my-background.js"]
}
Load two background scripts.
"background": {
"page": "my-background.html"
}
Load a custom background page.
Browser compatibility
| desktop | mobile | ||||||
|---|---|---|---|---|---|---|---|
background
|
|
|
|
|
|
|
|
page
|
|
|
|
|
|
|
|
persistent
|
|
|
|
|
|
|
|
preferred_environment
|
|
|
|
|
|
|
|
scripts
|
|
|
|
|
|
|
|
service_worker
|
|
|
|
|
|
|
|
type
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- Has more compatibility info.