Edge Extension: Create a custom Edge extension

Since Windows 10 Anniversary Update has been released, Microsoft Edge has officially support extension feature. In this blog post, I want to share you my experience about creating custom extension for Edge.

Objective: Create a custom Edge extension to convert URL to QR code for mobile app sharing.

In china everyone has a mobile IM application WeChat (looks like WhatsApp), If someone wants to share a web page to others, he usually uses WeChat scan QRCode and then send a message that includes web page link.

Tools: Visual Studio Code.

It can be download at: https://code.visualstudio.com/. It supports OS X, Linux and Windows. So it means that you can create a custom extension for Edge even you are using Linux.

Now, let getting start......

Implementation Edge extension

Step 1. Create a folder on you disk eg. EdgeQRCode, and then open it by Visual Studio Code File->Open Folder......

Step 2. Create a configuration file manifest.json in EdgeQRCode folder.

You can get a sample file from https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/api-support/supported-manifest-keys/json-manifest-example/  Yes, it very looks like Mozilla Web extension's configuration file. Actually Edge does not support full JSON schema as Mozilla. The key properties please check https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/api-support/supported-manifest-keys/ .  In this case, I removed some keys from sample file like this:


Since this extension doesn't need running at background I removed background key from sample file. All paths in configuration file are relative path. The root is EdgeQRCode folder.

Step 3. Create a js folder to implement functional of Edge extension.  The jquery.min.js and jquery.qrcode.min.js are downloaded from their official sites. Only index.js is custom code.


For security reason, extension doesn't allow javascript embedded in html file. So we have to set event binding by addEventLinstener(). We can suppose there is a <div> element which id is 'qrcode' used for display QR code. And other div element with 'title' id used for display page title.

Step 4. Create a index.html file for popup UI that already defined in manifest.json file. It has to claim two <div> elements title and qrcode in HTML body.


Step 5. Complement the other elements like CSS file and icons.


Before debugging extension, you have to enable sideloading feature on your Edge. To achieve this please follow section two of below link


And then open Edge menu->Extensions->Load Extension, locate EdgeQRCode folder to load. After loading finished, you have to set "Edge QRCode" on and "Show button next to the address bar" on. like this:


Debugging popup UI is a little bit specific. You can use ms-browser-extension://[Extension_Id]/index.html to let Edge load your popup UI. The extension id is shown in extension properties UI. In this case the URL should be: ms-browser-extension://EdgeQRCode_08b2vmtxn4krp/index.html


When html and javascript has been loaded. You can enable Edge debugging tool by press F12.


The source code can be found here: https://github.com/micli/EdgeQRCode-Extension

For more information about web extension, please visit: https://developer.mozilla.org/en-US/Add-ons/WebExtensions

Edge team wants to compatible Mozilla standard, but there is a gap by now.

If you want to convert an existing Chrome/Firefox extension to Edge, please check: http://bav0.com/converting-any-chrome-extension-to-edge-in-theory/

The extension running like this: