Rozszerzenie Chrome: jak mogę wyświetlić pasek wyszukiwania i podać dla niego tekst?

Question

Tworzę rozszerzenie, które przechowuje wybrany tekst z aktualnie aktywnej strony na localstorage, a kiedy użytkownik kliknie na ten zaznaczony tekst w wyskakującym okienku mojego rozszerzenia, rozszerzenie wyświetli chrome.tabs.create i otworzy stronę, na której zaznaczony tekst został wybrany. Te funkcje działają, ale nie wiem, jak wywołać funkcję "znajdź" po otwarciu nowej karty. Chcę, aby nowo utworzona karta była wysoko zaznaczonym tekstem zapisanym w moim rozszerzeniu. Myślę, że można to zrobić na dwa sposoby ...

1. w jakiś sposób wywołać funkcję "znajdź", którą domyślnie przeglądarka ma. Ta z "Ctrl + F" lub "Command + F" wyzwala i wstawia zaznaczony tekst tam, aby edytować HTML nowo utworzonej strony, podświetlając zaznaczony tekst.

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

To jak mam przechowywanie moich danych

Answer 1

Ty dialogowe Znajdź natywne Chrome nie może wyzwolić, ale można powołać window.find(). Główne różnice pomiędzy rodzimym dialogu i find() są

1. find() tylko podkreśla jeden z meczów na stronie, natomiast rodzimych pasemkami dialogowych wszystko. Dokładniej, find() rozpocznie się od podświetlenia dopasowania najbliższego do górnej części dokumentu, a powtarzające się inwokacje przesuną go w dół strony.

2. find() podświetli zaznaczony tekst z domyślnym niebieskim kolorem, natomiast okno dialogowe wyszukiwania Chrome podświetli jego wyniki na pomarańczowo. Można to jednak naśladować modyfikując właściwość CSS background pseudoklasy ::selection.

W zależności od przypadku użycia może to być wystarczające.

Jeśli jednak chcesz podświetlić na stronie wycenę o konkretnej i musisz uwzględnić ewentualne duplikaty tego cytatu, to jest to nieco trudniejsze i nie jestem pewien, czy można to zrobić doskonale. Będziesz chciał uzyskać dokładną lokalizację zaznaczonego tekstu za pomocą window.getSelection(), znaleźć sposób na identyfikację jego przeładunków na stronie startNode i endNode (jeśli mają identyfikatory, to jest to łatwe, ale jeśli nie, musisz uciekać się do hacków) , a następnie po ponownym otwarciu strony, użyj Selection.addRange(), aby ją przywrócić.