Video Learner Extension

First diagram of our program design
Final diagram of our program design
Initial UI state of extension popup
Updated UI
Demo of the extension used on API documentation

Inspiration

The inspiration for this project came from long online reading assignments and learning about people's different preferred learning styles. Rohan had the idea for an extension that would help those who reading lots of text for a long time is difficult.

What it does

This Chrome extension analyzes the text on the current tab and then finds a relevant video that is within the min and max time length that the user gives in the extension popup.

How we built it

We built this extension using React for the core parts of the programming and used Webpack to package it up to be used as an extension by the Chrome API. First, the extension will take the minimum and max length of the video from the user and get the URL of the current tab. Next, it uses that URL to get the HTML code of the tab, then that's converted into plain text. This is then sent to Google's generative AI API where it finds the key topics of the page. Finally, the key topics, min length, and max length are used to search YouTube using the YouTube API. Throughout this whole process, we used GitHub to maintain our code versions.

Challenges we ran into

We ran into many errors and complexities in creating something that works in a browser environment using things like React that are used for developing web pages. Turns out that while it can be fast and convenient for some things many things are used for web pages that can't be used in a browser. There were also lots of tough learning curves as two of our team members had never used React before and none of us had made an extension before.

Accomplishments that we're proud of

We're very proud that we managed to build this within roughly two days despite all of our setbacks and difficulties in making it.

What we learned

We learned a lot about adapting to new APIs and the best ways to learn how to use them after using three new ones for this project. We also learned how to use React and Webpack together, but the most rewarding and difficult climb was learning how to build a Chrome extension and write a program that works in a browser environment.

What's next for Video Learner Extension

The first thing within our sights for continuing this project is to improve its speed with finding a video. Along with other goals such as giving the option for the number of videos wanted recentness of the video, flushing out the Chrome store listing of our extension including things like icons and a promo video. Lastly, we would improve the UI and give the extension a more modern and satisfying look.