Chrome扩展程序：如何显示查找栏并为其提供文字？

Question

我正在制作一个扩展程序，将当前活动网页中的选定文本存储到localstorage中，然后当用户在我的扩展程序弹出窗口中单击此选定文本时，扩展程序将触发chrome.tabs.create并打开网站选定的文本已被选中。这些功能有效，但我不知道在新标签打开时如何触发'find'功能。我希望新创建的选项卡高度显示我的扩展程序存储的所选文本。我认为有两种方法可以做到这一点......

1. 以某种方式触发默认浏览器具有的'find'功能。使用“Ctrl + F”或“Command + F”触发并在其中插入所选文本

2. 通过突出显示所选文本来编辑新创建页面的HTML。

new_source = { "url" : tab[0].url, "title" : tab[0].title, "quote" : selectedQuote, "id" : idSource};
sources.push(new_source);
localStorage["sources"] = JSON.stringify(sources);

这就是我存储信息的方式

Answer 1

您无法触发Chrome的原生查找对话框，但您可以调用window.find()。本机对话框与find()之间的主要区别是

1. find()仅突出显示页面中的一个匹配项，而 原生对话框突出了所有确切地说，find()将开始 突出显示距离文档顶部最近的匹配项 重复调用会将其移到页面上。

2. find()将使用默认的蓝色突出显示所选文本，而Chrome的查找对话框则以橙色突出显示其匹配项。但是，可以通过修改background伪类的::selection CSS属性来模仿。

根据您的使用情况，这可能就足够了。

但是，如果你想在页面上突出显示特定的引用，并且需要考虑该引用的可能重复，那么它有点棘手，我不确定它是否可以做得很完美。您需要使用window.getSelection()获取所选文本的精确位置，找到一种方法来识别其页面重新加载startNode和endNode（如果它们有ID，这很容易，但如果不是，你将不得不诉诸黑客），然后当重新打开页面时，使用Selection.addRange()来恢复它。