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