An extension consists of a collection of files, packaged for distribution and installation. In this article, we will quickly go through the files that might be present in an extension.
Every extension must contain a file called "manifest.json". This manifest can contain pointers to several other types of files:
- Background pages: Implement long-running logic.
- Content scripts: Interact with web pages (note this is not the same as JavaScript in a
<script>element within a page). - Browser action files: Add buttons to the toolbar.
- Page action files: Add buttons to the address bar.
- Options pages: Define a UI for users to view and change your extension's settings.
- Sidebar files: add a sidebar to the browser.
- Web-accessible resources: Make packaged content accessible to web pages and content scripts.
manifest.json
This is the only file that must be present in every extension. It contains basic metadata such as its name, version and the permissions it requires. It also provides pointers to other files in the extension.
See the manifest.json reference page for all the details.
Background scripts
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.
Specifying background scripts
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.
Background script environment
DOM APIs
Background scripts run in the context of special pages called background pages. This gives them a window global, along with all the standard DOM APIs that provides.
You do not have to supply your background page. If you include a background script, an empty background page will be created for you.
However, you can choose to supply your background page as a separate HTML file:
// manifest.json
"background": {
"page": "background-page.html"
}
WebExtension APIs
Background scripts can use any of the WebExtension APIs in the script, as long as their extension has the necessary permissions.
Cross-origin access
Background scripts can make XHR requests to any hosts for which they have host permissions.
Browser actions
If your extension defines a browser action and that browser action does not have a popup, then you can listen to click events on the browser action's button using the browserAction's onClicked object:
browser.browserAction.onClicked.addListener(handleClick);
Web content
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.
Content security policy
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.
Content scripts
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 <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:
- Make cross-domain XHR requests.
- Use a small subset of the WebExtension APIs.
- Exchange messages with their background scripts and can in this way indirectly access all the WebExtension APIs.
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
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.