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

我做了一个扩展，将选中的文本从当前活动的网页存储到localstorage中，然后当用户在我的扩展的弹出窗口中单击此选定文本时，扩展会触发chrome.tabs.create并打开选定网站文本被选中。这些函数可以工作，但我不知道如何在新选项卡打开时触发'查找'功能。我希望新创建的选项卡高度选择我的扩展程序存储的文本。我认为有两种方法可以做到这一点...Chrome扩展程序：如何显示查找栏并为其提供文本？

以某种方式触发默认浏览器的'查找'功能。使用'Ctrl + F'或'Command + F'触发并在其中插入所选文本
通过突出显示所选文本来编辑新创建页面的HTML。

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

这是我如何保存我的信息

来源

2012-12-04 user1871515

不能触发的Chrome原生查找对话框，但你可以调用window.find()。本地对话和find()之间的主要区别是

find()只突出了页面的比赛之一，而本地对话框亮点所有。准确地说，find()将从开始，突出显示与文档顶部距离最近的匹配，并且重复的调用会将其移到页面上。
find()将突出显示使用默认蓝色选定的文本，而Chrome的查找对话框以橙色突出显示其匹配。但是，这可以通过修改::selection伪类的background CSS属性来模拟。

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

不过，如果你想突出在页面上具体报价，并且需要考虑该报价可能的重复，那么它的更靠谱一点，我不知道它能够完美实现。您需要使用window.getSelection()获得所选文本的精确位置，找到一种方法在页面重新加载时识别其startNode和endNode（如果他们有ID，这很容易，但如果不是，则必须诉诸黑客），然后当页面重新打开时，使用Selection.addRange()来恢复它。

来源

2012-12-05 01:29:40 int3

不幸的是，我不记得我在哪里看到这个，但....我曾经看到有人通过创建一个xpath（querySelector也很酷）到所选文本所在的元素，然后用选择保存。然后，您只需打开该页面并重新选择该元素中的文本。 – PAEz

是的，这应该在大多数情况下工作，但如果内容是动态的，它会中断（例如，选定的节点可以是评论列表中的一个，并且随着更多评论被添加，其在页面上的位置改变）。 – int3

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

回答

相关问题