Extending IE Quick and Dirty

IEBlog

Internet Explorer Team Blog

Extending IE Quick and Dirty

  • Comments 54

As a scripting junkie at heart, I set out to write an extension in script for IE7:  inline search – searching the document for text while I type.  Before you get too excited, this does not replace the Find functionality in IE7.  It’s just me getting excited about scripting.

After investigating the different places I could extend IE with script, I decided to implement inline search as a context menu. All I had to do was create an HTML or JavaScript file with my script in it and add keys to the registry as described below.  My context menu item appears whenever I right-click the page.

When the user chooses "Inline Search" from the context menu, the "Find" dialog is displayed.  As soon as she starts typing, it highlights the search terms on the document in yellow with black text.  By default the first instance of the search term found is called the "current" instance, and is highlighted in aqua.  Pressing "<<" (Previous) or ">>" (Next) buttons changes the current search term.  When the user closes the dialog, all the search terms are returned to their original coloring.

The Script

Context menu scripts execute in the context of the current page. Once you get a handle to the DOM from window.menuArguments.document, you can do whatever you want with DHTML – rewrite the page, highlight text, display additional UI, or even call web services.

With a handle to the DOM, the script is pretty straight-forward. At each keyup event, it searches the document and highlights matching terms.  On pages with framesets, it only searches in the context of the frame that was right-clicked on.  Also, for performance reasons, it only searches for terms that are at least 2 characters long.  I use the DOM method execCommand to change the background color of the page around the highlighted text to yellow and the text to black.  The relevant code for searching the text is below.

function findStrings()
{
    
// With each character press, search for the text typed
   
// in the search box.
   
var sz = new String(txtFindText.value);
   
var rgFoundText = new Array(); // array of ranges where text is found
   
var iMatchFlags = findFlags(); // whole word/match case/etc.

    // performance optimization - don't look for less than 2 character words
   
if (sz.length >= 2)
   
{
       
// enable next/prev buttons
       
btnFindNext.disabled = false;
       
btnFindPrev.disabled = false;

        var trTextRangeToSearch = g_Doc.body.createTextRange();
       
while (trTextRangeToSearch.findText(txtFindText.value,
                                           
ALL_CHARS, iMatchFlags))
       
{
            
// add them to our array
           
rgFoundText.push(trTextRangeToSearch.duplicate()); 

            // search for the next occurrence
           
trTextRangeToSearch.collapse(false);
        
}

        // call my local function to draw the screen
       
// with our search terms highlighted
       
redrawScreen(rgFoundText);

        // keep track of text we found
       
g_rgFoundText = rgFoundText;
    
}
   
else
   
{
       
// disable the next/prev buttons
       
btnFindNext.disabled = true;
       
btnFindPrev.disabled = true;
    
}
}

Registering with IE

With your script in hand, the next step is to tell Internet Explorer to include your script in the context menu. 

To register a context menu item, you add a key to the HKCU\Software\Microsoft\Internet Explorer\MenuExt, with the name you want to see in the context menu.  The default value of this key should be a URL pointing to the script to execute.  If you add a DWORD value under this key called "Flags" with the value 0x1, the script will execute as if it were launched from a call to showModalDialog.

Below are the relevant lines from my installer batch file which registers the inline search script attached to this post.  This code registers a context menu item named “Inline Search”, which executes the file “C:\Program Files\IEXTNSN\findonpage.htm”.  The “Flags” value makes it execute as if it had launched from a call to showModalDialog().

reg ADD "HKCU\Software\Microsoft\Internet Explorer\MenuExt\Inline &Search" /ve /t REG_SZ /d "C:\Program Files\IEXTNSN\findonpage.htm" /f
reg ADD "HKCU\Software\Microsoft\Internet Explorer\MenuExt\Inline &Search" /v "Flags" /t REG_DWORD /d "0x1" /f

Get Started

The best way to get familiar with IE extensibility is to get elbow deep in script: see the code, tweak it, and create your own. The source for my inline search add-on and an installer batch file are attached to this post.    To install this script, execute “setup.bat –i MENUCONTEXT “Inline Search” findonpage.htm”.  The batch file also installs toolbar buttons and explorer bands, so you can experiment with other script-based extensions.  Type “setup.bat /?” for complete usage.

This version suffers from some performance concerns, and has only been tested on English systems.  You are free to modify it however you wish.  Please use the comments link to let me know what you did with it, or other creative script extensions you think of. 

Mark Harris
Lead Program Manager, IE

P.S.  if you are really into inline search, be sure to check out Sven Groot’s addon, or the addon done by the team at Core-Services.

Attachment: findonpage.zip
  • Loading...