Creating a Microsoft Edge extension

2017-2-83 minutes to readContributors

In this article

You can learn how to create extensions by following the Borderify and Beastify tutorials on Mozilla Developer Network (MDN). This page highlights the changes you'd need to make to get these samples running in Microsoft Edge.

Once you've created an extension or two and implemented the code tweaks for Microsoft Edge support, jump to the Next steps section for info on how to sideload and package extensions.

If you'd prefer a video walkthrough of creating a Microsoft Edge extension, check out the video below on how to make a basic extension with a background script!

Icon differences

In Microsoft Edge, preferred extension icon sizes are 20px, 25px, 30px, 40px. Other supported sizes are 19px, 35px, 38px. These icon sizes are ideal for Microsoft Edge's frame. Other sizes will be scaled which may cause issues. In the following MDN tutorials, different icon sizes are used and should be swapped out with preferred/supported icon sizes.

Borderify

Learn how to make a very basic extension and ease into the world of extensions by following the Borderify tutorial.

Borderify is a simple extension that draws a red border around pages that match a URL pattern that you specify. The border code is handled with a content script, while the URL match pattern is specified in your manifest.json file within the "content_scripts" field.

Code differences

While making your way though the tutorial, the following adjustments should be made so that
the extension will work with Microsoft Edge:

manifest.json

For the manifest.json file, you'll need to add the "author" key. This is required in Microsoft Edge.

Once you've added the "author" key and updated the icons sizes, you should have something similar to this:

Beastify

The Beastify extension tutorial walks through how the different pieces of an extension work together and uses both a content script and a browser action popup. In the end you'll have an extension that can turn an entire page's content into a picture of an animal of you choosing, selected from the browser action popup.

Code differences

While making your way through the tutorial, the following adjustments should be made so that
the extension will work with Microsoft Edge:

Since Microsoft Edge doesn't support browser.tabs.reload(), you'll need to swap out the else if (e.target.classList.contains("clear)) {...} block of choose_beast.js with the following code. This will find the current active tab in Microsoft Edge and "reset" it using window.location.reload():

The Beastify example uses promises which aren't currently supported for Microsoft Edge extensions. You'll need to change these to callbacks for the extension to run correctly. You can do this by replacing document.addEventListener in the choose_beast.js file with the following code: