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.

Is the Edge extension model exactly the same as Chromes?

Well compatibility is very much a high priority and the end game is probably W3C standardized browser extension model (see https://www.w3.org/community/browserext/.

But right now we are a bit away from this & you should be aware that not all APIs are supported & there are few differences refer to the documentation below for more information.

I want to learn more

First checkout the 30 minute overview from = the Edge Summit (this contains the conversion demo mentioned earlier) at: https://channel9.msdn.com/Events/WebPlatformSummit/edgesummit2016/ES1614

Then take a scan through the documentation at: https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/

How can I play with Extensions?

So what do you need to play with extensions yourself?

  • Windows 10 on Windows Insider Builds program fast ring
  • A build later than 14291

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):

Image alternative text

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:

Image alternative text

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.

Image alternative text

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)
  • _locals folder (some localization string stuff)
  • Images folder (surprisingly enough contains images & in this case icons of various sizes)
  • Thirdparty folder (just jQuery here)

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:

Image alternative text

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:

Image alternative text

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:

Image alternative text

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.

See https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/debugging-extensions/ for more information.

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?

Further reading

  • https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/
  • https://blogs.windows.com/msedgedev/2016/03/17/preview-extensions/
  • https://www.w3.org/community/browserext/