IE extensions/add-on – the simplest way (context menu)

I love writing extensions for applications and filling gaps in between making the world simpler (interacting with each other, giving users flexibility in switching from one application to another.) The power of any application (especially Internet Browsers) lies in how features enriched it is. One of the way to achieve this is to lay down extensible architecture and promote developers to write extensions for you application. Moreover such architecture should provide

  • the simplest method to write an extension in few seconds (“hello world” example)
  • more flexible in term of autonomy to developer for by exposing a rich set of API, that they can code almost everything,
  • and the last, limiting them touching sensible data of user.

Well, the power of FireFox lies in more than thousands of extensions that it provides. This could also have been for Internet Explorer, if Microsoft has provided detailed documentation and samples for Internet Explorer when they released IE 5. Over the years Microsoft had always concentrated on the Web development front of IE, not on the extensibility part of it even though providing great ways to extend.

Let’s go through Internet Explorer for writing the simplest extension in just 5 minutes. So, what we want to do? Here I;m showing how to access Html DOM and change it on the fly. All you need to know is simple JavaScript and basic programming concepts. Here are the steps on MSDN that details adding a context menu to Internet Explorer.

  1. Open Registry Editor and point it to HKEY_CURRENT_USER\Software\Microsoft\Internet
    Explorer\MenuExt
  2. Create a new key that represents the text on the context menu. This may include ‘&’ for keyboard shortcut.
  3. Create a blank Html file, say myMenu.html and open it in notepad. Clicking on the new item in the context menu this is the script file which gets executed. Point the default value of the key (created in the step 2) to this html file.
  4. Create a binary value Contexts, and sets its value as 0x1. This can be 0x2 if you want our item to appear when we right click on an image. Or 0x10 if it should appear only it some text is selected. These values can also be binary OR-ed with each other.

Next, open IE and right click (as whatever contexts you have set), you can see your new text appearing in the menu. Then we need to handle the event that Internet Explorer sends to the myMenu.html file. This should contain a script block. It receives an event as external.menuArguments. This menu argument contains a document object that is same as what we use in JavaScript to access the html of the webpage. This can be accessed as below:

<SCRIPT LANGUAGE = "JavaScript">

// Get the window object where the context menu was opened.
var oWindow = window.external.menuArguments;

// Get the document object exposed through oWindow.
var oDocument = oWindow.document;

// Get the selection from oDocument.
// in oDocument.
var oSelect = oDocument.selection;

// Create a TextRange from oSelect.
var oSelectRange = oSelect.createRange();

// Get the text of the selection.
var sNewText = oSelectRange.text;

// If nothing was selected, insert some text.
if (sNewText.length == 0){
oSelectRange.text = "INSERT TEXT";
}

// Otherwise, convert the selection to uppercase.
else{
oSelectRange.text = sNewText.toUpperCase();
}
</SCRIPT>

One another script is for Orkut users, for which Orkut does not shows images when accessed from images.orkut.com

<SCRIPT>
if ( external.menuArguments.document.URL.indexOf("images.orkut.com") >=0
)
{
if (external.menuArguments.document.URL.indexOf("http://") >=0 )
{
external.menuArguments.document.URL = external.menuArguments.document.URL.replace("http://","https://");
}
else
{
var count = external.menuArguments.document.images.length ;
for( var i = 0; i < count ; i++ )
{
var strSrc = external.menuArguments.document.images[i].src;
strSrc = strSrc.replace("http://","https://");
external.menuArguments.document.images[i].src = strSrc ;
}
}
}
else
{
alert("Ooops...nI work only for images.orkut.com");
}
</SCRIPT>

The above script just replaces http with https
for all images in the Html Dom.

The ready-made setup is available here.

The same can done using C#, but it requires .Net framework that makes it difficult
to deploy. Even you can hide your script in a ‘dll’ as resource and point it in
registry (default content) as follows:

@=“res://C:\WINDOWS\system32\abc32.dll/script.html”

~ Ankit

3 thoughts on “IE extensions/add-on – the simplest way (context menu)

  1. Pingback: » Orkut Blocked! ^ No Worries! » Ye Meri Life Hai!

  2. Pingback: ये मेरी लाईफ है - चिराग मेहता » Blog Archive » IE extensions/add-on – the simplest way (context menu)

  3. Shivanand Sharma

    essentially the above 2 comments are posted by yourself Ankit. But I was looking for this tutorial all around the web and couldn’d find it. Eve msdn has tech refrences but not a tut. Thanks for this one.

Leave a Reply

Your email address will not be published. Required fields are marked *