YouTube Video Text Search

There was a need for a text search for videos on YouTube, I did not find a ready-made solution (maybe there is one), I decided to make it myself.

Technology

None Vanilla JS with self-made template maker + webpack.

Do

Everything will be issued in the form of an extension. All actions are performed by a script that is embedded in the page with the usual script tag. To do this, you need to add the script to the web_accessible_resources in the manifest , and then just add it to the document.
')
For starters, get hold of the subtitles. For this, we hook the http-spy and when the request for the necessary endpoint goes away, we somehow process it . Subtitles are xml:


But not always - the format can vary (the attribute format = "3" hints). In some cases there are no s tags inside the p tags (apparently from predlozhenie) (apparently from slovo). I decided this by bluntly cutting out the s tag, especially since the time stamp refers to p entirely. Led to a single mind, cool.

Are looking for

Search by xml is difficult, so we will not. End ^ w Instead, it is easier to take all the text that is contained in the xml, and also to build a map that, according to this index, would tell us which element p contains the given symbol, which automatically gives us a time stamp. The search itself looks a bit strange. This is due to the fact that there may be several occurrences, as well as the fact that one search query may overlap several time intervals . Got an array of entries, cool.

We draw

Just dump the flags about where the subtitles are. When you click on the flag rewind . The search form itself will appear if you download subtitles.

! @ #%,! @ #% and in production

Beauty did not suggest. If the thing turns out to be useful - I will bring it to mind.

• Expansion for chrome (for now by reference)
• Github
• Bugs / suggestions preferably here