Creating a Microsoft Edge extension

4 min readOct 6, 2016

Recently me and my twin brother were competing in a by-Microsoft-hosted Hackathon called HackLeague. (information about this event can be found on the web page http://hackleague.io)

We took part in the Browser-wars division in which we were given the assignment to create multiple browser extensions for Edge. For each succesful extension we were given points. There were a maximum of 605 points to be earned (we scored 555, because hey, it was a cool number!)

Install the boilerplate extension in Edge (+10 pts)

This exercise was demonstrated to us as an example. it covered the basics on how to install an extension in Edge.

Convert the Make page Red extension (+25 pts)

Who said creating Edge extensions was difficult?? Well they were certainly wrong! The competition was a first hands-on for most of the battlers to check themselves how to create a new Edge extension. What better example can we have than making a page red! By using the Chrome to Edge convertor we converted an existing chrome extension.

Create a Translate Page extension (+100 pts)

This was were the real fun started, our very own first extension. By searching the API points we managed to open a new browser tab. Once we got that it was as easy as just adding a url to the translator of choice. By giving it a selected attribute we said to focus the newly created tab directly.

A listener would listen to when the page loads, and will open a new tab with the current page translated. We reused a piece of code to display a box in which we said that the current page is being displayed (github source in the end)

function onPageShow(){

   browser.tabs.query({ currentWindow: true, active: true }, function(tabs){
        var url = tabs[0].url;
        var title = tabs[0].title;
        browser.tabs.create({ url: "http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=" + url, selected: true })     
    });

};
// Event binding.
document.addEventListener("pageshow", onPageShow());

Create an extension that counts the number of words on a webpage. The count should appear on an alert box (+150pts)

As most of us figured out, it’s a matter of writing a regular expression and looping through the text nodes. The real challenge behind this assignment though, was creating a popup and actually walking through the DOM. DOM content can be accessed by scripts defined under content_scripts.

function onPageShow(){
   var words = document.body.textContent || document.body.innerText,
    matches = words.match(/(\b[^\s]+\b)/gmi);

   alert(matches.length);
};

manifest.json

"content_scripts" : [{
        "js" : ["js/index.js", "js/background.js", "js/content.js"],
        "matches" : ["*://*/*"]
    }
],

Add context menu functionality to search a word directly in Bing/Google (+50 pts)

Creating a context menu is a small piece of fun, we can integrate actions by modifying the right click menu.

The assignment was to select a piece of text and then through a context menu searching that piece through any search engine. (we used google)

browser.contextMenus.create({
    id: "searchGoogleCM",
    title: "Search in Google",
    contexts: ['selection']
});


browser.contextMenus.onClicked.addListener(function(info, tab) {
    if (info.menuItemId == "searchGoogleCM") {     
        var word = info.selectionText;      
        browser.tabs.create({ url: "https://www.google.com/search?q="+word+"&oq="+word+"&aqs=chrome..69i57j69i60l3.1129j0j8&sourceid=chrome&ie=UTF-8", selected: true })             
    }
});

Please make sure, that whenever you add a context menu, and then wish to remove it again, you have to restart the browser instance. This is probably due to a design problem of the Edge browser. (we also discovered this during the competition and in the end got a list of context menus piling up until we restarted the browser)

Afterwards it was pretty easy, just add the respected onClicked listener and check when your context item was clicked. then we would create a new tab in which we search for the selected text.

You can get the selected word through the selectionText property

Upon creating tabs, make sure to specify an Object, the browser.tabs.create, expects an Object. We define the url and selected.

Attention! After inspecting the Mozilla developer pages, i discovered that selected is deprecated, please use active instead! https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/create

As described in the Mozilla pages:

chrome.tabs.create(
  createProperties,   // object
  function(tab) {...} // optional function
)

Create an extension making use of an external API (e.g. doing sentiment analysis on a webpage) (+220 pts)

For the sentiment analysis, we made use of the cognitive services of Microsoft. This just requires us to create a subscriber key ( which is rate limited to 5000 calls / month, for developing reasons and most likely to help Microsoft train their models ;) ).

Once this subscription key has been acquired, we can call their API through a POST call that sends 3 parameters to their service (the id, the language and our text). They will then do the progressing and return us a response stating the sentiment of the text in a normalised result (a value between 0 and 1 where 0 is sad and 1 is happy).

In edge we created a extension that will call this service from as soon as we click on the extension once it is loaded. This will utilise the Fetch API and send a call to the Microsoft services. After this call we then tell our fetch api that the result is a text object so that we are able to display it in our alert box. Please note however that we are also able to automatically parse this result by telling our fetch api to transform it into a JSON object through .json().