📚 Sloop – Intelligent YouTube Learning & Note-Taking Chrome Extension

Revolutionizing YouTube learning: Take smart snapshots, ask AI, and export beautiful, interactive study notes!

---

Sloop.Demo.mp4

---

📋 Table of Contents

• 🎯 Problem Statement
• 💡 Solution Overview
• 🚀 Key Features
• 🏗️ Architecture
• 🛠️ Tech Stack
• 📦 Installation & Setup
• 🎮 Usage Guide
• 🐛 Troubleshooting
• 🤝 Contributing
• 📄 License
• 🙏 Acknowledgments
• 📞 Support

---

🎯 Problem Statement

YouTube is a goldmine for learning, but revision and note-taking are a mess:

• Manual notes are slow and break your focus.
• Screenshots are hard to organize and lack context.
• No way to ask questions about specific video moments.
• Language barriers make global content hard to access.
• Offline study is impossible with most tools.

Learners need a seamless, AI-powered way to capture, organize, and revise YouTube knowledge.

---

💡 Solution Overview

Sloop is a Chrome extension that transforms YouTube into your personal, intelligent study space:

• Take timestamped, annotated snapshots of any video moment.
• Instantly export your notes as interactive, clickable PDFs.
• Summarize videos, translate subtitles, and ask AI-powered questions—right inside YouTube.
• All features work offline, powered by Chrome’s built-in AI APIs.

---

🚀 Key Features

• 📸 Smart Snapshots: Capture video frames with timestamps and annotate them instantly.
• 📝 Organized Notes: Add text or drawing annotations to each snapshot, all auto-linked to the video moment.
• 📄 PDF Export: Download beautiful, interactive PDFs for single videos or entire playlists. Clickable timestamps jump back to YouTube.
• 🤖 AI Q&A: Ask questions about the video and get detailed, context-aware answers with direct links to relevant moments.
• 🈺 Multilingual Support: Translate subtitles and AI answers to any language, breaking learning barriers.
• 🗂 Playlist Compilation: Merge notes from multiple videos into a single, organized PDF.
• ⚡ Offline Mode: All AI features work offline, ensuring privacy and reliability.
• 🎨 Modern UI: Clean, intuitive, and responsive interface for distraction-free studying.

---

🏗️ Architecture

┌──────────────┐      ┌──────────────┐      ┌──────────────┐
│  User/You   │◄────►│ Sloop Ext  │◄────►│ Chrome AI    │
│  (YouTube)  │      │ (React/JS)   │      │ APIs         │
└──────────────┘      └─────┬────────┘      └─────┬────────┘
         ▲                  │                   │
         │                  ▼                   ▼
   [PDF Export]      [Annotation Engine]   [Summarizer, Q&A, Translation]
         │                  │                   │
         └───────────────[Local Storage/Offline]───────────────┘

Data Flow:

1. User takes action (snapshot, note, question).
2. Language is detected and processed.
3. AI session determines context and generates response.
4. Notes/questions are organized and exported as PDF.
5. Timestamps are synced for instant video navigation.

---

🛠️ Tech Stack

Technology	Purpose
React	Chrome extension UI
Tailwind CSS	Modern, responsive styling
Node.js	Backend logic, PDF generation
Chrome APIs	Language detection, translation, AI
React PDF	Dynamic PDF export
JavaScript	Core logic
AI Model	Summarization, Q&A, translation

---

📦 Installation & Setup

Prerequisites

• Node.js 18+
• Chrome Browser
• Git

1. Clone the Repository

git clone https://github.com/yourusername/sloop.git
cd sloop-ai

2. Install Dependencies

npm install

3. Build the Extension

npm run build

4. Load into Chrome

1. Open chrome://extensions/ in your browser.
2. Enable Developer mode (top right).
3. Click Load unpacked and select the build/ directory.

5. Start Using!

• Pin the extension and open any YouTube video to start taking notes, snapshots, and using AI chat.

---

🎮 Usage Guide

Taking Snapshots & Notes

1. Click the Sloop icon while watching a YouTube video.
2. Use the snapshot button to capture key moments (auto-timestamped).
3. Add notes or draw on each snapshot.
4. Download your notes as a PDF—timestamps are clickable!

AI Q&A & Multilingual Support

1. Open the AI Chat tab in the extension.
2. Type your question in any language.
3. Receive detailed, timestamped answers in your preferred language.
4. Click on timestamps in the answer to jump to the exact video moment.

Playlist Notes

• Take notes across an entire playlist and export a single, organized PDF for all videos.

Offline Mode

• Use AI features even without internet (Chrome’s built-in AI model required).

---

🐛 Troubleshooting

Common Issues & Solutions

• Extension not loading?
  • Ensure you selected the correct build/ folder in Chrome extensions.
  • Run npm run build again if files are missing.
• PDF not downloading?
  • Check browser permissions for downloads.
• AI not responding?
  • Make sure Chrome’s built-in AI features are enabled.
  • Try restarting the browser.
• Notes not saving?
  • Ensure local storage is enabled in your browser settings.

Performance Tips

• For large playlists, export notes in batches for best performance.
• Use the latest version of Chrome for full feature support.

---

🤝 Contributing

We welcome contributions from the community!

How to Contribute

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes (follow code style and add tests)
4. Commit and push

   git commit -m "Add amazing feature"
   git push origin feature/amazing-feature

5. Open a Pull Request with a clear description

Development Guidelines

• Use clear, conventional commit messages
• Add/Update documentation for new features
• Test thoroughly before submitting PRs

---

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

🙏 Acknowledgments

• YouTube for the world’s best educational content
• Chrome Team for robust extension APIs
• OpenAI/Chrome AI for AI-powered features
• React & Tailwind CSS for a beautiful UI
• Community contributors for feedback and improvements

---

📞 Support

• Issues: GitHub Issues
• Email: [email protected]

---

Made with ❤️ for learners everywhere by the Snap-AI Team