Post
Ask Question

Converting Microsoft MVP Bookmarklet To Extensionlet

Introduction

 
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:
  1. // Added indentation for readability    
  2. javascript:    
  3. (function(){    
  4.   if(window.myBookmarklet!==undefined) {     
  5.      myBookmarklet();    
  6.   } else {    
  7.      document.body.appendChild(document.createElement('script'))    
  8.         .src = 'https://mvp.microsoft.com/Content/Scripts/bookmarklet.js?';    
  9.   }    
  10. })();   
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 right to authorize who has 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.
 
editor
 
Source code for this is as follows:
  1. {    
  2.    "name": "Submit Community Activity",    
  3.    "description": "Allows Microsoft MVPs to submit their community activity easily. *Do not use if you are not a Microsoft MVP*",    
  4.    "version": "1.0",    
  5.    "permissions": [    
  6.        "activeTab",    
  7.        "tabs"    
  8.    ],    
  9.    "background": {    
  10.        "scripts": ["background.js"],    
  11.        "persistent": false    
  12.    },    
  13.    "browser_action": {    
  14.        "default_title": "Submit Community Activity (For Microsoft MVPs only)",    
  15.        "default_icon": "/assets/icon_100.png"    
  16.    },    
  17.    "manifest_version": 2    
  18. }   
The background.js file is something like this, (which was also clearly visible in the image, given above).
  1. chrome.browserAction.onClicked.addListener(function(tab) {    
  2.     // Get the details    
  3.     var _url, _title;    
  4.      
  5.     chrome.tabs.query({ active: true }, function (tabs) {     
  6.         var tab = tabs[0];    
  7.      
  8.         // Do not proceed if the website open is the one we are going to load.    
  9.         if(tab.url.includes("mvp.microsoft.com/en-us/Bookmarklet/Auth")) { return false; }    
  10.      
  11.         // Forward the request to the function.    
  12.         loadPage(encodeURIComponent(tab.url), encodeURIComponent(tab.title), tab.index);    
  13.     });    
  14. });    
  15.     
  16. // This function loads the web page.    
  17. function loadPage(pageUrl, pageTitle, pageIndex) {    
  18.     chrome.tabs.create({ url: "https://mvp.microsoft.com/en-us/Bookmarklet/Auth?url=" + pageUrl + "&title=" + pageTitle, active: false, index: pageIndex + 1 });    
  19. }   
Now, a few considerations are:  
  1. This script executes when the Browser action is triggered.
     
    script
     
  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 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.
     
    extension
     
The installation will look like this and Chrome will show your extension on the list.
 
extension
 
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.
 

Summary

 
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 the 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.


Similar Articles