repository·main·Indexed 26 days ago
https://github.com/mdn/webextensions-examplesA collection of simple, complete, and installable example add-ons designed to demonstrate the use of various WebExtension APIs. These examples serve as starting points for building browser extensions for Firefox, Chrome, Edge, and Opera, covering patterns such as content script injection, sidebar creation, clipboard interaction, and the use of APIs like browser.storage.local, tabs, alarms, and bookmarks.
The Emoji Substitution add-on is a WebExtension designed to demonstrate how to use content scripts to manipulate web page content. It scans web pages for specific text patterns that describe emojis and replaces those words with the actual emoji characters.
Important Limitation: This add-on injects JavaScript into web pages. Because of security restrictions, it will not function on the addons.mozilla.org domain.
The runtime-examples extension demonstrates the use of various WebExtension runtime and notification APIs.
Key features include:
manifest.json file.selection-to-clipboard extension demonstrates how to automatically copy selected text to the clipboard when a user performs a mouse-up action on a web page. It uses a content script (content-script.js) that is injected into all web pages.The root-cert-stats extension demonstrates how to monitor and collect statistics regarding trusted root certificates used during TLS connections.
It consists of:
webRequest.getSecurityInfo() API to record the subject name of each root certificate and the frequency of its use in establishing TLS connections.find-across-tabs extension demonstrates how to perform a search across multiple open browser tabs. It iterates through tabs and invokes the find method on each page. When a match for the search string is located, the extension highlights the text within that tab.borderify extension is a demonstration of how to inject a content script into specific web pages. It uses a script named borderify.js to draw a border around the document.body of any page hosted under the mozilla.org/ domain or its subdomains.The apply-css extension demonstrates how to inject and remove CSS from web pages using a background script and a page action.
Limitation: This extension will not work on the addons.mozilla.org domain because that domain disallows CSS injection operations.
notify-link-clicks-i18n extension demonstrates how to inject content scripts into web pages to monitor user interactions and communicate with a background script. Specifically, it listens for link clicks and triggers a system notification containing the link's URL. This example is primarily used to illustrate internationalization (i18n) for extension names, descriptions, and notification content, supporting en-US, German, Dutch, and Japanese.window-manipulator extension demonstrates various WebExtensions windows API functions. It creates a sidebar (defined as window.html) that provides a user interface for performing simple window operations.browsingData API. It adds a button to the browser's toolbar that, when clicked, clears specific browsing data based on settings configured in the extension's options page.The 'Image Reference Collector' is a WebExtension example designed to demonstrate how to store and manipulate files within a WebExtension using the idb-file-storage library.
Core Functionality:
browserAction) to navigate stored images.Key Technical Demonstrations: