Web Browser Wednesday

One of the things that I’ve always enjoyed in Safari 3 is the inline search interface, and just the other day I thought I would peruse around the Internet trying to find a way to do the same thing in Firefox. Why is searching special in Safari? Because it dims the background of the page that you’re on, and highlights the matching results as you type. The result that you currently have highlighted bounces up and down to catch your eye, and the whole experience is overall visually appealing.

When searching around for an extension I didn’t come up empty handed. I found one called XUL/Migemo that did exactly what I was looking for, but the problem was that the extension does a few other things that I don’t really need (nor wanted). After a little more searching I came across this post in the MozillaZine forums which talks about how you can set it up yourself. After testing it I can verify that it does work on both Firefox 2 and Firefox 3.

Note: There is a video demonstration at the end of the article that shows what the end result looks like.


The setup process consists of three pretty easy steps. You’ll have it done in just a minute or two:

  1. Download this package that I’ve assembled which includes the four files you’ll need.
  2. There are three JavaScript files (userChrome, SafariHighlight.uc, and ucjs_findbar.uc) that need to be placed in your profile’s chrome folder. Use this table to find your browser’s profile:

    Operating System Profile folder location(s)
    Windows 95/98/Me

    C:\Windows\Application Data\Mozilla\Firefox\Profiles\

    C:\Windows\Profiles\<user name>\Application Data\Mozilla\Firefox\Profiles\

    Windows NT 4.x C:\Winnt\Profiles\<user name>\Application Data\Mozilla\Firefox\Profiles\
    Windows 2000 and XP C:\Documents and Settings\<user name>\Application Data\Mozilla\Firefox\Profiles\
    Windows Vista C:\Users\<user name>\AppData\Roaming\Mozilla\Firefox\Profiles\


    Mac OS X


    ~/Library/Application Support/Firefox/Profiles/

    After you’ve found the profile folder just copy the three JavaScript files (userChrome, SafariHighlight.uc, and ucjs_findbar.uc) into the chrome folder located within your profile. If the UserChrome file already exists you may want to back it up before overwriting it.

  3. Now you’ll need to install the extension which I’ve included in the download from the first step (here’s its homepage in case you’re curious). I’ve cleverly named the extension DragMeIntoFirefox because that’s exactly what you need to do… drag the file into the Firefox window. Then proceed with installing it, and restart the browser when it’s done. If you don’t want to drag the extension into the Firefox window just go to File -> Open File and browse for the extension.

–Using the New Search Feature–

When you go to perform a search for the first time you may not think that it’s working, but I’m confident that you’ve followed the three steps accurately. The reason why you may not be seeing the dimmed background and nice highlighting is that you need to click the Highlight All button on the Find bar. Immediately after doing that you’ll see the effects go into play.

Alternatively you can just hit the Next button (or the keyboard shortcut Control+G) to go to the next result. After pressing that the Highlight All feature will automatically be enabled. Those of you with the automatic find-as-you-type enabled will want to use the Control+G keyboard shortcut to move on to the next result if you want to see the special effects.


Is it worth the work? I think it’s a really nice feature to have, but you be the judge:


So that’s how you can get a Safari-styled search interface in Firefox 2 or Firefox 3. After setting this up I have fallen in love with it, but it would be nice if this was bundled into its own extension.