Shorts & Reels Blocker

A Chrome extension that limits YouTube Shorts and Instagram Reels viewing to one video at a time by blocking navigation methods.

Features

• Blocks Arrow Keys: Prevents ArrowUp/ArrowDown keys from navigating to the next/previous video
• Blocks Scrolling: Disables mouse wheel and trackpad scrolling on Shorts/Reels pages
• Blocks Swipe Gestures: Prevents touch-based swipe navigation on Instagram Reels
• Hides Navigation Buttons: Removes on-screen next/previous buttons
• Platform-Specific:
  • Regular YouTube videos (/watch) remain fully functional
  • Normal Instagram feed scrolling works as expected
• Automatic Detection: Works seamlessly as you navigate both platforms' Single Page Applications
• Multi-Platform Support: Works on both YouTube and Instagram simultaneously

How It Works

YouTube Shorts

The extension detects when you're viewing a YouTube Shorts page (URLs containing /shorts/) and blocks navigation.

Instagram Reels

The extension detects Instagram Reels in two ways:

1. Direct Reels URLs (URLs containing /reels/)
2. Reels modal/overlay (when opened from the feed or explore page)

Blocking Mechanism

Once a Shorts or Reels page is detected:

1. Intercepts keyboard events to block ArrowUp/ArrowDown keys
2. Intercepts scroll events (mouse wheel, trackpad, touch) to prevent navigation
3. Hides or removes on-screen navigation buttons using CSS
4. Monitors URL changes to activate/deactivate automatically
5. Uses MutationObserver to handle dynamic content loading on both platforms

Installation

Install from Source (Developer Mode)

1. Download or clone this repository to your computer

2. Open Chrome Extensions page:

   • Navigate to chrome://extensions/
   • Or click the three dots menu → Extensions → Manage Extensions

3. Enable Developer Mode:

   • Toggle the "Developer mode" switch in the top-right corner

4. Load the extension:

   • Click "Load unpacked"
   • Select the shorts-blocker folder containing manifest.json

5. Verify installation:

   • You should see "Shorts & Reels Blocker" in your extensions list
   • The extension will now be active on YouTube and Instagram pages

Usage

The extension works automatically once installed:

YouTube Shorts

1. Navigate to any YouTube Shorts video (e.g., youtube.com/shorts/VIDEO_ID)
2. Try to scroll or press arrow keys - navigation will be blocked
3. You can still watch the current Short (play, pause, adjust volume)
4. Regular YouTube videos continue to work normally

Instagram Reels

1. Navigate to any Instagram Reels video (e.g., instagram.com/reels/REEL_ID)
2. Or click any Reel from your feed or explore page
3. Try to scroll, swipe, or press arrow keys - navigation will be blocked
4. You can still watch the current Reel (play, pause, like, comment)
5. Normal Instagram feed scrolling continues to work as expected

Testing

Test on YouTube Shorts

• Go to any YouTube Shorts URL
• ✅ Arrow keys (up/down) should not navigate to the next Short
• ✅ Mouse scrolling should not change videos
• ✅ Navigation buttons should be hidden
• ✅ You can still play/pause the current video

Test on Instagram Reels

• Go to any Instagram Reels URL (e.g., instagram.com/reels/REEL_ID)
• ✅ Arrow keys (up/down) should not navigate to the next Reel
• ✅ Mouse scrolling should not change videos
• ✅ Swipe gestures should be blocked
• ✅ You can still play/pause, like, and comment on the current Reel
• Click a Reel from your Instagram feed
• ✅ Modal should open but navigation within Reels should be blocked

Test on Regular Content

YouTube

• Go to any regular video (youtube.com/watch?v=VIDEO_ID)
• ✅ Arrow keys work for seeking (left/right)
• ✅ Scrolling works normally for comments
• ✅ All regular functionality is intact

Instagram

• Browse your normal Instagram feed
• ✅ Scrolling works normally
• ✅ All regular functionality is intact

Test SPA Navigation

• Click a Shorts thumbnail from the YouTube homepage
• ✅ Blocking should activate without page refresh
• Navigate from Shorts to a regular video
• ✅ Blocking should deactivate automatically
• On Instagram, navigate from feed to Reels
• ✅ Blocking should activate when Reels opens
• Close Reels modal
• ✅ Blocking should deactivate when back on feed

Debugging

The extension logs activity to the browser console:

1. Open Developer Tools (F12)
2. Go to the Console tab
3. Look for messages prefixed with [Shorts Blocker] or [Reels Blocker]

Example logs for YouTube:

[Shorts & Reels Blocker] Initialized successfully
[Shorts Blocker] Activated on Shorts page
[Shorts Blocker] Blocked arrow key: ArrowDown
[Shorts Blocker] Blocked scroll/swipe event

Example logs for Instagram:

[Shorts & Reels Blocker] Initialized successfully
[Reels Blocker] Activated on Reels page
[Reels Blocker] Blocked arrow key: ArrowUp
[Reels Blocker] Blocked scroll/swipe event

File Structure

shorts-blocker/
├── manifest.json          # Extension configuration (Manifest V3)
├── content.js            # Main blocking logic
└── README.md             # This file

Technical Details

• Manifest Version: V3 (latest Chrome extension standard)
• Permissions: Host permissions for youtube.com and instagram.com
• Event Handling: Uses capture phase for early interception
• SPA Handling: Multiple methods to detect URL changes (Navigation API, history API, polling)
• Dynamic Content: MutationObserver watches for dynamic updates on both platforms
• Platform Detection: Automatically detects and applies platform-specific blocking rules
• Modal Support: Handles Instagram Reels modals opened from feed/explore page

Limitations

• Only works on Chromium-based browsers (Chrome, Edge, Brave, etc.)
• Requires the extension to be loaded in Developer Mode (until published)
• YouTube or Instagram may update their UI, potentially requiring selector updates
• Some keyboard shortcuts unrelated to navigation may also be affected
• Instagram Reels modal detection relies on DOM structure and may need updates if Instagram changes their design

Privacy

This extension:

• Does NOT collect any data
• Does NOT make network requests
• Does NOT track your browsing
• Only runs on YouTube and Instagram pages
• All processing happens locally in your browser
• Does NOT access or modify your account information on either platform

Contributing

Suggestions and improvements are welcome! If you encounter issues:

1. Check the browser console for error messages
2. Verify the extension is enabled
3. Try reloading the YouTube or Instagram page
4. If buttons appear, the platform may have changed their UI structure
5. Report the specific platform (YouTube/Instagram) and what's not working

License

MIT License - Feel free to modify and distribute

Credits

Built based on research from existing YouTube Shorts and Instagram Reels blockers and Chrome extension best practices.

Disclaimer

This extension is not affiliated with YouTube, Instagram, Google, or Meta. Use at your own discretion. Each platform's terms of service apply to all usage.