Microsoft Edge Extensions

One of the most requested features for Microsoft Edge is extensions – and for good reason!

Many of us take for granted being able to use browser based plugins such as LastPass’s password manager or extensions for existing applications such as EverNote, OneNote & Skype. One of the first things I noticed when playing with Edge was the lack of a password manager which made everyday use very hard.

The omission of extensions in a browser has the potential to severely impact uptake from every day users (I really cant live without my password manager!) - not to mention developers who use tools such as the Chrome app Postman.

Probably the majority of developers I know will use Chrome or Firefox to develop their applications & partly because of tooling & extensions. As good as Edge’s development tooling has become it still cannot compete with some of the focussed development tooling available through Chromes extension eco system. I'm not suggesting that by simply providing extensions developers will rush to Edge but it can only help Edges uptake amongst the development community.

Anyway I digress by now you have probably heard (as of March 2016) that Edge will soon have extensions!

What format will the extensions be in?

Edge extensions are defined using HTML & JavaScript in a manner very similar to Chrome’s extension model & this is quite deliberate.

At the Edge Web Summit Microsoft demonstrated converting an existing Chrome extension to be utilized in Edge by simply changing a value in the extensions manifest file & making a tweak to a JavaScript file. This is great news as it’s easy to develop/convert an extension for both platforms & there is a lot of documentation/examples available already regarding Chrome extensions.

Previously developing extensions for Internet Explorer was a seriously onerous task. Depending on what you wanted to create there are a number of options available see this MSDN article but many of these involved dark COM based magic which was er about as fun as punching yourself in the balls repeatedly.

Edge has depreciated all the above extension models & I think it would be fair to say there will be few that will miss them.

How can I play with Extensions?

Assuming the above is true when you open Edge you should see Extensions available on the More menu (those 3 dots in the top right corner of Edges menu):

If you don’t see this Extensions menu item & are on Windows insider fast ring updates you probably don’t have the necessary updates installed – I had to reboot several times to allow them to install.

The extensions menu gives you two options to load extensions – via the Windows app store or by selecting the extension itself.

Let’s go get an extension from the Windows App Store by clicking the Get extensions from the store link:

We are going to play with one of the existing extensions.

At the time of writing 5 are available:

Microsoft Translator

Reddit enhancement suite

Mouse gestures

OneNote Clipper

Pin It Button

I am a big fan of the note taking app OneNote so lets install this one.

Edge will prompt us where we want to download this extension to & default to the Windows Downloads folder.

Download the extension then double click on the downloaded exe to extract it to a folder.

Important!

If you are wondering why you have to download, extract and then add an extension & that this all seems a bit clunky you would be right. Expect a much smoother setup model for the final version!

It is also important to note that in some earlier builds (build 14328 doesn’t seem to have this issue) you will receive an error when trying to load a copy of an extension folder. This was due to the exe extraction process doing some magic behind the scenes such as invisibly setting various permissions on the folder etc that for some reason were not copied.

What makes up an extension?

Lets take a look inside the extension folder to see how an extension is put together.

An extension is made up of the following:

Manifest.json (meta data about the extension itself)

EdgeExtension.js – this is the extension itself and Manifest.json has a setting “page” inside “background” that points to this. Note how this page references third party & edgeextensions.js

EdgeInject.js (I’m not sure what this does exactly but seems to add some event listener hooks)

So we have downloaded the extension but not actually installed it yet so let’s do that now.

Install the extension

We can now install the extension by clicking the 3 dots to bring up Edges more menu. Next select the Extensions menu item and then select Load Extension button and select the extracted folder.

Once the extension is loaded it will appear on the extension menu like so:

If we hover over the OneNote Clipper extension and then select the little cog wheel in the right corner we can see information about the extension:

This panel also gives us options to reload and debug the extension.

Reloading extensions

The reload option is particularly useful if you are developing/playing with modifying an existing extension.

For example as a very trivial modification lets modify the menu item text for the extension. To do this:

Click the link next to the location to be taken to the extracted directory

Open the manifest.json file in a text editor

Modify the "default_title" setting and save the file

Now click the reload button and you should see the One note menu option has changed from Clip to OneNote to whatever you modified the setting to:

Debugging

The panel also gives you an easy way to debug extensions by clicking the inspect background page link to open the extension in the browser tools. This then gives you the option to add breakpoints/inspect elements etc.

Conclusion

Although it is early days for Edge Extensions it is great to see Microsoft utilize Chromes extension model approach. This is a tried and tested model and the usage of html/JavaScript makes it easy for any web developer to get involved.
Why not download the preview & have a play?