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); 

これは、私はあなたがChromeのネイティブ検索ダイアログをトリガすることはできませんが、あなたはwindow.find()を呼び出すことができ、私の情報

Answer 1

を格納しています方法です。ネイティブのダイアログとfind()の主な違いは

1. find()だけ ネイティブダイアログのハイライトのに対し、全て、ページ内の試合の一つ強調しています。正確には、find()は で始まり、ドキュメントの最上部に最も近いものが強調表示され、 は繰り返し呼び出しによってページの下に移動します。

2. find()は、選択したテキストをデフォルトの青色で強調表示しますが、Chromeの検索ダイアログでは、一致するものがオレンジ色で強調表示されます。ただし、::selection疑似クラスのCSSプロパティを変更することで、これを模倣することができます。

場合によっては、これで十分です。

具体的なの見出しをページに表示し、その見積もりの​​可能な重複を考慮する必要がある場合は、少し難しく、完全に行うことはできません。選択したテキストの正確な位置をで取得し、startNodeとendNodeをページリロードで識別する方法を探してください（IDがあれば簡単ですが、そうでない場合はハックに頼らざるを得ません）ページが再オープンされたら、Selection.addRange()を使用して復元します。