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..6c6d0102be 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/17/2026 --- # Overview of Microsoft Edge extensions @@ -17,17 +17,19 @@ Users browse and install extensions for Microsoft Edge from the [Microsoft Edge The present documentation is for extension developers, rather than end-users of Microsoft Edge extensions. To use extensions for Microsoft Edge, see [User docs about Microsoft Edge extensions](./getting-started/user-docs.md). + **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) @@ -36,53 +38,48 @@ The present documentation is for extension developers, rather than end-users of As a browser extension developer, you publish a Microsoft Edge extension (or theme) at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com). In articles about Microsoft Edge extensions, and at Partner Center, the word _store_ includes the Microsoft Edge Add-ons site. -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. +On the Microsoft Edge Add-ons site, you can enter various search terms in the **Search extensions, themes, and more** text box to find extensions and themes, such as the [Microsoft Bing Homepage and Search Engine](https://microsoftedge.microsoft.com/addons/detail/microsoft-bing-homepage-a/hcfdaddfkgbmekbgcepcnpfiopaigpnn) extension: + +![The Microsoft Bing Homepage and Search Engine extension](./index-images/example-extension.png) -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. - -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. +You can create a Microsoft Edge extension to add features to the browser, or improve the features of specific webpages by defining a companion experience. _Companion experiences_ include ad blockers and password managers. -A Microsoft Edge extension: +An extension should include at least the following features: -![A Microsoft Edge extension](./index-images/example-extension-screenshot.png) +* 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. -## 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. -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). +Microsoft Edge is based on the [Chromium](https://www.chromium.org/Home) open-source browser project. Other browsers are also based on Chromium, such as Google Chrome, Opera, and Brave. -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. +Chromium-based browsers use the same extension APIs and the same way to package extensions. This minimizes the need to maintain multiple, parallel versions of an extension. -The following content focuses mostly on Chromium extensions. +By writing a Chromium extension, you write fewer lines of code and target more browsers. @@ -90,30 +87,41 @@ The following content focuses mostly on Chromium extensions. 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) +* [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. +To make sure your users find your extension in Microsoft Edge, publish your extension on the Microsoft Edge Add-ons site. See [Publish an extension at Microsoft Edge Add-ons](#publish-an-extension-at-microsoft-edge-add-ons), below. + Users might need to install your extension in different browsers. In this scenario, you can migrate existing Chromium extensions from one browser to another. @@ -122,7 +130,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 +144,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 +165,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 +185,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 +206,137 @@ To improve your extension's quality and eligibility for the **Featured** badge, ## See also - + + + + + + +#### Microsoft Edge + + + +###### Store -* [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. +* [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: -* [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. + + +###### End-user docs + +* [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) + + + +###### 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). diff --git a/scripts/package-lock.json b/scripts/package-lock.json index e9a58fdcc1..ced24b068e 100644 --- a/scripts/package-lock.json +++ b/scripts/package-lock.json @@ -1714,9 +1714,9 @@ } }, "node_modules/liquidjs": { - "version": "10.25.5", - "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.5.tgz", - "integrity": "sha512-GKiKeZjJDdVoQAu+S9rzkYsYnYhcep5W3WwZXgb5f+yq484P/k9JqamBbGYu+LBEixcUAXZr2jogdAIjB3ki1w==", + "version": "10.25.7", + "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.7.tgz", + "integrity": "sha512-rPCjJLiD4eDhQjvv964AeXFC+HbeYBbZrd7Z82Q6hqv1lX7G+5w4SJcKLn9CAAAwHI4aS3dTdo083UB79K3pDA==", "dependencies": { "commander": "^10.0.0" }, @@ -3935,9 +3935,9 @@ } }, "liquidjs": { - "version": "10.25.5", - "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.5.tgz", - "integrity": "sha512-GKiKeZjJDdVoQAu+S9rzkYsYnYhcep5W3WwZXgb5f+yq484P/k9JqamBbGYu+LBEixcUAXZr2jogdAIjB3ki1w==", + "version": "10.25.7", + "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.7.tgz", + "integrity": "sha512-rPCjJLiD4eDhQjvv964AeXFC+HbeYBbZrd7Z82Q6hqv1lX7G+5w4SJcKLn9CAAAwHI4aS3dTdo083UB79K3pDA==", "requires": { "commander": "^10.0.0" }