The problem Peek solves

Whether we're looking at a web page, reading a massive pdf, or navigating through a huge code base, we can always rely on the "CTRL+F" functionality to tell us where we can find a particular string or a particular topics, out of all the content present. We realized, though, that there are hardly any resources that provide this functionality for YouTube videos! It is probably the first website on our list when we want to learn something or entertain ourselves, but in order to know whether or not the topic you are looking for is in the video, you must look through the whole thing! Our team intended to implement a chrome extention that takes in an input string, scans through a given video and highlights the moments where that string was spoken.

Challenges we ran into

Context :

When building a chrome extension, we must have multiple javascript files where each controls a different component of the system. When we first click on the extension, a small window with a text box shows up. The functionality of this window was controlled by the popup.js file. Since the scope of popup.js is limited to that window, DOM manipulation on the YouTube page must be done by another javascript file (content.js). The presense of two files demands that there be a messaging protocol between the two, so that popup.js can notify content.js when a search has been done (and its time to process the string).

The problem:

Despite trying multiple approaches, the two files failed to connect together; we couldn't send the string through from one file to another. using listeners.

Our approach:

<ul> <li>The first "breakthrough" we had was by using the chrome storage AP to achieve an effective data transfer between the two files. The popup.js file stored the string, and content.js retrieved it from storage. However, the problem with this approach was that, since the two javascript files started running at different times, content.js tried to access storage before anything was even stored!</li> <li>The solution came when we realized that we could run popup.js as if it were a background file. In this way, we could solve the messaging issue, which was caused due to the event listener going out of the scope of the js file</li> </ul>