https://github.com/onkar69483/scribly
Scribly - The Ultimate YouTube Notes & Annotation Extension Scribly is a powerful browser extension that allows users to take timestamped notes, draw, highlight, add shapes, and capture screenshots directly on YouTube videos. Organize and manage all your annotations in a centralized dashboard for easy access.
https://github.com/onkar69483/scribly
annotations browser-extension chrome-extension education highlighting note-taking notes open-source productivity screen-capture study-tools video-learning video-notes youtube youtube-tools
Last synced: 25 days ago
JSON representation
Scribly - The Ultimate YouTube Notes & Annotation Extension Scribly is a powerful browser extension that allows users to take timestamped notes, draw, highlight, add shapes, and capture screenshots directly on YouTube videos. Organize and manage all your annotations in a centralized dashboard for easy access.
- Host: GitHub
- URL: https://github.com/onkar69483/scribly
- Owner: onkar69483
- License: mit
- Created: 2025-02-21T13:47:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-21T14:01:55.000Z (over 1 year ago)
- Last Synced: 2025-02-21T15:19:37.761Z (over 1 year ago)
- Topics: annotations, browser-extension, chrome-extension, education, highlighting, note-taking, notes, open-source, productivity, screen-capture, study-tools, video-learning, video-notes, youtube, youtube-tools
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/YOUR_GITHUB_USERNAME/scribly.git
```
- **If you want to clone directly**, run:
```bash
git clone https://github.com/onkar69483/scribly.git
```
Then, navigate to the project folder:
```bash
cd scribly
```
#### 2. Set Up Development Environment
```bash
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](CONTRIBUTING.md) for guidelines
2. Fork the repository
3. Create your feature branch
4. Submit a pull request
## 💬 Support
- 📚 [Documentation](docs/README.md)
- 👨💻 Contributors:
- [@onkar69483](https://github.com/onkar69483)
- [@SachinMhetre678](https://github.com/SachinMhetre678)
- [@Janmejay-Pandya](https://github.com/Janmejay-Pandya)
## 📜 License
This project is proudly open source, licensed under the [MIT License](LICENSE).
---
Made with ❤️ by the Scribly Team