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

Question

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

1. 以某种方式触发默认浏览器具有的"查找"功能.使用"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的 CSS 属性来模仿::selection。

根据您的用例，这可能就足够了。

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