Condividi tramite


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

  • Anonymous
    September 07, 2006
    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!

  • Anonymous
    September 07, 2006
    The comment has been removed

  • Anonymous
    September 07, 2006
    So, Internet Explorer 7 is just about finished, and it's a general all-around improvement. At the very...

  • Anonymous
    September 07, 2006
    @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.

  • Anonymous
    September 07, 2006
    So why are you using execCommand to set the highlight? Why not just set the CSS style?

  • Anonymous
    September 07, 2006
    @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.

  • Anonymous
    September 07, 2006
    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

  • Anonymous
    September 07, 2006
    The comment has been removed

  • Anonymous
    September 08, 2006
    Why not completing IE by adding a tool like this? The standard search is annoying

  • Anonymous
    September 08, 2006
    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?

  • Anonymous
    September 08, 2006
    The comment has been removed

  • Anonymous
    September 08, 2006
    The comment has been removed

  • Anonymous
    September 08, 2006
    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).

  • Anonymous
    September 08, 2006
    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 ?

  • Anonymous
    September 08, 2006
    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?

  • Anonymous
    September 08, 2006
    @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.

  • Anonymous
    September 08, 2006
    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...

  • Anonymous
    September 08, 2006
    The comment has been removed

  • Anonymous
    September 08, 2006
    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...

  • Anonymous
    September 08, 2006
    The comment has been removed

  • Anonymous
    September 08, 2006
    @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.  

  • Anonymous
    September 09, 2006
    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.

  • Anonymous
    September 09, 2006
    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.

  • Anonymous
    September 09, 2006
    @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.

  • Anonymous
    September 09, 2006
    @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.

  • Anonymous
    September 09, 2006
    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?

  • Anonymous
    September 09, 2006
    > 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.

  • Anonymous
    September 09, 2006
    The comment has been removed

  • Anonymous
    September 09, 2006
    The comment has been removed

  • Anonymous
    September 09, 2006
    @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.

  • Anonymous
    September 09, 2006
    @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.

  • Anonymous
    September 09, 2006
    You must change job. Go to wash the cars. I never saw a browser like IE.

  • Anonymous
    September 09, 2006
    The comment has been removed

  • Anonymous
    September 09, 2006
    The comment has been removed

  • Anonymous
    September 09, 2006
    The comment has been removed

  • Anonymous
    September 09, 2006
    The comment has been removed

  • Anonymous
    September 10, 2006
    The comment has been removed

  • Anonymous
    September 10, 2006
    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.

  • Anonymous
    September 10, 2006
    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.

  • Anonymous
    September 10, 2006
    @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.

  • Anonymous
    September 10, 2006
    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.

  • Anonymous
    September 10, 2006
    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.

  • Anonymous
    September 11, 2006
    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/

  • Anonymous
    September 12, 2006
    PingBack from http://knagis.miga.lv/blog/2006/09/12/ka-rakstit-internet-explorer-paplasinajumu/

  • Anonymous
    September 12, 2006
    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

  • Anonymous
    September 12, 2006
    I dont now

  • Anonymous
    September 12, 2006
    may be

  • Anonymous
    September 13, 2006
    PingBack from http://sudhakar.wordpress.com/2006/09/14/freedom-from-internet-explorer-find-dialog/

  • Anonymous
    September 13, 2006
    @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.

  • Anonymous
    September 20, 2006
    Is it possible to develop 'toolbar' using the script only [as we can use xul in FireFox] ?

  • Anonymous
    September 22, 2006

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

  • Anonymous
    June 08, 2009
    PingBack from http://jointpainreliefs.info/story.php?id=805

  • Anonymous
    June 09, 2009
    PingBack from http://quickdietsite.info/story.php?id=1256