Converting Microsoft MVP Bookmarklet To Extensionlet

This post is about a quick hack, that I was able to get working after learning and developing all day long today. The thing is pretty simple, “Microsoft provides a Bookmark and I hate bookmarks”. Sadly, I was not able to ask Microsoft to upgrade it. Thus, I thought, I should consider working that out myself. I am a regular Chrome user and instead of using the bookmarks, I consider using extensions a lot and when Microsoft provided me with a button, I thought it was an extension, but it was a bookmark URL (having JavaScript code). 

If you had thought of the same, of having an extension to your Browser, instead of using that bookmark link, this post is for you! Although there are many Web Browsers, I am only going to cover Google Chrome, Opera Browser and Mozilla Firefox. I was also looking for Microsoft Edge’s API for extensions, but sadly it is under construction.

Dissecting the tool

Microsoft provided a script, that runs and loads an iframe and then provides access to the authenticated Web page, where you will enter the details. Instead of loading the script from a bookmark URL, I changed it to be an extension. Under this bookmark button, the JavaScript link is:

// Added indentation for readability
javascript:
(function(){
  if(window.myBookmarklet!==undefined) {
     myBookmarklet();
  } else {
     document.body.appendChild(document.createElement('script'))
        .src = 'https://mvp.microsoft.com/Content/Scripts/bookmarklet.js?';
  }
})();

Notice that basically, all it does is that it loads the script and this script on the other hand performs the rest. Thus, the script file is important. A few things to note, before you continue are: 

1. Do not use this extension, if you are not a Microsoft MVP. It is of no use to you but you can still read the article to learn how to build the extensions.
   
2. Microsoft has the rights to authorize who has an access and who has not. You can use the tool and Microsoft will provide you with the sign in form to authorize yourself.
   
3. These are not live. I was not interested in paying $5 to Google for the authorization of my account. You can use it and by the end of this post, I will show you how to add this extension.
   
4. There is no malware in the extension. The source code is open and you are however going to use that “as-it-is”  source code. Hence, don’t worry about anything phishy.
   
5. The procedure just turned the bookmark to an extension. Nothing was changed.
   
6. I hope Microsoft doesn’t mind.

Building extensions for browsers

At the moment, I have extensions for the two browsers only because both of them use the same API, Chrome APIs - Google Chrome and Opera. The same code can be used for both the Browsers and all this requires is

1. A manifest file
2. A script file

The rest of the stuff is not required; such as HTML and CSS files. We also don’t need to confuse things a lot, so only the manifest and the script file would work. I am going to use Chrome Dev Editor; the full featured IDE for building Chrome apps, using JavaScript or Dart and it also has the Polymer GUI editor.



Source code for this is as follows:

{
   "name": "Submit Community Activity",
   "description": "Allows Microsoft MVPs to submit their community activity easily. *Do not use if you are not a Microsoft MVP*",
   "version": "1.0",
   "permissions": [
       "activeTab",
       "tabs"
   ],
   "background": {
       "scripts": ["background.js"],
       "persistent": false
   },
   "browser_action": {
       "default_title": "Submit Community Activity (For Microsoft MVPs only)",
       "default_icon": "/assets/icon_100.png"
   },
   "manifest_version": 2
}

The background.js file is something like this, (which was also clearly visible in the image, given above).

chrome.browserAction.onClicked.addListener(function(tab) {
    // Get the details
    var _url, _title;

    chrome.tabs.query({ active: true }, function (tabs) {
        var tab = tabs[0];

        // Do not proceed if the website open is the one we are going to load.
        if(tab.url.includes("mvp.microsoft.com/en-us/Bookmarklet/Auth")) { return false; }

        // Forward the request to the function.
        loadPage(encodeURIComponent(tab.url), encodeURIComponent(tab.title), tab.index);
    });
});

// This function loads the web page.
function loadPage(pageUrl, pageTitle, pageIndex) {
    chrome.tabs.create({ url: "https://mvp.microsoft.com/en-us/Bookmarklet/Auth?url=" + pageUrl + "&title=" + pageTitle, active: false, index: pageIndex + 1 });
}

Now, a few considerations are:  

1. This script executes, when the Browser action is triggered.
   
   
   
   
2. Script gets the current Window and gets the details for this Web page and the only details which are accessed are:
   
   a. URL of the Webpage
   b. Title of the Webpage
   
   
3. It passes to the function, which loads the new tab, where you will share the activity.
   
4. The function loads the tab. Notice that the tabs are not active; means it will load in the background.
   Later, the stuff is configured by the Website, such as an authentication for showing the page.

Installing extension

This procedure works in Chrome and Opera. You will be able to work around with them in the same way. Also, they use Chrome API so the same code works in both. Since this extension is not live, you will have to add it to your Browser yourself. Follow these steps:

1. Enable the developer mode.
2. Select “Load unpacked extension”. This will allow you to install the packages in the development.
3. Select the directory, where your extension is present.
4. You’re done. Consume the extension.
   
   

The installation will look like this and Chrome will show your extension in the list.


Consume the extension, as you want to. It will help you in not having to show your bookmarks tab always; if you’re like me and don’t like the bookmarks on your Webpage.

Final words

I will add more content to this post as I have it and the source is available on OneDrive. You can download and use it. If another mode is required, consider using GitHub repository for this.

Note, I haven’t shared Opera code, because the same code works here too and sharing the same thing twice won’t make much sense. I will upload Firefox extension code soon and I will update GitHub as well as OneDrive link and the blog post content. Feel free to share.