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

Question

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

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 的查找对话框以橙色突出显示其匹配项。然而，这可以通过修改::selection 伪类的background CSS 属性来模仿。

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

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