A production-ready Chrome extension (Manifest V3) that blocks YouTube ads and hides Shorts content with customizable replacement images.

• Automatic Activation: Works immediately on YouTube pages
• Ad Blocking: Removes video ads, banner ads, and sidebar ads
• Shorts Blocking: Hides Shorts shelf, Shorts tab, and Shorts videos in feed
• Custom Replacement Images: Upload your own image to replace blocked ad spaces
• Persistent Settings: User preferences saved with chrome.storage

• Toggle switch for Ad Blocking (ON/OFF)
• Toggle switch for Shorts Blocking (ON/OFF)
• Master toggle to enable/disable all protections
• Image upload with preview
• Real-time status indicator

youtube-ad-blocker/
 manifest.json          # Extension manifest (Manifest V3)
 content.js             # Content script for DOM manipulation
 popup.html             # Popup UI HTML
 popup.css              # Popup styles
 popup.js               # Popup logic and storage management
 icons/                 # Extension icons
    icon16.png
    icon32.png
    icon48.png
    icon128.png
    icon.svg
 images/                # User-uploaded images storage
 README.md              # This file

1. Download/Clone this repository to your local machine

2. Open Chrome and navigate to chrome://extensions/

3. Enable Developer Mode by toggling the switch in the top-right corner

4. Click "Load unpacked" button

5. Select the folder containing the extension files (youtube-ad-blocker)

6. The extension should now appear in your extensions list and toolbar

1. Navigate to chrome://extensions/

2. Enable Developer Mode

3. Click "Pack extension" button

4. Select the extension directory

5. This will generate .crx and .pem files for distribution

1. Navigate to youtube.com

2. The extension automatically activates and:

   • Blocks ads (if enabled)
   • Hides Shorts content (if enabled)

3. Click the extension icon in the toolbar to:

   • Toggle ad blocking
   • Toggle Shorts blocking
   • Upload a custom replacement image
   • View protection status

1. Enable "Block Ads" toggle
2. Navigate to YouTube homepage
3. Verify no banner ads appear at the top
4. Play any video
5. Verify video ads are skipped automatically

1. Enable "Block Shorts" toggle
2. Navigate to YouTube homepage
3. Verify Shorts shelf is not visible
4. Try navigating to /shorts URL
5. Verify block message appears

1. Click "Upload Image" in popup
2. Select a valid image (JPG/PNG, <1MB)
3. Verify preview appears
4. Navigate to YouTube
5. Verify image appears in blocked ad spaces

1. Change toggle settings
2. Close and reopen browser
3. Navigate to YouTube
4. Verify settings are preserved

1. Navigate to YouTube homepage
2. Click on a video
3. Click back button
4. Verify blocking still works

• No internet connection: Extension waits for page load
• YouTube updates: Extension uses multiple selectors for resilience
• Dynamic content: MutationObserver handles dynamically loaded content
• Multiple tabs: Each tab operates independently

   Popup UI        chrome.storage    Content Script
  (popup.html)           (sync/local)           (content.js)

                                                     YouTube DOM
                                                    (MutationObs)

• Runs on YouTube pages
• Uses MutationObserver for dynamic content
• Implements ad detection and skipping
• Handles Shorts content hiding
• Communicates with popup via messages

• Clean, modern dark UI
• Toggle switches with visual feedback
• Image upload with preview
• Status indicators
• Toast notifications

• Persists user preferences
• Stores base64-encoded custom images
• Syncs across devices (if using chrome.storage.sync)

1. Debounced Processing: Limits DOM manipulation frequency
2. Selector Caching: Reduces querySelector calls
3. Efficient Observation: Only processes relevant mutations
4. Lazy Loading: Waits for body element before initialization

• No external libraries (reduces attack surface)
• Content Security Policy compliant
• Minimal permissions (only youtube.com)
• No data collection or external requests

1. Check if enabled: Go to chrome://extensions/ and verify toggle is ON
2. Refresh YouTube: Press F5 to reload the page
3. Check permissions: Ensure extension has access to youtube.com
4. Console errors: Open DevTools (F12) and check Console for errors

1. YouTube may have updated their ad selectors
2. Try refreshing the page
3. Check if ad blocking toggle is enabled
4. Report the issue with specific ad type

1. Shorts can appear in various forms (shelf, individual videos)
2. Ensure "Block Shorts" toggle is enabled
3. Refresh the page after enabling

1. Verify image is under 1MB
2. Check image format (JPG/PNG only)
3. Try re-uploading the image
4. Check browser console for errors

No build step required - this is vanilla JavaScript/CSS/HTML.

• ES6+ JavaScript features
• JSDoc comments for functions
• Consistent indentation (2 spaces)
• Semantic HTML5 elements
• BEM-like CSS naming

1. Update manifest.json if new permissions needed
2. Modify content.js for DOM-related features
3. Update popup files for UI changes
4. Test thoroughly on YouTube

This extension is for educational purposes. Use at your own discretion. Blocking ads may impact content creators' revenue.