Cross-Browser Compatibility#

Warning: This feature is a work in progress and may be incomplete or subject to change. If you see an error or something that could be improved, please make a pull-request. The link that documents this feature can be found at the bottom of the page.

Extension.js provides a unified API for interacting with the browser across different browsers. This API is based on the WebExtensions API and is supported by Chrome, Firefox, and Edge. By passing the --polyfill flag to the extension package in your npm script for dev, start, or build commands, Extension.js will automatically include necessary polyfills for handling the Gecko-specific browser.* API across all Chromium-based browsers.

How Does It Work?#

{
  "scripts": {
    "dev": "extension@latest dev --polyfill",
    "start": "extension@latest start --polyfill",
    "build": "extension@latest build --polyfill"
  }
}

This command ensures that the namespaced API calls are correctly polyfilled for each browser.

Note: By default, the --polyfill flag is not applied when running --browser=firefox or --browser=gecko as the polyfill is only necessary for Chromium-based browsers.

Best Practices#

• Use the polyfill when needed: If you're developing a cross-browser extension and need to use the Gecko-specific browser.* API, apply the --polyfill flag to ensure the API is correctly polyfilled for all Chromium-based browsers.
• Check the compatibility: Before using the Gecko-specific browser.* API, check the compatibility of the API with the target browser to avoid any issues during the build process. A good place to start is the MDN Web Docs for the WebExtensions API.

Next Steps#

• Learn more about the Browsers Available.