Most browsers support the WebExtension API, or something very similar, including Firefox, Chome, Edge, Opera, Vivalid, and Brave.
- webextension-polyfill git,npm: This package standardizes the browser API to support promises in Chrome and other Chromium browsers.
A browser extension requires a manifest.json file. This includes 3 required fields: manifest_version, name, and version, and a few dozen optional fields. Most of the fields are consistently named between chrome and firefox extensions.
Defined in resources/webextensions/generateManifest.js is a basic manifest which imports the various structures included with this template. This module is called by webpack at build time to generate a manifest depending on the browser. Any browser-specific manifest entries should be listed in the correction section in the file.
Details on the list of fields that can be provided in the manifest are found here.
The background entry in the manifest can be used to load scripts to run in the background of your extension. In most cases you will not need to set a script as persistent.
{
"name": "Extension Starter",
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}This isn't a required component of an extension, but is included to encourage refactoring utility functions out of a specific execution context. The reason for this is that if you import a function from one context to another, webpack will bundle the contexts together when building, which can lead to all sorts of strange problems that can be very difficult to debug.
Content scripts are injected into a website to execute custom code. This can be used to parse information from a site, inject css, or anything else you might want to do.
If you need to inject site-specific content scripts into multiple websites, you should probably break this section down further into content scripts for each site, and configure webpack to output additional builds as necessary, to keep your injected scripts as small as possible.
{
"name": "Extension Starter",
...
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["myStyles.css"],
"js": ["contentScript.js"]
}
],
...
}The options page can be written in html, css, and js, and should use browser APIs to communicate user settings to the rest of the extension.
{
"name": "Extension Starter",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}The popup allows you to provide more user interaction to your extension.
{
"name": "Extension Starter",
...
"browser*action": {
"default*icon": {
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
"default*title": "Extension Starter",
"default*popup": "popup.html"
},
...
}