Un'estensione consiste in una raccolta di file, confezionati per la distribuzione e l'installazione. In questo articolo, esamineremo rapidamente i file che potrebbero essere presenti in un'estensione.
Questo è l'unico file che deve essere necessariamente presente in ogni estensione. Contiene metadati di base come il nome, la versione e le autorizzazioni richieste. Fornisce anche puntatori ad altri file nell'estensione.
Il file manifest può anche contenere puntatori a diversi altri tipi di file:
Vedere la pagina di riferimento manifest.json per maggiori dettagli.
Oltre a quelli a cui fa riferimento il manifest, un'estensione può includere Extension pages aggiuntive con file di supporto.
Extensions often need to maintain long-term state or perform long-term operations independently of the lifetime of any particular web page or browser window. That is what background scripts are for.
Background scripts are loaded as soon as the extension is loaded and stay loaded until the extension is disabled or uninstalled. You can use any of the WebExtension APIs in the script, as long as you have requested the necessary permissions.
You can include a background script using the background key in "manifest.json":
// manifest.json
"background": {
"scripts": ["background-script.js"]
}
You can specify multiple background scripts: if you do, they run in the same context, just like multiple scripts that are loaded into a single web page.
Instead of specifying background scripts, you can specify a background page which has the added advantage of supporting ES6 modules:
manifest.json
// manifest.json
"background": {
"page": "background-page.html"
}
background-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="module" src="background-script.js"></script>
</head>
</html>
Background scripts run in the context of a special page called a background page. This gives them a window global, along with all the standard DOM APIs provided by that object.
Background scripts can use any of the WebExtension APIs in the script, as long as their extension has the necessary permissions.
Background scripts can make XHR requests to any hosts for which they have host permissions.
Background scripts do not get direct access to web pages. However, they can load content scripts into web pages and can communicate with these content scripts using a message-passing API.
Background scripts are restricted from certain potentially dangerous operations, like the use of eval(), through a Content Security Policy. See Content Security Policy for more details on this.
Your extension can include various user interface components whose content is defined using an HTML document:
For each of these components, you create an HTML file and point to it using a specific property in manifest.json. The HTML file can include CSS and JavaScript files, just like a normal web page.
All of these are a type of Extension pages, and unlike a normal web page, your JavaScript can use all the same privileged WebExtension APIs as your background script. They can even directly access variables in the background page using {{WebExtAPIRef("runtime.getBackgroundPage()")}}.
You can also include HTML documents in your extension which are not attached to some predefined user interface component. Unlike the documents you might provide for sidebars, popups, or options pages, these don't have an entry in manifest.json. However, they do also get access to all the same privileged WebExtension APIs as your background script.
You'd typically load a page like this using {{WebExtAPIRef("windows.create()")}} or {{WebExtAPIRef("tabs.create()")}}.
See Extension pages to learn more.
Use content scripts to access and manipulate web pages. Content scripts are loaded into web pages and run in the context of that particular page.
Content scripts are extension-provided scripts which run in the context of a web page; this differs from scripts which are loaded by the page itself, including those which are provided in {{HTMLElement("script")}} elements within the page.
Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.
Unlike normal page scripts, they can:
Content scripts cannot directly access normal page scripts but can exchange messages with them using the standard window.postMessage() API.
Usually, when we talk about content scripts, we are referring to JavaScript, but you can inject CSS into web pages using the same mechanism.
See the content scripts article to learn more.
Web accessible resources are resources such as images, HTML, CSS, and JavaScript that you include in the extension and want to make accessible to content scripts and page scripts. Resources which are made web-accessible can be referenced by page scripts and content scripts using a special URI scheme.
For example, if a content script wants to insert some images into web pages, you could include them in the extension and make them web accessible. Then the content script could create and append img tags which reference the images via the src attribute.
To learn more, see the documentation for the web_accessible_resources manifest.json key.