Extending IE Quick and Dirty



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.

findonpage.zip

Comments (53)

  1. Anonymous says:

    And then, if you installing a 3rd-party script, there’s no easy way to install or uninstall these things.  Why not put it under HKLM as well?  Talk about a brain-dead design decision!

  2. Anonymous says:

    Like Mark said: quick and dirty. This wasn’t intended to be a beautifully polished example…

    P.S. how about a customization tutorial, like how to hack- i mean move toolbar buttons and the command bar 😉 hehehe… There is a registry entry to allow the menu bar to be at the top (not that I use it, I don’t like the menu bar anyway!) so surely there is some hidden way to control other things, somewhere 😛

  3. Anonymous says:

    So, Internet Explorer 7 is just about finished, and it’s a general all-around improvement. At the very…

  4. Anonymous says:

    @Carter: I’ve got a few interesting tweaks up here: http://www.enhanceie.com/ie/tweaks.asp.  I’m always on the lookout for more.

  5. Anonymous says:

    So why are you using execCommand to set the highlight? Why not just set the CSS style?

  6. Anonymous says:

    @Matt Ellis: The words "Quick" and "Dirty" together with "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." give you your answer.

    English, it’s such a tough language.

  7. Anonymous says:

    ok, I will not flame you this time for needlessly using IE-propriety extensions but I would like to demonstrate that especially the unhighlighting is painstakingly slow which you can test for yourself in a tweaked version here: http://therealcrisp.xs4all.nl/upload/findonpage.html

    I also created a script of my own using standard DOM-functionality and which thus works in all modern browsers (and IE) and which is also a lot faster and more extendable: http://therealcrisp.xs4all.nl/upload/highlight.html

    cheers

  8. Anonymous says:

    First of all, thanks for mentioning my add-on. 🙂

    I took a look at your approach, it’s certainly a very interesting one. It’s definitely a lot less code than what I did (at the cost of some features; you can’t make a toolbar, or capture CTRL-F like I did, using script alone).

    What I find most interesting however is your use of execCommand to highlight the results. If you’ve used my add-on you know I simply change the selection to highlight the search results. I did look at execCommand, but didn’t use because it changes the DOM; it introduces an additional <font> tag in the page.

    Now assume a page that has a CSS stylesheet using the rule "font { font-size: xx-large; }". Now your highlighting causes the text not only to be yellow, but also to be larger (or worse, imagine the rule "font { display: none; }", now the text disappears instead of being highlighted!)

    In addition, the page might use some javascript of its own that depends on that font tag not being there. For these reasons I decided not to use execCommand.

    This isn’t meant to say "my add-on is better than your add-on, nya nya" (although it may sound that way 😉 ). I’m just letting people know why I didn’t use that approach.

    Thanks again for mentioning me.

  9. Anonymous says:

    Why not completing IE by adding a tool like this? The standard search is annoying

  10. Anonymous says:

    Installed IE7, but so far only problems with opening pages, crashing browser and logging in to secure websites. Tried to get back to 6 as I need to be able to log in at certain websites, but that failed. I know that thi smay not be the best or appropriate place to ask, but anyone has a solution?

  11. Anonymous says:

    I think the only way to get people to understand that it’s just to show a technique is to put a big header at the top in the largest font size possible (5 letters per line for maximum effect) and red colouring. Of course, you have to spend all the time you can to use the most "standardized" method available and redo entire websites too. Who cares about the time it costs. What do you mean "don’t fix it if it isn’t broken?".

  12. Anonymous says:

    @Tino Zijdel:

    For someone who complains about the lack of standards support in IE/MS websites, you sure don’t do a great job yourself.

    Your homepage uses a table for layout.

    What do you say, it was just a quick temporary page? Oh okay. Nothing like this script on here, of course.

    By the way, your second page doesn’t even work.

    Error: g_Doc.body.createTextRange is not a function

    Source file: http://therealcrisp.xs4all.nl/upload/findonpage.html

    Line: 176

    (4 of these)

    Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.

    Source file: http://therealcrisp.xs4all.nl/upload/findonpage.html

    Line: 175

    Tsk tsk.

  13. Anonymous says:

    Without delving into the obvious proprietary nature of this solution, one has to wonder why, if find-as-you-type was so easy to implement, it couldn’t have been squeezed into IE 7.

    It seems to me that find-as-you-type would have been immediately beneficial to end-users (think mom, not CSS developers), for whom IE 7 offers much bread (needed security improvements, questionable toolbar overhaul, and obscenely overdue tabs) but little gravy (page zoom).

  14. Anonymous says:

    Nice post.

    Good example to.

    Not that it is that good a program but it is an excellent object for discussion.

    Clearly there is still a lot of possibilities to create the extention to IE7 that everybody will want.

    Question is ? Who will be building it ?

  15. Anonymous says:

    Aedrin: personally I don’t see what my ‘homepage’ has got to do with this. It’s not really a homepage either but just an index.html I put there years ago. I’ve learned a lot since then and I’m proud of that.

    Secondly if you would have read my previous comment more carefully you would know that the findonpage.html example is actually Mark Harris’ version which I only tweaked a bit to be able to do some benchmarks, and yes that one will not work in any other browser but IE.

    The example I made was just to illustrate that you don’t actually need those IE-propriety extensions and that the more ‘standardized’ method can be even faster (performance is an actual issue in Mark Harris’ version).

    And yes I know this blogpost is also more about illustrating a certain technique so I just showed my approach as an alternative so that people may learn from it. Now is that so bad?

  16. Anonymous says:

    @Aedrin.

    Tables may not be uber cool for layout, but when you need a page to work in all browsers (cough, IE too), tables sometimes just work so much easier.

    That said, I wouldn’t rip into Tino at all.  He provided a very quick, xbrowser version that didn’t need all the hackery of the original, and all the info he gave was helpful.

    Kudos Tino, I thought your version(s) were cool.

  17. Anonymous says:

    Steve,

    I think you may have misread what I said.

    I was pointing out that sometimes you just want to show a technique, not provide a reliable cross-browser method.

    Tino preaches that all websites should be fully compliant to "standards", yet he provides pages that provide serious errors. He then further helps my point by pointing out that it is an old website. Indeed, websites get old and lose attention needed to keep them up to date, or there just isn’t time to do that. Perhaps this happens to other people’s websites too? Such as Microsoft’s…

  18. Anonymous says:

    I know this is just a demo to illustrate how to extend IE but I’ve been using EasyFinder plugin for Maxthon, http://forum.maxthon.com/?showtopic=14552 , and am hoping that the IE7 developers would take a look at it and incorporate its feature in IE.

    What I like about it beside the finding and highlighting the matched results is that you can quickly flip through the matching terms by using the mouse wheel.  Another cool feature is that the dialog box become semi-transparent when you move the mouse pointer away from it.  I have the opacity set low enough to read right through it.

  19. Anonymous says:

    Aedrin: am I preaching? and what exactly?

    I never ever said that I think that all websites should be compliant to standards, I however do think that if you are to built a website today or write a script today you should try to adhere to today’s standards.

    And where exactly do I ‘provide’ pages with serious errors? Are you referring to that index.html on my testserver again (which I wouldn’t call a website at all)? or perhaps again to findonpage.html? which isn’t my code but the very code from the Microsoft chap that started this blogpost… please learn to read…

  20. Anonymous says:

    Instead of faffing about with this nonsense, you might have spent a bit of time putting out a slightly different tilt on the EI 7 publicity on the Japanese and Chinese sites, explaining that IE 7 will actually do what IE 6 has refused to do for the last 5 years, being that it should be able to resolve addresses that people can actually read and unstand. Or has Microsoft got its head so far up its own arse that it cannot comprehend the significant of the Internet to the wider World?

  21. Anonymous says:

    @Leander: Chances are good that you have a buggy browser extension installed.  Try the first set of troubleshooting steps here: http://www.enhanceie.com/ie/troubleshoot.asp

    @Dave: I’m not sure what you’re trying to say?  

    IDN has been possible in IE for many years using plugins from Verisign and others.  In addition to adding native IDN support for IE7, we’ve blogged about it a few times: see http://blogs.msdn.com/ie/archive/2006/07/31/684337.aspx and http://blogs.msdn.com/ie/archive/2005/12/19/505564.aspx for instance.  

  22. Anonymous says:

    I update my version of this script ( http://therealcrisp.xs4all.nl/upload/highlight.html  ) to support the ‘next/previous’ functionality. I had to take a small performance penalty by using shift() iso pop() but because I now keep all references to the highlighted terms in a global array the unhighlight is even faster.

    I’ll leave it as an exercise to port this back to the extension. It would be nice to see valid and modern markup with that too.

  23. Anonymous says:

    IE Quick and Dirty. I think that is an excellent description of this browser.

    IE Incomplete and late, could be another

    browser title to consider using but i’ll

    admit it’s not as snappy as the one you

    chose.

    When may we expect to see the full version

    of IE Quick and Dirty? (or are we to expect

    more vague generalities?).

    I would also like to suggest you now disband

    this hapless ‘blog’. It is embarrassing of

    you to expect further contributions on this

    forum.

  24. Anonymous says:

    @john: Anybody who wants this blog disbanded may well stop visiting it! It really makes no sense to be bikering about something on and on. If you have no contributions to make, please don’t. Spare all of us from your caustic comments please.

  25. Anonymous says:

    @IE lover: I am sorry I just don’t understand you. In fact, I am delighted that Microsoft have renamed their browser to ‘IE Quick and Dirty’. IE7 was just meaningless… But with the new title it shows that they are willing to be honest about what it represents.

    I think Microsoft are to be commended for this new move.

    Thanks for your comment.

  26. Anonymous says:

    Totally support john, IE lover do you know anyway to uninstall IE explorer without affecting built in Windows Updates?

    Dave Massy, can you help me to uninstall IE from machine without affectting the montly windows updates? Can you pls?

  27. Anonymous says:

    > I would also like to suggest you now disband

    this hapless ‘blog’. It is embarrassing of

    you to expect further contributions on this

    forum.

    If that’s your view, then why are you still visiting yourself?

    It’s a blog, you’re entitled to your opinions – positive or otherwise. However, I fail to understand why you continue to visit it (which you clearly are by the repeat comments) if you think its ‘hapless’, and want it removed.

  28. Anonymous says:

    Hey IE7 team, how can you answer to what secunia said about IE. " more than 105 IE vulneravbilities still unpatched"…

    Great broswser…. was a sarcasm btw… Do something useful and give us a IE uninstaller to free us from that virus, without affecting windows updates.

  29. Anonymous says:

    Mikey, can you please open the door and leave… I don’t want people that downloads a pirate version of Windows XP, to tell me what I can say or not.

    I don’t expect IE devs to give me a solid product, since they don’t know what solid means, I want to uninstall IE from my machine and use an alternative browser, actually I am using one as main browser, but the problem is that I don’t want 2 applications doing the same, and If I got add/removes programs, is just removes de shorcuts to IE7, not the application, and the only way I know to remove it (Litepc) affects windows updates….

  30. Anonymous says:

    @Omar,

    Perfectly possible. I’ve been using it for over a year now with FF, and works perfectly.

    http://windowsupdate.62nds.com/

    You should have just searched Google quickly first (its the first result) before attempting to support john’s condescending and sarcastic argument with an unsubstianted problem.

  31. Anonymous says:

    @Omar,

    Okay, going avoid turning this into a ranting arguement by keeping it short and to the point:

    1. My comment was addressed to John, not yourself.

    2. My copy of Windows is perfectly legal.

    3. My point had nothing to do with what you can and can’t say (I would encourage negative comments). But I fail to appreciate the contradiction of someone (John) who wants this blog to be removed, yet continues to view and contribute to it.

  32. Anonymous says:

    You must change job. Go to wash the cars. I never saw a browser like IE.

  33. Anonymous says:

    Can we cut the crap here and talk geek please?

    Sven Groot: your concerns about wrapping found matches in an extra element are not really valid since you can easily overcome those problems by setting some explicit rules on the element itself like:

    display: inline;

    font-size: inherit;

    except for the fact that IE doesn’t support the latter (but should)…

    I myself found the Microsoft propriety selection-model to be quite unworkable: the retrieved indices from a search in createTextRange().text don’t match up with the ‘count’ you have to use for move(Start|End). That besides the fact that createTextRange() can only be used on the body and not on any specific element and that when using the built-in findText() method you don’t know where a certain match resides in the DOM-tree.

    If Microsoft is so keen on supporting standards they should also really consider implementing the DOM level 2 Range Model.

    Furthermore I just couldn’t seem to keep a selection while having focus on a text-input wereas in other browsers I can.

    I also noticed that IE’s Array-methods push(), pop() and shift() are unnecessary slow; by rewriting the unhighlight function to use a pointer and clearing the array afterwards I won another 30% performance-increase against a slight performance decrease in other browsers – that really points to an implementation issue of these methods in IE.

    Last but not least I did try out Sven’s extension which is great but is lacking the ‘highlight all’ option, and I think that is exactly where my script would fit in just nicely 🙂

  34. Anonymous says:

    Er……I know this is off topic, but its concerning IE, and I have a question. When I try to watch video in IE7, for some reason, the audio runs OK, but the video is replaced by a ‘green box’. I’ve tried upgrading to WMP11, but it still happens. Is this something I did?

  35. Anonymous says:

    This blog would be just fine if it weren’t for all the lame troll comments…

  36. Anonymous says:

    Thanks for mentioning our add-on – http://www.core-services.fr/inline-search/

    Nice hack! There are obviously many ways to achieve similar results … which is exciting.

  37. AnonL says:

    Snapshot of the main interface:

    http://filexoom.com/files/16733/IEextRemSnapShot02.png

    Code:

    http://filexoom.com/files/16733/ContextMenuExtensionRemoval.zip

    Ok, I went nuts; literally. Works are piling up and I’m sitting here writing this petty script which very possibly will have no utility to a very lot of people and it’s getting bigger and bigger I see myself drowning… and the most troubling part is that I’m enjoying the most of it…

    I know I shouldn’t come to this blog very often. It’s quite distressing. There’s this Wrixon guy who’s generally doing his best to help my pessimism of human sensible mind grow darker and there’s Tino who usually finds a way to get into a fight with somebody for whatever reason and here is all this persuasion to write scripts.

    And here it is: An HTML Application (.hta) for Removing Internet Explorer Context Menu Extensions. Yeah sounds very life-and-death. Well, I wanted to make a remover cuz I thought it’d be easier. Apparently it took as much as a normal extension one may write. Especially when I added that "Pack It!" feature, which I thought will go well with this removing thing (you see, you remove, you pack, then move … make any sense?) and turned out to be not quite a breeze.

    Overview:

    The code is pretty self-evident. It removes context menu extensions (their registry key and related script/dll files) to complete the last chain of IE’s context menu extension production. And there’s this packing thing that makes an automatic installer package (another hta file mashed with the script or dll source of the extension) which will let you bundle any menu extensions you’ve already installed.

    Snapshot of a packed extension before extracting:

    http://filexoom.com/files/16733/IEextRemSnapShot03.png

    I was in a hurry and code wound up to be an undocumented mess of software engineering. So I apologize. If you saw any utility in the code and were hindered by its defects just drop me a line.

    *** Some Words of Caution *** even if there’s nothing new in there to you all (I just copy/paste it from the code introduction):

    Don’t get kooky and go run mindlessly any .hta files they throw in front of you. They’re more like any other executables and can do pretty nasty things to system if the author had the exact intention and unfortunately knew what he was doing or the author didn’t had any bad intentions but unfortunately didn’t know what he was doing.

    Likewise, I, very well, could be the latter one, presumably, and there are some Remove, Delete, Overwrite and Erase words thrown in this stuff, and to heighten the thrill even more, I hereby declare NO WARRANTY OF ANY KIND, implied or imagined for this "AS IS" stuff. Since you’re risking some limbs here I grant you full Rights to Copy(C) it as much as you want if that makes you feel any better.

    OK, seriously it’d be wise to backup the registry before tinkering with it and the code seemed to work fine on the two machines I’ve tested on (Win2k and winXp IE6 only – unfortunately no IE7 is at my reach at the moment).

    I hope some of you are brave enough, or simply curious enough to at least look at the source code and see for yourself it means no harm. And it would be highly appreciated if you let us hear a little endorsement on the safety of the script I presented.

    Thank you very much. ~

    (Sorry no comment on the Inline Search, I was really busy you may have noticed…)

    ——————

    Some other words of caution to people allergic to IE related stuff: The code supposes to run in IE and handles something specifically designed for IE; So be aware that I knew a few IE’s proprietary features and wasn’t afraid to use them.

  38. Anonymous says:

    Thanks for the info, greatly appreciated but is there any particular reason why a feature like this is not included in IE7 by default?

    I love IE7 but there is another browser out there that does this feature fantastically. It makes searching a page so much easier.

  39. GaryK says:

    ran the installer, still got the old find dialog.

    looked for C:Program FilesIEXTNSN

    doesn’t exist. only have core services folder

    have no idea why it didn’t install completely.

  40. Anonymous says:

    @Tino: the problem is that to be certain you’re not affected by anything you have to specify values for each and every CSS property. Hardly fun when using selections works just as well (except that obviously you can’t do "Highlight all" with selections).

    Plus even if you can mitigate CSS effects, introducing the element can still affect scripts. I often use the following script to access the "innerText" of a property (because innerText itself, although widely supported, is not standard, and I like to be standard when I can): element.firstChild.nodeValue. This will break if a <font> tag is suddenly introduced in the middle of that element.

    I just don’t think that changing the document tree just to highlight something is a good idea.

  41. Anonymous says:

    For those who like this extension but would like it to be faster: I rebuilt this extension using my version of the highlight-code which you can download at http://therealcrisp.xs4all.nl/upload/findonpage.zip

    Sven: although I agree I do think that those occasions are very rare exceptions. Besides, Firefox’s ‘highlight all’ works in exact the same way as my script, and I don’t really see another way to achieve the same effect in script.

  42. Anonymous says:

    Sven: although I agree I do think that those occasions are very rare exceptions. Besides, Firefox’s ‘highlight all’ works in exact the same way as my script, and I don’t really see another way to achieve the same effect in script.

  43. Anonymous says:

    You can find another find-as-you-type implementation for IE in the Quero Toolbar:

    Hotkeys:

    / for triggering inline search

    F3 to search for the next occurrence

    http://www.quero.at/

  44. Anonymous says:

    Cmon MS IE team

    why IE7 still has many bugs,and unpatched holes?

    I’M STARTING TO LOOSE FAITH

    please poest a comment saying your commited to do the best browser on earth

  45. Anonymous says:

    @Eduardo Valencia

    >Cmon MS IE team

    >why IE7 still has many bugs,and unpatched holes?

    Didn’t you hear? It’s "By Design".

    Don’t complain.

  46. Anonymous says:

    Is it possible to develop ‘toolbar’ using the script only [as we can use xul in FireFox] ?

  47. Anonymous says:

    Add-ons for the IE platform are more than just toolbars, custom browsers and find-on-page add-ons….