Change found text selection in Firefox extension

I am developing a Firefox extension that searches for terms on a page. And I would like to change the color of the text and background. For example, I'm looking for the letter "s" and by default it is selected as a blue rectangle with white text color. So I want to change blue to red. How can I do this via JS?

Edit0:

To select the found text, I use the document.createRange()

and methods selection.addRange()

.
I don't know how the default crawler selects the found term and applies the background to it.
Therefore, maybe the "range" method is not the best.
But I think I am looking for a way to highlight this created range ...

Edit1

I have now partially resolved the transform color with the predominance. Just add a CSS rule with a ::-moz-selection

red background when the text is found and selected. Then, for the "onmousedown" document, I remove this rule to avoid leaving the default selection in red.

But the new problem is that when I find a word and it gets a selection, the background of that selection is grayed out (so it looks like the text selection of an inactive window). Then when I click somewhere in the body of the document and press F3, the extension finds the next digit and selects it with a red background. And the following conclusions are working correctly (with a red background).

So my goal is to change the original gray background to red.
Maybe I should change the color of the inactive selection ...

Edit2:

Now I have updated my JS code:

var selection=w.getSelection()
var range=w.document.createRange()
range.setStart(foundNode,foundOffset)
range.setEnd(foundNode,foundOffset+foundLength)
selection.removeAllRanges()
selection.addRange(range)

var controller=gBrowser.docShell.QueryInterface(Ci.nsIInterfaceRequestor)
               .getInterface(Ci.nsISelectionDisplay)
               .QueryInterface(Ci.nsISelectionController);

controller.setDisplaySelection(controller.SELECTION_ATTENTION)
controller.repaintSelection(controller.SELECTION_NORMAL)

      

        
        
        
      

    

Thanks to Noitidart's answer , I found some information on how to use the nsISelectionController

XPCOM interface to select found text with a background. However, I cannot set a custom color for this background to differ from the default Firefox found text color. But setting the ui.textSelectBackgroundAttention

preference to about:config

the desired color will work with both my extension and the default search engine.

I found that the constant SELECTION_ATTENTION

is responsible for this background color, and the method setDisplaySelection

associates the color with the selected text. But I couldn't find an implementation of this method. I only saw the nsISelectionController

idl file with its own structure, but did not support the corresponding .cpp or .js file implementing this .idl. Therefore I have no information on how the color is set.

Edit3:

I recently added the "Select All" feature to my extension. And a new question arose about the color of this backlight. Using the above tecnique will show all matches with the search color green (default). But it is more convenient to use a different color to distinguish the current match from others.

So I couldn't find another useful constant nsISelectionController

for highlighting "Select All". I just set this selection to DISABLED and changed the prefix ui.textSelectBackgroundDisabled

about:config

. Obviously this is a prefix for the selected background text of an inactive window. And it worked for me.

controller.setDisplaySelection(controller.SELECTION_DISABLED)

Another thing is that I'm not sure what controller.repaintSelection()

is needed in the previous Editor. I think the choice didn't work without it when I started experimenting with this stuff. But now I removed that line and it still works.

A plus:

And some additional links in case anyone needs:

• nsISelectionController reference
• Link to choose
• Forum question about lighting
• about: config prefs to highlight
• Add-on using similar tecnique
• Finder.jsm and other sources

Also I used some files from the Firefox source archive: Firefox 33 Source :

 - nsISelectionController.idl [\ content \ base \ public \]
 - nsTypeAheadFind.cpp [\ toolkit \ components \ typeaheadfind \]
 - Finder.jsm [\ toolkit \ modules \]
 - findbar.xml [\ toolkit \ content \ widgets \]