better template

Great! I have found a template main part of which is wider than some 30% of the page! Wow! That's my second post today.

highlight things in a firefox extension

If you did some highlighting in a web application you would have to manipulate DOM to insert tags that would change background color (or style in general) of the area being highlighted. It is not only slow but also rather complicated and limited. Firefox offers a stronger tool, which is used for example for highlighting searched strings. Here we will look into some details.

We will start with document.createRange. This is not firefox specific yet. This is a pure DOM and should be pretty cross-browser. (I haven't tried it in MSIE8 but according to quirksmode's Introduction to Range it does not work in MSIE6/7. Honestly, I haven't tried in anything else than FF3+). Anyway, we have got quite a set of functions for manipulating ranges, and honestly they are not too easy to work with. Try this in your Firebug:

For description of functions see DOM/range @ developer.mozilla.org. So, we have got a range or more and we would like to highlight them. Here, Firefox comes to our help. We need to obtain a selection controller for the window, add the ranges to desired type of selection and tell the controller to highlight them. There are a few things to remember:

• The selection controller can contain something. We should clear it first.
• There are a few types of selection, like SELECTION_FIND and SELECTION_NORMAL.
• You must do all the stuff shown below for all frames in your document separately. This will not be shown here but you can look at SEO Profesional Toolbar source code, file seopsidebar.js
• Remember that some windows do not contain DOM. In that case this method will fail

Just for those curious: In SEO Profesional Toolbar we offer a list of something (links, found texts) in a sidebar and hightlight all these entities using SELECTION_FIND and when one of them is clicked in the sidebar, we will highlight it using SELECTION_NORMAL and scroll to it with controller.scrollSelectionIntoView(Ci.nsISelectionController.SELECTION_NORMAL, Ci.nsISelectionController.SELECTION_ANCHOR_REGION, false)

The best thing at the end: I have put some examples into my testbed firefox extension, so fire-up your browser, install testbed, look at the source code (overlay.js), sit back and enjoy! Do not forget to uninstall or disabled testbed when you are done.