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:

3

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.

4

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.

5

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

Debugging

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

https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/troubleshooting/

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:

2

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

6

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

Appendix

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:

7

 

 

 

 

 

Comments (2)

  1. Shahriar says:

    How can i publish my extension in store?!

    1. Michael Lee2 says:

      By now, Windows store still not accept developer submission. But you can visit:https://developer.microsoft.com/en-us/microsoft-edge/extensions/requests/ to submit a request.

Skip to main content