How to make page search on electron like in Chrome or VS Code or Firefox?

Question

This is how the search looks like in chrome

I tried to make something like this but I meet some problems. I use Window.getSelection() to highlight all matches, and separate input to get user query. But it does not highlight all added ranges like Firefox do, and I cannot get focus on input and in the same time highlight found text.

I have problems with focus and highlighting.

This is what I currently have

I know that Chrome and Firefox and VS Code and Atom all have this feature, they have highlighting that belongs to user-selection, and they have highlighting that belongs to search results. They probably have independent Selection objects for search results and for user-selection. Is there any ready API for that or I need to try to implement it myself?

Thank you all)

There is a ready-to-use package for that, electron-find: https://stackoverflow.com/a/55493950/105224 — Andreas Dolk, Jul 23 '20 at 12:43
That package is out of date. It is tested on electron 4, and It does not work for me on electron 8. — Богуслав Павлишинець, Jul 23 '20 at 18:45
Hmm, I use it on my electron project and I'm on electron 9.1.1. Just checked, it still works - ah no. Sorry. I copied the sources into my project and patched it. — Andreas Dolk, Jul 23 '20 at 19:51
I tried it but it do not want to work for me, so I have created my own page_search. You can try it on my app even online -=> https://bolls.life. Just press `ctrl + shift + F` and go on — Богуслав Павлишинець, Jul 26 '20 at 18:16

How to make page search on electron like in Chrome or VS Code or Firefox?

0 Answers0