This chrome browser extension allows you to search for keywords in a video (as long as it has a transcript available) and get timestamps and text that contain that keyword! It allows you to then navigate the video based on the relevant keywords you entered. No longer are the days of skimming for minutes on a 4 hour podcast to see a topic you're interested in being discussed.
I learned a lot, especially since this was my first ever browser extension project!
- Building a browser extension is a whole new experience. Traditionally when you build sites you make and define every element, you know the structure of your application. Because browser extensions build on top of a site, you have to learn how the application is structured and the custom elements defined in the site. This Provided an interesting challenge when developing this extension.
- I encountered a bug where when I attempted to grab an element with the id "panels" but there was an issue where sometimes I would grab the element and do the appropriate operations and sometimes it did not work. After looking at the HTML of the site and a few console logs, I became aware that there were two elements with the same id! This is usually something you do not see and I was unaware of this due to the fact that I did not structure the application.
- I encountered another bug where I wanted the app.js script to listen after a url has been changed, and if it's a youtube video url, run a particular function. Usually you would use the popstate event listener to listen to active history changes. This wasn't working because of how Youtube navigation works and instead I had to rely on Youtube's own event for video navigation and found that if you listen to the "yt-page-data-updated" event, it will always detect when you navigate to a different url within the Youtube site.
- Another bug occurred when obtaining the transcript of a current video after previously fetching a transcript from a longer video. The older transcript data persisted alongside the current one, causing search results to include both videos. YouTube seemed to carry over transcript data between pages but avoided overwriting the current one. After searching through the HTML I saw that the old transcript data had a 'hidden' attribute. I ended up filtered out the elements with this attribute when fetching the transcript so that the relevant data was obtained.
- I learned about the Mutation Oberver API. This API allows you to watch for changes in the DOM and based on those changes invoke a callback function.
- This API was helpful in addressing the challenge of clicking the transcript button and loading the associated panel. Initially, using 'DOMContentLoaded' didn't work due to YouTube's single-page app (SPA) nature. I attempted using the setTimeout function approach, but it posed issues with varying connection speeds. The issue was solved via using the API which allowed me to observe changes in the DOM. Upon finding the transcript button, observations ceased. If the button wasn't found after 20 observations, the process halted. This resolved the issue of clicking the transcript button without unnecessary delays.
- ChatGPT
- I used ChatGPT a lot because I was new to working with browser extensions and needed help understanding things like the manifest.json file, the structure of a brower extension application, and many other things.
- ChatGPT was very useful when it came to generating code that uses regular expressions. I needed to seperate the time from the text in a given string and it was able to generate code for that issue. It also provided code that I used as a foundation to then take a string where the time was formatted explicitly like "1 hour, 2 minutes, 4 seconds" and convert it to just seconds.