firefox-addon - 在 Firefox 扩展中更改找到的文本突出显示

Question

我正在为 Firefox 开发一个在页面中搜索术语的扩展。我想更改找到的文本突出显示颜色和背景。例如，我搜索一个字母“s”，默认情况下它是用一个带有白色文本颜色的蓝色矩形选中的。所以我想把蓝色换成红色。我如何通过 JS 执行此操作？

编辑0:

要选择找到的文本，我使用 document.createRange() 和 selection.addRange() 方法。
我不知道默认查找器如何选择找到的术语并为其应用背景。
所以也许“范围”方法不是最好的。
但我想我正在寻找一种方法来突出显示这个创建的范围...

编辑1:

现在我已经部分解决了变色问题。只需在找到并选择文本时添加带有 ::-moz-selection 和红色背景的 CSS 规则。然后对于文档“onmousedown”，我删除了这条规则，不要将默认选择保留为红色。

但是一个新问题是当我找到一个数字并且它得到一个选择时该选择的背景是灰色的(所以它看起来像一个非事件窗口的文本选择)。然后，当我用鼠标单击文档文本中的某处并按 F3 时，扩展程序会找到下一个数字并选择它并带有红色背景。接下来的发现是正确的(红色背景)。

所以我的目的是将最初的灰色背景更改为红色。
也许我应该更改非事件选择颜色...

编辑2:

现在我更新了我的 JS 代码:

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)

感谢Noitidart的回答我找到了一些关于如何使用 nsISelectionController XPCOM 接口(interface)来选择带背景的文本的信息。我仍然无法为此背景设置自定义颜色，以使其与 Firefox 中找到的文本的默认颜色不同。但是将 about:config 中的 ui.textSelectBackgroundAttention 首选项设置为所需的颜色将适用于我的扩展和默认查找引擎。

我发现 SELECTION_ATTENTION 常量负责该背景颜色，setDisplaySelection 方法将颜色链接到所选文本。但是我找不到这个方法的任何实现。我只看到 nsISelectionController idl 文件及其结构，但没有对应的 .cpp 或 .js 文件实现此 .idl。所以我没有关于如何设置颜色的信息。

编辑3:

最近我在我的扩展程序中添加了“全部突出显示”功能。并且出现了关于此高光颜色的新问题。使用上述技术将以绿色查找颜色显示所有匹配项(默认情况下)。但是使用不同的颜色来区分当前匹配项和其他匹配项会更舒服。

所以我找不到另一个有用的 nsISelectionController 常量用于“突出显示所有”选择。我只是将此选择设置为“已禁用”类型并更改了 ui.textSelectBackgroundDisabled about:config 首选项。此首选项显然适用于非事件窗口的选定文本背景。它对我有用。

controller.setDisplaySelection(controller.SELECTION_DISABLED)

另一件事是，我不确定之前Edit中的controller.repaintSelection()是否有必要。我想当我开始用这些东西做实验时，如果没有它，选择就不会起作用。但现在我删除了那条线，一切仍然有效。

加上:

如果有人需要，还有一些额外的链接:

• nsISelectionController Reference
• Selection Reference
• Forum question about highlight
• about:config prefs for highlight
• An Add-on using a similar tecnique
• Finder.jsm and other sources

我还使用了 Firefox 源存档中的一些文件:Firefox 33 Source :

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

Answer 1

我通过电子邮件向 quicksilver 问了这个问题，他告诉我的是这样的:

You might find this one helpful: https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsISelectionController

I'm hardly the master you think I am, actually. :) To change those colors I just change the values for preferences:

ui.textHighlightBackground

ui.textHighlightForeground

ui.textSelectBackgroundAttention -> SELECTION_ATTENTION, it's not a highlight, it's a normal selection (as you would select some text with your mouse and it would turn the regular blue blackground, in windows at least) but it's given "attention", so it has the green background that the find operation reports. Basically it's a way of showing the user "Here I am!!" after firefox automatically selecs the text he searched for.

And I really don't know most of those contants, SELECTION_NORMAL is for normal text selection, like it would be when you select text with your mouse, SELECTION_FIND is for the highlights, and I only know the ON/HIDDEN/OFF/DISABLED ones which are self-explanatory. SELECTION_SPELLCHECK is probably for the auto-correct when you are typing in an editable content node, but I'm just guessing that one from the name.

Also, as far as I know, it's not possible to just create custom selection ranges/contants, as the code simply won't recognize them without editing the C++ code as well. Which is actually one of the reasons I haven't implemented https://github.com/Quicksaver/FindBar-Tweak/issues/76 yet.