Actually Good Free YouTube Video Summarizer

An AI driven YouTube video summarizer.

Comment

Inspiration

I've always wanted an AI-powered YouTube video summarizer because I often encounter long videos that I don't have time to watch in full. Skipping through them makes me worry that I might missing important information. I've searched for extensions or web services that could summarize these videos, but they’re either paid or don’t work properly, so I've always wanted to build one myself, and finally I had a proper motivation to make it

What it does

This Chrome extension loads on every YouTube tab, utilizing the transcript, video title, and channel name to generate an AI-powered summary. Once the summary is generated, users can ask follow-up questions to clarify or explore parts of the video further.

How We Built It

  1. HTML Injection & Transcript Retrieval:

    • I started by figuring out how to inject HTML into YouTube pages and retrieve the transcript. This part was relatively straightforward.

  2. Settings Page & Background Script:

    • I created a basic version of the settings page to serve as a foundation for building the background script.
    • Next, I developed the background script and set up communication between the content script and the background script to handle API calls.

  3. API Integration & CSS Refinement:

    • Once the API integration was working correctly, I refined the CSS for the content script to improve the user interface.
    • Since users would likely spend minimal time on the settings page, I prioritized functionality over design for that part.

Challenges We Ran Into

  1. Webpack Configuration:

    • One of the most frustrating challenges was managing Webpack, particularly differentiating between CommonJS and ES modules while building the background script.
    • I often encountered build errors due to missing or incorrect syntax. After repeated issues, switching from npx webpack to npm run build resolved the problem.

  2. Manifest V3 & Service Worker Inactivity:

    • The service worker going inactive after periods of inactivity posed another challenge.
    • Although the service worker wakes up when a new port connection is established, returning to a paused YouTube video after some time caused the connection to time out, requiring a page refresh.
    • My current workaround involves sending a keep-alive “pong” from the content script to the background script every few seconds while a YouTube tab is open.

Accomplishments We’re Proud Of

I’m genuinely surprised that I was able to create a working app, even if it’s barely functional and not very stable.

What We Learned

I gained valuable experience in:

  • Writing both frontend and backend JavaScript.
  • Integrating JavaScript with HTML and CSS to create a cohesive user experience.
  • Managing Webpack configurations and working within the constraints of Manifest V3.

What's Next for Actually Good Free YouTube Video Summarizer

  1. Improve Reliability:

    • Ensure that HTML injection in the content script is more reliable.

  2. Handle Longer Videos:

    • Implement a summarization API or other methods to shorten transcripts for longer videos.

  3. Enhance Customizability:

    • Refine the settings page and add more customization options for users.

  4. Integration with Larger Models:

    • Add the option to export chats to larger models like Gemini for more comprehensive conversations.

Links

The Repository: Github

Built With

Share this project:

Updates