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.
–Setup–
The setup process consists of three pretty easy steps. You’ll have it done in just a minute or two:
- Download this package that I’ve assembled which includes the four files you’ll need.
- 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\Unix ~/.mozilla/Firefox/Profiles/Mac OS X ~/Library/Mozilla/Firefox/Profiles/
~/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.
- 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.
–Demonstration–
Is it worth the work? I think it’s a really nice feature to have, but you be the judge:
–Overview–
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.
This is just one of the hundreds of CyberNotes we have done. You can find more of them by visiting our CyberNotes category, or by subscribing to our CyberNotes feed. We also have a full feed available if you want to receive all of our articles in your reader!
Tags: CyberNotes, Firefox, Freeware, Software, Browser, Firefox 3, Firefox Extensions, Firefox Tweaks, How To, Safari, Search, Videos
Related Posts:
- Your Week in Review with Sunday’s Summary
- Yahoo Acquires Inquisitor for Safari
- A Safari Web Browser For Windows…Kinda
- Safari 3.0.4 for Windows - Spelling and Grammar Check
- April Browser Stats: Safari Triples its Windows Market Share
On Firefox/2.0.0.13
I get the highlights, but no dimmed background
But it did when I put it in
C:\Documents and Settings\USERNAME\Application Data\Mozilla\Firefox\Profiles\ch9kociv.default\chrome
Did you press enter after typing the word you’re searching for?
It worked for me by dimming the background except the word I was searching for was highlighted in yellow. To go back to normal on that page you have to click on the web page you were searching.
It should work fine on that. I tried it on that version of Firefox, and as Garth pointed out you do have to go from one word to the next before the background will be dimmed.
I had to turn of off the feature to start searching for text when I start typing in the advanced settings and then go to Edit and select Find in this page to get the Highlight all button.
thanks works really well on osx10.5 with firefox 3 beta4
yeah, i skinned my entire firefox to match safari, even got the stop/reload 2-in-one button going on. all i need is to change the program icon, title and about screen
TIP to get the safari-like merged stop/refresh button add this to userchrome.css (or create it if it doesn’t exist– is in the same ~/…./profiles/(string)/chrome folder):
/*
* Merge Stop/Refresh buttons (like in Safari)
*
* IMPORTANT NOTE: Stop button must be placed before Reload button.
*/
#stop-button[disabled] { display: none;}
#stop-button:not([disabled]) + #reload-button {
display: none;
}
Works for me - thanks for the good work!
Thanks, I’ve been wanting this - nice easy install - appreciated.
The issue I am having with this is when I hit next, “Highlight all” is not auto checked, so I have to manually hit highlight all to see any of the effects. This makes it not really worth using, as it makes my searching take longer. Do you know if this is something that may be turned off in my about:config?
You shouldn’t have to hit “highlight all” every time. When you click next (as demonstrated in the video) it should automatically do that for you.
How do you turn off the dimming?
For some reason this isn’t the case. When I hit Highlight all, everything works, but when I hit next none of the effects work. For whatever reason when I hit “next” it does not select “highlight all” for me like it does in the video. My guess is that one of my other extensions or themes has taken away that functionality. Oh well.
also in the portable version it has to be in FirefoxPortable\Data\profile\chrome
My Firefox Version is 2.0.0.13
Good point, I didn’t think to mention the directory for those using the portable version.
Totally awesome. Thanks!
Is there an easy way to change the default behavior to wrap the search back to the top of the page, rather than give an error, when no further results are found?
Unfortunately there’s nothing that I know of for that at the moment. I’ll look into it though.
Completely gay. I can see the results fine the way it works now. I mean unless I am blind, I really don’t need the overhead.
We didn’t say that this was better than the default finding method, but some people (especially those using Mac’s) like to make Firefox as much like Safari as possible.
Its a good clone, but the following in my opinion should be adjustable from the extension preferences menu:
1. The background darkness should be adjustable
2. The colour of the highlight adjustable
3. the dialog notifying that I have reached the top should be gotten rid of
4. highlight should always be checked
It’s excellent!
Only one issue - it caused my FF to start bugging me with a Popup window whenever the search reaches the end of the page and starts over. How can I disable that annoying thing?
in linux, the path is
~/.mozilla/firefox/####.default/chrome/
where #### some alphanumeric string. Well done!