Awesome WebExtensions Overview

A curated list of awesome resources for WebExtensions development.

🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 fregante/Awesome-WebExtensions · ⭐ 1.3K · 🏷️ Platforms

[ Daily / Weekly / Overview ]

Awesome WebExtensions

A curated list of awesome resources for WebExtensions development.

WebExtensions are a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome. Extensions written for this browser will in most cases run in Firefox with just a few changes.

Follow @fregante for more webext-related news.

Contents

• Getting started
• Community
• Libraries and Frameworks
• Tools
• Testing
• Boilerplates
• Sample Extensions

Getting started

• Chrome Extensions documentation - Documentation for the original Chrome extension model.
• Mozilla's WebExtensions documentation - MDN wiki for the WebExtensions API.
• Browser support for WebExtensions - Compatibility table for Chrome, Edge, Firefox, and Opera.
• Safari Extensions documentation - Developer documentation on building Safari extensions. Technically not WebExtensions, the API is completely different.
• Opera API support - Detailed WebExtensions support for Opera.
• Browser Extension Standard - Standard for the API, supported by Mozilla, Opera and Microsoft.

Community

• Google Groups - Discussions.
• Mozilla Discourse - Discussions.
• #addons:mozilla.org - Matrix channel by Mozilla.
• google-chrome-extension tag on Stack Overflow - Relevant questions.
• firefox-addon-webextensions tag on Stack Overflow - Relevant questions.
• microsoft-edge-extension tag on Stack Overflow - Relevant questions.

Libraries and Frameworks

Code meant become part of the extension.

• webext-options-sync (⭐147) - Helps you manage and autosave your extension's options.
• webext-storage-cache (⭐80) - Map-like promised cache storage with expiration.
• webext-dynamic-content-scripts (⭐84) - Automatically inject your content_scripts on custom domains.
• mozilla/webextension-polyfill (⭐2.6k) - Polyfill to support the standardized promise based API in the browser namespace.
• @types/firefox-webext-browser - Supplies TypeScript types for the browser namespace.
• redux-webext (⭐108) - Uses Redux for managing the state of your WebExtension.
• ExtPay (⭐455) - Take secure payments in extensions without needing to run a server backend.
• inject-react-anywhere (⭐42) - Inject React components into 3rd party sites with convenient API and styles isolation.
• More… (⭐95)

Tools

Apps that help you manage your extensions.

• Chrome Webstore Upload (⭐378) - Upload the extension to the Chrome Web Store via cli (or on Travis, automatically).
• mozilla/web-ext (⭐2.6k) - Command line tool to help build, run, and test WebExtensions.
• chromepet (⭐31) - Get notified when your new version has been published.
• chrome-ext-downloader (⭐49) - Download any extension on Chrome Web Store to see how they do it.
• chrome-store-api (⭐28) - Chrome Web Store API wrapper.
• Chrome extension source viewer (⭐1.4k) - WebExtension to view source code of extensions directly on the store.
• @wext/shipit (⭐127) - Tool to automatically publish to Chrome Web Store, Mozilla Addons and Opera Addons.
• wext-manifest-loader (⭐24) - Webpack loader that lets you specify manifest.json properties to appear only in specific browsers.
• webextension-manifest-loader (⭐7) - Webpack loader that loads browser tailored manifest.json. It also imports all importable properties, allowing you to have 'manifest.json' as your only webpack entry point.
• webpack-extension-reloader (⭐494) - A Webpack plugin to automatically reload browser extensions during development.
• webpack-target-webextension (⭐43) - Adds code-splitting support to WebExtensions build with Webpack.
• Extension.js (⭐3.5k) - Plug-and-play, zero-config, cross-browser extension development tool.

Testing

• sinon-chrome (⭐434) - Mocks the Chrome Extensions API for testing.
• addons-linter (⭐306) - Validate an extension against Mozilla's guidelines.
• webextensions-jsdom (⭐18) - Load popup, sidebar and background with JSDOM based on the manifest.json.
• webextensions-api-fake (⭐16) - In-memory WebExtensions API Fake Implementation (includes TypeScript types).
• webextensions-api-mock (⭐4) - WebExtensions API as sinon stubs (includes TypeScript types).
• webextensions-schema (⭐3) - Programmatically consume the WebExtensions Schema JSON files.

Boilerplates

• browser-extension-template (⭐763) - Barebones boilerplate with parcel, options handler and auto-publishing.
• create-webextension (⭐22) - Yarn WebExtension generator.
• generator-web-extension (⭐292) - WebExtension generator that creates everything you need to get started with cross-browser web-extension development.
• WXT (⭐3.3k) - Next-gen framework for developing web extensions

Sample Extensions

These are simple and modern WebExtensions repositories that could help you figure out where pieces go, including automatic deployment via Travis CI.

• npmhub (⭐753)
• Hide Files on GitHub (⭐320)
• mdn/webextension-examples (⭐4k) - Various example extensions curated for the MDN documentation.