A Chrome browser extension that enables peer-to-peer synchronized YouTube video watching with real-time chat functionality. Watch YouTube videos together with friends across different devices without needing a central server.
- Peer-to-Peer Synchronization: Direct browser-to-browser connection using WebRTC
- Real-time Video Sync: Automatic play/pause/seek synchronization across all connected users
- Live Chat: Built-in chat system for communicating with your watch party
- Host Control System: Host can control video playback for all participants
- Cross-Device Support: Enhanced NAT traversal for connections between different networks
- No Server Required: Uses PeerJS for decentralized communication
- YouTube Integration: Seamless sidebar integration with YouTube's interface
- Frontend: Vanilla JavaScript, HTML5, CSS3
- WebRTC: PeerJS library for peer-to-peer connections
- Extension API: Chrome Extension Manifest V3
- Communication: PostMessage API for secure cross-context messaging
- Network: STUN/TURN servers for NAT traversal
- Google Chrome browser (or Chromium-based browser)
- Active internet connection
- YouTube website access
-
Download the Extension
git clone https://github.com/jaskaransingh0/peer-sync.git cd peer-sync -
Enable Developer Mode in Chrome
- Open Chrome and navigate to
chrome://extensions/ - Toggle "Developer mode" in the top right corner
- Open Chrome and navigate to
-
Load the Extension
- Click "Load unpacked"
- Select the
peer-syncfolder - The extension should now appear in your extensions list
-
Verify Installation
- Navigate to any YouTube video
- Look for the PeerSync sidebar on the right side of the page
Extension will be available on Chrome Web Store after review process
-
Navigate to YouTube
- Go to any YouTube video you want to watch
- Ensure the video is public and accessible
-
Create Party
- Click the "Create Party" button in the PeerSync sidebar
- Your unique party code will be generated and displayed
- Click "Copy" to share the code with friends
-
Share the Code
- Send the party code to friends via text, email, or messaging apps
- Friends need to have the PeerSync extension installed
-
Get the Party Code
- Obtain the party code from the host
-
Join the Party
- Navigate to the same YouTube video
- Enter the party code in the "Enter code..." field
- Click "Join" button
-
Enjoy Synchronized Viewing
- Video will automatically sync with the host
- Use the chat to communicate with other viewers
- Type messages in the chat input field at the bottom
- Press Enter or click "Send" to send messages
- Messages appear in real-time for all connected users
- System messages show connection status and sync events
The extension uses multiple STUN servers for optimal connectivity:
- Google STUN servers (primary)
- Public STUN servers (backup)
- PeerJS TURN servers (fallback for restricted networks)
For best performance across different networks:
- Ensure UDP traffic is not blocked
- Consider using the same WiFi network for local connections
- Corporate firewalls may block P2P connections
peer-sync/
├── manifest.json # Extension configuration
├── background.js # Service worker for extension lifecycle
├── content.js # Main controller script (743 lines)
├── peer-logic.js # P2P connection logic (287 lines)
├── sidebar.html # UI sidebar template
├── style.css # Styling for sidebar UI
├── peerjs.min.js # PeerJS library
├── icons/ # Extension icons
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
└── README.md # This file
- Main Controller: Manages UI interactions and video synchronization
- Event Handling: Listens for video events (play, pause, seek)
- Chat System: Handles message sending and receiving
- User Management: Tracks connected users and permissions
- WebRTC Management: Handles peer connections using PeerJS
- Connection Establishment: Creates and joins P2P sessions
- Data Transmission: Sends sync commands and chat messages
- Network Resilience: Enhanced NAT traversal and error handling
- Extension Lifecycle: Manages extension installation and activation
- Tab Management: Handles extension icon clicks and tab switching
-
Clone Repository
git clone https://github.com/yourusername/peer-sync.git cd peer-sync -
Load in Chrome
- Follow installation instructions above
- Make changes to code
- Click "Reload" button in Chrome extensions page
-
Debug Console
- Open Chrome DevTools (F12)
- Check Console tab for debug messages
- Look for
[Controller],[PeerLogic], and[Background]prefixed logs
-
Minify Assets (optional)
# Minify CSS and JS files for production npm install -g uglify-js clean-css-cli uglifyjs peer-logic.js -o peer-logic.min.js cleancss style.css -o style.min.css -
Update Manifest
- Increment version number in
manifest.json - Update permissions if needed
- Increment version number in
-
Package Extension
# Create zip file for Chrome Web Store zip -r peer-sync-v1.0.zip . -x "*.git*" "*.history*" "node_modules/*"
- Cause: Network blocked external script loading
- Solution: Refresh page, check internet connection
- Cause: Firewall/NAT blocking P2P connection
- Solution: Use same WiFi network, check firewall settings
- Cause: Institutional firewalls block WebRTC/P2P traffic
- Solutions:
- Switch to mobile hotspot temporarily
- Try from home/personal WiFi
- Contact IT department about WebRTC access
- Use VPN if permitted by institution
- Test with friends on different networks
- Cause: Invalid party code or host offline
- Solution: Verify party code, ensure host is still connected
- Cause: Network latency or permission issues
- Solution: Check connection quality, ensure host has control permissions
Enable verbose logging in browser console:
// Check PeerJS status
window.postMessage({ type: 'PEERSYNC_PEERJS_STATUS_REQUEST' }, '*');
// Check connection status
console.log('Current connections:', connections);
// Test data sending
window.postMessage({
type: 'PEERSYNC_SEND_DATA',
payload: { type: 'TEST', message: 'Hello' }
}, '*');- Fork the Repository
- Create Feature Branch
git checkout -b feature/amazing-feature
- Commit Changes
git commit -m "Add amazing feature" - Push to Branch
git push origin feature/amazing-feature
- Open Pull Request
- Use consistent indentation (2 spaces)
- Add descriptive comments for complex logic
- Follow existing naming conventions
- Test across different network conditions
This project is licensed under the MIT License - see the LICENSE file for details.
- PeerJS Team: For providing excellent P2P communication library
- YouTube: For creating an extensible platform
- WebRTC Community: For making real-time communication possible
- Chrome Extensions Team: For the robust extension API
- GitHub Issues: Report bugs and request features
- Documentation: Check this README for common solutions
- Community: Join discussions in GitHub Discussions
- Developer: [Your Name]
- Email: your.email@example.com
- GitHub: @yourusername
- Video quality synchronization
- Mobile browser support
- Playlist synchronization
- Voice chat integration
- Screen sharing capability
- Custom room names
- Multi-platform support (Netflix, Twitch, etc.)
- User authentication system
- Enhanced moderation tools
Made with ❤️ for synchronized entertainment
PeerSync v0.1.0 - Bringing people together through shared experiences