Chrome扩展程序：如何显示查找栏并为其提供文本？ [英] Chrome Extension: How can I show the find bar and supply text for it?

问题描述

我制作一个扩展程序，将当前活动网页中的选定文本存储到localstorage中，然后当用户在我的扩展程序的弹出窗口中单击该选定文本时，扩展程序将激发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）; 
     

   这就是我如何存储我的信息
   

   解决方案

   您无法触发Chrome本机查找对话框，但您可以调用 window.find（） 。本地对话框与 find（）之间的主要区别在于
   $ b

   
   

   1. find（）仅突出显示页面中的一个匹配项，而
      本地对话框突出显示所有匹配项。确切地说， find（）将以
      开始，突出显示与文档顶部距离最近的匹配，并且
      重复调用将使其向下移动

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

   根据您的使用情况，这可能已足够。然而，
   
   

   ，如果您想在页面上突出显示特定的引号，并且需要考虑该引用的可能重复内容，那么它会更棘手一些，我不确定它可以完美地完成。您需要使用 <$ c获取所选文字的准确位置$ c> window.getSelection（） ，找到一种方法来识别它的 startNode 和 endNode 跨页面重新加载（如果他们有ID，这很容易，但如果没有，你将不得不求助于黑客），然后当页面重新打开时，使用 Selection.addRange（） 将其恢复。 / p>


   I am making an extension that stores the selected text from the currently active webpage into localstorage, then when the user click on this selected text in my extension's popup, the extension will fire chrome.tabs.create and open the website where the selected text was selected. These functions work, but I don't know how to trigger the 'find' function when the new tab opens. I want the newly created tab to highly the selected text that my extension stored. I think there are two ways to do this...

   1. somehow trigger the 'find' function that the browser by default has. The one with 'Ctrl+F" or 'Command+F" triggers and insert the selected text in there

   2. edit the HTML of the newly created page by highlighting the selected text.

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

   This is how I'm storing my information

   解决方案

   You can't trigger Chrome's native find dialog, but you can invoke window.find(). The main differences between the native dialog and find() are

   1. find() only highlights one of the matches in the page, whereas the native dialog highlights all. To be precise, find() will begin by highlighting the match nearest to the top of the document, and repeated invocations will move it down the page.

   2. find() will highlight the selected text in with the default blue color, whereas Chrome's find dialog highlights its matches in orange. However, this can be mimicked by modifying the background CSS property of the ::selection pseudo-class.

   Depending on your use case this might be sufficient.

   However, if you want to highlight a specific quote on the page, and need to account for possible duplicates of that quote, then it's a bit more tricky, and I'm not sure it can be done perfectly. You'll want to get the precise location of the selected text using window.getSelection(), find a way to identify its startNode and endNode across page reloads (if they have ids, this is easy, but if not you'll have to resort to hacks), and then when the page is reopened, use Selection.addRange() to restore it.

   这篇关于Chrome扩展程序：如何显示查找栏并为其提供文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！