firefox extension manifest file

Here is a basic manifest.json file for a WebExtension in Firefox, which is used to define various properties and configurations for the extension.

{
  "manifest_version": 3,
  "name": "webextensions-selenium-example",
  "description": "Inject a div with id webextensions-selenium-example to verify that WebExtensions work in Firefox/Selenium",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "https://*/*",
        "http://*/*"
      ],
      "js": [
        "inject.js"
      ]
    }
  ],
  "browser_specific_settings": {
    "gecko": {
      "id": "[email protected]"
    }
  }
}

Let's break down each section and its components:

manifest.json Structure

1. Manifest Version

"manifest_version": 3

• manifest_version: Specifies the version of the manifest file format. Version 3 is the latest as of this writing, introducing several changes and improvements over version 2.

2. Basic Information

"name": "webextensions-selenium-example",
"description": "Inject a div with id webextensions-selenium-example to verify that WebExtensions work in Firefox/Selenium",
"version": "0.1"

• name: The name of the extension.
• description: A short description of what the extension does.
• version: The version of the extension.

3. Content Scripts

"content_scripts": [
  {
    "matches": [
      "https://*/*",
      "http://*/*"
    ],
    "js": [
      "inject.js"
    ]
  }
]

• content_scripts: Specifies scripts that should be injected into web pages matching the given URL patterns.
  • matches: An array of URL patterns. In this case, the extension will inject the script into all HTTP and HTTPS pages.
  • js: An array of JavaScript files to be injected. Here, inject.js is the script to be injected.

4. Browser-Specific Settings

"browser_specific_settings": {
  "gecko": {
    "id": "[email protected]"
  }
}

• browser_specific_settings: Contains settings specific to a particular browser.
  • gecko: Settings specific to Firefox (powered by the Gecko engine).
    • id: A unique identifier for the extension, required for Firefox extensions.

Example of inject.js

For completeness, here’s an example of what inject.js might look like. This script injects a div with the specified ID into the web page.

// inject.js
(function() {
  const div = document.createElement('div');
  div.id = 'webextensions-selenium-example';
  div.style.position = 'fixed';
  div.style.top = '0';
  div.style.right = '0';
  div.style.width = '200px';
  div.style.height = '100px';
  div.style.backgroundColor = 'yellow';
  div.style.zIndex = '1000';
  div.innerText = 'WebExtension is active!';
  document.body.appendChild(div);
})();