diff --git a/microsoft-edge/extensions/index-images/example-extension-screenshot.png b/microsoft-edge/extensions/index-images/example-extension-screenshot.png deleted file mode 100644 index 94f1cb60f8..0000000000 Binary files a/microsoft-edge/extensions/index-images/example-extension-screenshot.png and /dev/null differ diff --git a/microsoft-edge/extensions/index-images/example-extension.png b/microsoft-edge/extensions/index-images/example-extension.png new file mode 100644 index 0000000000..c385ad3bfe Binary files /dev/null and b/microsoft-edge/extensions/index-images/example-extension.png differ diff --git a/microsoft-edge/extensions/index-images/featured-badge-on-page.png b/microsoft-edge/extensions/index-images/featured-badge-on-page.png index 36ff46d130..135ca0db7a 100644 Binary files a/microsoft-edge/extensions/index-images/featured-badge-on-page.png and b/microsoft-edge/extensions/index-images/featured-badge-on-page.png differ diff --git a/microsoft-edge/extensions/index.md b/microsoft-edge/extensions/index.md index 29e0bf167a..1f7b1765eb 100644 --- a/microsoft-edge/extensions/index.md +++ b/microsoft-edge/extensions/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge ms.subservice: extensions -ms.date: 08/20/2024 +ms.date: 04/07/2026 --- # Overview of Microsoft Edge extensions @@ -19,16 +19,38 @@ The present documentation is for extension developers, rather than end-users of **Detailed contents:** * [Introduction](#introduction) -* [Basic guidance](#basic-guidance) -* [Benefits of Chromium extensions](#benefits-of-chromium-extensions) +* [Sites for extensions for various browsers](#sites-for-extensions-for-various-browsers) +* [Benefits of Chromium-based extensions](#benefits-of-chromium-based-extensions) * [Browser compatibility and extension testing](#browser-compatibility-and-extension-testing) + * [Browser-specific APIs](#browser-specific-apis) * [Publish your extension to browser stores](#publish-your-extension-to-browser-stores) * [Migrate an existing extension to Microsoft Edge](#migrate-an-existing-extension-to-microsoft-edge) * [Publish an extension at Microsoft Edge Add-ons](#publish-an-extension-at-microsoft-edge-add-ons) * [The Featured badge](#the-featured-badge) * [What the Featured badge represents](#what-the-featured-badge-represents) - * [Why the Featured badge might be revoked](#why-the-featured-badge-might-be-revoked) + * [Reasons why the Featured badge could be revoked](#reasons-why-the-featured-badge-could-be-revoked) * [See also](#see-also) + * [Microsoft Edge](#microsoft-edge) + * [Store](#store) + * [End-user docs](#end-user-docs) + * [Development](#development) + * [Google Chrome, or Chromium browser engine](#google-chrome-or-chromium-browser-engine) + * [Store](#store-1) + * [Development](#development-1) + * [Opera](#opera) + * [Store](#store-2) + * [Development](#development-2) + * [Brave](#brave) + * [Store](#store-3) + * [End-user docs](#end-user-docs-1) + * [Development](#development-3) + * [Apple Safari](#apple-safari) + * [Store](#store-4) + * [Development](#development-4) + * [Mozilla Firefox](#mozilla-firefox) + * [Store](#store-5) + * [Development](#development-5) + * [Non-browser extensions](#non-browser-extensions) @@ -38,79 +60,94 @@ As a browser extension developer, you publish a Microsoft Edge extension (or the You can create a Microsoft Edge extension if you have an idea or product that is based upon either a specific web browser, or improvements to features of specific webpages. Examples of _companion experiences_ include ad blockers and password managers. +This article focuses mostly on Chromium-based extensions. + An extension should include at least the following features: -* An app manifest JSON file that contains basic platform information. -* A JavaScript file that defines the function. -* HTML and CSS files that define the user interface. +* An app manifest JSON file that contains basic platform information. +* A JavaScript file that defines the function. +* HTML and CSS files that define the user interface. To work directly with a specific part of the browser, such as a window or tab, you must send API requests, and must often reference the browser by name. -A Microsoft Edge extension: +In the **Search extensions, themes, and more** text box, you can enter various search terms, such as the extension owner [Microsoft Corporation](https://microsoftedge.microsoft.com/addons/search/microsoft%20corporation). Searching returns extensions and themes, such as the [Microsoft Bing Homepage and Search Engine](https://microsoftedge.microsoft.com/addons/detail/microsoft-bing-homepage-a/hcfdaddfkgbmekbgcepcnpfiopaigpnn) extension: -![A Microsoft Edge extension](./index-images/example-extension-screenshot.png) +![The Microsoft Bing Homepage and Search Engine extension](./index-images/example-extension.png) -## Basic guidance +## Sites for extensions for various browsers -Great places to begin your extension development tutorials and documentation research are sites hosted by the browser organizations. Some of the popular browsers to build extensions for include Microsoft Edge, Safari, Firefox, Chrome, Opera, and Brave. +Great places to begin your extension development tutorials and documentation research are sites hosted by the browser organizations. -The following table isn't exhaustive or definitive; it's just a starting point for your research. +Some of the popular browsers to build extensions for are listed below. This list isn't exhaustive or definitive; it's just a starting point for your research. -| Web browser | Chromium-based? | Extension development webpage | -|:--- |:--- |:--- | -| Safari | No | [Safari App Extensions](https://developer.apple.com/documentation/safariservices/safari_app_extensions) | -| Firefox | No | [Browser Extensions](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions) | -| Chrome | Yes | [API Reference](https://developer.chrome.com/extensions) | +| Web browser | Chromium-based? | Extension development documentation | +|---|---|---| +| Microsoft Edge | Yes | [Microsoft Edge Add-ons Developer](https://developer.microsoft.com/microsoft-edge/extensions) | +| Google Chrome | Yes | [Chrome Extensions](https://developer.chrome.com/extensions) | | Opera | Yes | [Extensions Documentation](https://dev.opera.com/extensions) | | Brave | Yes | Uses [Chrome Web Store](https://chrome.google.com/webstore/category/extensions) | -| Microsoft Edge | Yes | [Microsoft Edge Add-ons Developer](https://developer.microsoft.com/microsoft-edge/extensions) | +| Apple Safari | No | [Safari app extensions](https://developer.apple.com/documentation/safariservices/safari_app_extensions) | +| Mozilla Firefox | No | [Browser extensions](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions) | -> [!IMPORTANT] -> Many of the tutorials on these sites use browser-specific APIs that might not match the browser for the app you are developing. In most cases, a Chromium extension works as-is in different Chromium browsers and the APIs work as expected. Some less-common APIs might be browser-specific. Links to the tutorials are in the [See also](#see-also) section, below. +For browser extension stores, end-user docs, and developer docs, see [See also](#see-also), below. -## Benefits of Chromium extensions +## Benefits of Chromium-based extensions -If your goal is to publish your extension in the extensions store for each browser, your extension must be modified for each version to target and run in each distinct browser environment. For example, [Safari extensions](https://developer.apple.com/documentation/safariservices/safari_app_extensions) can use both web and native code to communicate with counterpart native applications. +If your goal is to publish your extension in the extensions store for each browser, your extension must be modified for each version to target and run in each distinct browser environment. For example, [Safari app extensions](https://developer.apple.com/documentation/safariservices/safari_app_extensions) can use both web and native code to communicate with counterpart native applications. -The last four browsers in the previous table use the same code package and minimize the need to maintain parallel versions. These browsers are based on the [Chromium open-source project](https://www.chromium.org/Home). +The following browsers are based on the [Chromium](https://www.chromium.org/Home) open-source browser project: +* Microsoft Edge +* Google Chrome +* Opera +* Brave + +Chromium-based browsers use the same code package, and minimize the need to maintain parallel versions. Benefits of creating a Chromium extension: * Enables writing the fewest lines of code. * Enables targeting the maximum number of extension stores and the maximum number of users who can find and acquire your extension. -The following content focuses mostly on Chromium extensions. - ## Browser compatibility and extension testing Occasionally, API parity doesn't exist between Chromium browsers. For example, there are differences in the identity and payment APIs. To make sure your extension meets customer expectations, review API status through the following official browser documentation: -* [Chrome APIs](https://developer.chrome.com/extensions/api_index) -* [Extension APIs supported in Opera](https://dev.opera.com/extensions/apis) -* [Port Chrome extension to Microsoft Edge](developer-guide/port-chrome-extension.md) +* [Chrome APIs](https://developer.chrome.com/extensions/api_index) +* [Extension APIs supported in Opera](https://dev.opera.com/extensions/apis) +* [Port a Chrome extension to Microsoft Edge](./developer-guide/port-chrome-extension.md) The APIs that you require define the changes that you must make to address the differences between each browser. You might need to create slightly different code packages with small differences for each browser extension store. -To test your extension in different environments before you submit the extension to a browser extension store, side-load the extension into your browser while you develop it. +To test your extension in different environments before you submit the extension to a browser extension store, sideload the extension into your browser while you develop it. See also: * [Sideload an extension to install and test it locally](./getting-started/extension-sideloading.md) + +#### Browser-specific APIs + +In most cases, an extension that's designed for the Chromium browser engine works on the various Chromium-based browsers; the APIs work as expected. Some less-common APIs might be browser-specific. + +Some tutorials for browser-specific extension store sites use browser-specific APIs, which might not match the browser for the app that you're developing. Links to the tutorials are in the [See also](#see-also) section, below. + + ## Publish your extension to browser stores You can submit and seek browser extensions in the following browser extension stores. -* [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) -* [Chrome Web Store](https://chrome.google.com/webstore/category/extensions) -* [Firefox Browser Add-ons](https://addons.mozilla.org/firefox/extensions) -* [Opera addons](https://addons.opera.com/extensions) +* [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) +* [Chrome Web Store](https://chrome.google.com/webstore/category/extensions) +* [Opera addons](https://addons.opera.com/extensions) +* [Chrome Web Store](https://chrome.google.com/webstore/category/extensions) - store for Brave extensions. +* [Apple App Store](https://apps.apple.com) +* [Firefox Browser Add-ons](https://addons.mozilla.org/firefox/extensions) Some browser extension stores allow you to download listed extensions from other browsers. However, cross-browser access isn't guaranteed by every store. To make sure your users find your extension in different browsers, you should maintain a listing on each store. @@ -122,7 +159,7 @@ Users might need to install your extension in different browsers. In this scenar If you've already developed an extension for another Chromium-based browser, you can submit it at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com). You don't need to rewrite your extension or verify that it works in Microsoft Edge. However, when you migrate an existing Chromium extension to other Chromium browsers, make certain the same APIs or alternatives are available for your target browser. -For more information on porting your Chrome extension to Microsoft Edge, see [Port Chrome extensions to Microsoft Edge](developer-guide/port-chrome-extension.md). After you port your extension to the target browser, the next step is to publish it. +For more information on porting your Chrome extension to Microsoft Edge, see [Port a Chrome extension to Microsoft Edge](./developer-guide/port-chrome-extension.md). After you port your extension to the target browser, the next step is to publish it. @@ -136,14 +173,14 @@ When you choose an email address to register, consider whether you must transfer To submit an extension at Microsoft Edge Add-ons, you need to provide the following items: -* An archive (`.zip`) file that contains your code files. -* All required visual assets, which include a logo and small promotional tile. -* Optional promotional media, such as screenshots, promotional tiles, and a video URL. -* Information that describes your extension such as the name, short description, and a privacy policy link. +* An archive (`.zip`) file that contains your code files. +* All required visual assets, which include a logo and small promotional tile. +* Optional promotional media, such as screenshots, promotional tiles, and a video URL. +* Information that describes your extension such as the name, short description, and a privacy policy link. Different stores might have different submission requirements. The above list summarizes the requirements for publishing an extension for Microsoft Edge; for details, see [Publish a Microsoft Edge extension](./publish/publish-extension.md). -After you've successfully submitted your extension, your extension undergoes a review process and either passes or fails the certification process. Owners are notified of the outcome and given next steps as required. If you submit an extension _update_ at Microsoft Edge Add-ons, that begins a new review process. +After you've successfully submitted your extension, your extension undergoes a review process and either passes or fails the certification process. You're notified of the outcome and given next steps as required. If you submit an extension _update_ at Microsoft Edge Add-ons, that begins a new review process. @@ -157,9 +194,9 @@ Extensions are curated to help users discover trustworthy and high-performing ex The **Featured** badge is awarded to select extensions that align with [Best practices for extensions](./developer-guide/best-practices.md). When you hover over the **Featured** badge, the tooltip reads: **This extension follows all of Microsoft's recommended practices and has been verified.** -For example, the [Microsoft Editor: Spelling & Grammar Checker](https://microsoftedge.microsoft.com/addons/detail/microsoft-editor-spellin/hokifickgkhplphjiodbggjmoafhignh) extension has a **Featured** badge: +For example, the [Microsoft Bing Homepage](https://microsoftedge.microsoft.com/addons/detail/microsoft-bing-homepage/cjmjijnpnollocennnapedpaeecninea) extension has a **Featured** badge, to the right of the extension name: -![The Featured badge to the right of the extension name](./index-images/featured-badge-on-page.png) +![The Featured badge next to the extension name](./index-images/featured-badge-on-page.png) @@ -177,7 +214,7 @@ The **Featured** badge is not a judgment of safety. An extension that doesn't h -#### Why the Featured badge might be revoked +#### Reasons why the Featured badge could be revoked The **Featured** badge isn't permanent. An extension might lose the **Featured** badge if the extension no longer meets the evolving standards, or if the extension's quality signals degrade over time. @@ -198,24 +235,144 @@ To improve your extension's quality and eligibility for the **Featured** badge, ## See also - + + + + + + +#### Microsoft Edge + + + +###### Store + +* [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) + * [Microsoft Corporation](https://microsoftedge.microsoft.com/addons/search/microsoft%20corporation) - Extensions or themes by Microsoft. + * [Microsoft Bing Homepage and Search Engine](https://microsoftedge.microsoft.com/addons/detail/microsoft-bing-homepage-a/hcfdaddfkgbmekbgcepcnpfiopaigpnn) extension. + * [Microsoft Bing Homepage](https://microsoftedge.microsoft.com/addons/detail/microsoft-bing-homepage/cjmjijnpnollocennnapedpaeecninea) extension. + + + +###### End-user docs -* [Best practices for extensions](./developer-guide/best-practices.md) -* [Extension concepts and architecture](./getting-started/index.md) -* [Manage Microsoft Edge extensions in the enterprise](/deployedge/microsoft-edge-manage-extensions) -* [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) - Browse and install extensions for Microsoft Edge. +* [User docs about Microsoft Edge extensions](./getting-started/user-docs.md) +* [Everything to know about browser extensions](https://www.microsoft.com/edge/learning-center/everything-to-know-about-browser-extensions?form=MA13I2&msockid=3078d2dac55660f53e4ec6a8c4ec61bf) +* [Add, turn off, or remove extensions in Microsoft Edge](https://support.microsoft.com/microsoft-edge/add-turn-off-or-remove-extensions-in-microsoft-edge-9c0ec68c-2fbc-2f2c-9ff0-bdc76f46b026) -End-user docs: -* [Everything to know about browser extensions](https://www.microsoft.com/edge/learning-center/everything-to-know-about-browser-extensions?form=MA13I2&msockid=3078d2dac55660f53e4ec6a8c4ec61bf) - introduction for users. -* [Add, turn off, or remove extensions in Microsoft Edge](https://support.microsoft.com/microsoft-edge/add-turn-off-or-remove-extensions-in-microsoft-edge-9c0ec68c-2fbc-2f2c-9ff0-bdc76f46b026) - support steps for users. + + +###### Development + + +* [Extension concepts and architecture](./getting-started/index.md) +* [Sideload an extension to install and test it locally](./getting-started/extension-sideloading.md) +* [Port a Chrome extension to Microsoft Edge](./developer-guide/port-chrome-extension.md) +* [Publish a Microsoft Edge extension](./publish/publish-extension.md) +* [Best practices for extensions](./developer-guide/best-practices.md) External: -* [Build a Safari App extension](https://developer.apple.com/documentation/safariservices/safari_app_extensions/building_a_safari_app_extension) -* [Your first extension (Firefox)](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension) -* [Extensions > Get started](https://developer.chrome.com/docs/extensions/get-started/) -* [Get started (Opera)](https://dev.opera.com/extensions/getting-started) -* [Port a Google Chrome extension](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension) - -Extensions for Visual Studio Code: -* [Microsoft Edge DevTools extension for Visual Studio Code](../visual-studio-code/microsoft-edge-devtools-extension.md) -* [webhint extension for Visual Studio Code](../visual-studio-code/webhint.md) +* [Microsoft Edge Add-ons Developer](https://developer.microsoft.com/microsoft-edge/extensions) +* [Manage Microsoft Edge extensions in the enterprise](/deployedge/microsoft-edge-manage-extensions) +* [Register for a developer account](https://developer.microsoft.com/registration) at Microsoft Partner Center. + + + +#### Google Chrome, or Chromium browser engine + + + +###### Store + +* [Chrome Web Store](https://chrome.google.com/webstore/category/extensions) + + + +###### Development + +* [Chrome Extensions](https://developer.chrome.com/extensions) + * [Chrome Extensions > Get started](https://developer.chrome.com/docs/extensions/get-started/) +* [Chromium open-source project](https://www.chromium.org/Home) +* [Chrome APIs](https://developer.chrome.com/extensions/api_index) + + + +#### Opera + + + +###### Store + +* [Opera addons](https://addons.opera.com/extensions) + + + +###### Development + +* [Extensions Documentation](https://dev.opera.com/extensions) + * [Getting Started](https://dev.opera.com/extensions/getting-started) + * [Extension APIs Supported in Opera](https://dev.opera.com/extensions/apis) + + + +#### Brave + + + +###### Store + +* [Chrome Web Store](https://chrome.google.com/webstore/category/extensions) - store for Brave extensions. + + + +###### End-user docs + +* [How can I add extensions to Brave?](https://support.brave.app/hc/en-us/articles/360017909112-How-can-I-add-extensions-to-Brave) +* [Browser Extensions](https://brave.com/learn/category/browser-extensions/) + + + +###### Development + +* [Web search: Develop a Brave browser extension](https://www.bing.com/search?q=Develop+a+Brave+browser+extension) + + + +#### Apple Safari + + + +###### Store + +* [Apple App Store](https://apps.apple.com) + * [The Best Safari Extensions](https://apps.apple.com/us/story/id1377753262) + + + +###### Development + +* [Safari app extensions](https://developer.apple.com/documentation/safariservices/safari_app_extensions) + + + +#### Mozilla Firefox + + + +###### Store + +* [Firefox Browser Add-ons](https://addons.mozilla.org/firefox/extensions) + + + +###### Development + +* [Browser extensions](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions) +* [Porting a Google Chrome extension](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension) (to Firefox). + + + +#### Non-browser extensions + +* [Microsoft Edge DevTools extension for Visual Studio Code](../visual-studio-code/microsoft-edge-devtools-extension.md) +* [webhint extension for Visual Studio Code](../visual-studio-code/webhint.md)