Scribly - Your Smart YouTube Note-Taking Companion 📝

Transform your YouTube learning experience with Scribly - the ultimate Chrome extension for taking notes, annotating, and highlighting directly on YouTube videos!

✨ Key Features

Core Functionality

• 📌 Timestamped Notes

  • Capture thoughts and insights at specific video timestamps
  • Easily jump back to important moments

• ✏️ Drawing & Annotation Tools

  • Freehand drawing for custom annotations
  • Highlight key content directly on the video
  • Add shapes (rectangles, circles) and arrows for emphasis

• 📸 Visual Documentation

  • Take instant screenshots from any point in the video
  • Save visual references for later review

Organization & Management

• 📂 Smart Dashboard

  • Centralized hub for all your video notes
  • Intuitive organization and quick search
  • Tag and categorize notes for easy retrieval

• 🔄 Data Portability

  • Export notes for backup
  • Import notes across different devices
  • Never lose your valuable insights

🚀 Getting Started

Installation Steps

1. Clone the Repository

You have two options:

• If you have forked the repository, replace YOUR_GITHUB_USERNAME with your GitHub username and run:

  git clone https://github.com/YOUR_GITHUB_USERNAME/scribly.git

• If you want to clone directly, run:

  git clone https://github.com/onkar69483/scribly.git

Then, navigate to the project folder:

cd scribly

2. Set Up Development Environment

npm install
npm run build

3. Install in Chrome

1. Open Chrome and navigate to chrome://extensions/
2. Enable "Developer mode" (top-right corner)
3. Click "Load unpacked"
4. Select the dist folder from your project directory

Using Scribly

1. Pin the Extension

   • Click the puzzle piece icon in Chrome's toolbar
   • Find Scribly in the dropdown
   • Click the pin icon to keep it easily accessible

2. Accessing Scribly on YouTube

   • Go to any YouTube video
   • Look for the pencil icon in the video control bar (below the video player)
   • Click the icon to activate Scribly's annotation tools

3. Taking Notes

   • Use the drawing tools to annotate directly on the video
   • Add text notes with timestamps
   • Take screenshots of important moments
   • All your notes are automatically saved and organized in the dashboard

🔧 Troubleshooting Installation

If the extension isn't working properly after installation:

1. Run npm run build in your project directory
2. In Chrome:
   • Click the three dots (⋮) in the top-right corner
   • Go to "Extensions" → "Manage Extensions"
   • Locate "Scribly" in your extensions list
   • Click the reload icon (🔄) next to the extension
3. Open YouTube:
   • Refresh any open YouTube tabs
   • The extension should now be active and ready to use

🛠 Technical Stack

• Frontend Technologies
  • React.js for dynamic UI components
  • Tailwind CSS for modern styling
  • Vanilla HTML/JS/CSS for core functionality
• Data Management
  • localStorage for offline capabilities
  • Efficient state management for smooth performance

🤝 Contributing

We love your input! Want to contribute? Here's how:

1. Check our CONTRIBUTING.md for guidelines
2. Fork the repository
3. Create your feature branch
4. Submit a pull request

💬 Support

• 📚 Documentation
• 👨‍💻 Contributors:
  • @onkar69483
  • @SachinMhetre678
  • @Janmejay-Pandya

📜 License

This project is proudly open source, licensed under the MIT License.

---

Made with ❤️ by the Scribly Team