🛡️ Spotify Ad Shield — Ultimate Spotify Web Ad Blocker (Manifest V3)

A modern, lightning-fast Chrome/Chromium extension that completely eliminates audio ads, video interstitials, banners, and upgrade popups on Spotify Web Player.

Features • Installation Guide • How It Works • Creator • FAQ

Unlike generic ad blockers that break Spotify's web player or cause awkward pauses between songs, Spotify Ad Shield is built specifically for Spotify's internal playback engine:

• 🔇 Instant Mute & 16x Fast-Forward: Ad audio is muted before you hear a single second and accelerated to 16x speed to skip directly to your next track.
• ⚡ Zero-Flicker Banner Stripping: High-priority CSS drops billboard ads, top-bar sponsors, and premium banners before the page paints.
• 🛑 Upgrade Dialog Auto-Dismissal: Automatically dismisses "Enjoy ad-free music" and "Pick up where you left off" upsell popups.
• 📊 Dynamic Audio Visualizer: Features live audio equalizer and frequency wave graphs in a sleek Spotify dark-mode interface.
• 🎛️ One-Click Master Toggle: Switch protection ON or OFF instantly from the popup.

Follow these simple steps to install and run Spotify Ad Shield in Google Chrome, Microsoft Edge, Brave, or any Chromium browser:

Clone the repository using Git:

git clone https://github.com/YASMANTH-VEMULA/spotify-ad-blocker.git

(Or click the green Code button at the top of this GitHub page and select Download ZIP, then extract it to a folder).

Open your Chromium browser and paste the following URL into your address bar:

In the top-right corner of the Extensions page, toggle the switch labeled "Developer mode" to ON.

  Developer mode  [  ●  ] (ON)

1. Click the "Load unpacked" button in the top-left toolbar:
2. In the folder picker dialog, select the cloned/extracted folder:

   spotify-ad-blocker
   

3. Click Select Folder.

1. Click the Extensions puzzle piece icon (🧩) in your browser's top toolbar.
2. Find Spotify Ad Shield and click the Pin icon (📌) to pin it for quick access.
3. Navigate to open.spotify.com.
4. Click the Spotify Ad Shield extension icon:
   • Ensure the switch says ACTIVE PROTECTION.
   • Play any song or playlist — all ads will be silenced and auto-skipped!

┌────────────────────────────────────────────────────────────────────────┐
│                        Spotify Web Player                              │
├───────────────────────────────────┬────────────────────────────────────┤
│       1. Network Layer            │       2. Media Player Hook         │
│  - declarativeNetRequest rules    │  - Hooks HTMLMediaElement in MAIN  │
│  - Blocks spclient ad endpoints   │  - 0s Latency Mute + 16x Speed     │
│  - Drops telemetry trackers       │  - Auto-triggers queue skip        │
├───────────────────────────────────┼────────────────────────────────────┤
│       3. DOM & UI Cleanup         │       4. User Controls             │
│  - Injected CSS (zero layout lag) │  - Glassmorphic popup UI           │
│  - Auto-dismiss modal observer    │  - Live Equalizer & Wave Graphs    │
│  - Strips upgrade buttons         │  - Real-time blocked stats counter │
└───────────────────────────────────┴────────────────────────────────────┘

1. Network Filtering (rules.json): Uses Chromium's high-speed declarativeNetRequest engine to intercept ad-logic requests (spclient.wg.spotify.com/ad-logic/*, audio-ak-spotify-com.akamaized.net/ad/*, and ad networks) before network packets leave your computer.
2. Playback Automation (content.js & page_hook.js): Hooks into Spotify's HTMLMediaElement prototype. As soon as an ad track starts, volume is instantly zeroed (muted = true), playbackRate is boosted to 16.0, and the track seeks to the end in under 0.2s.
3. Banner & Overlay Removal (styles/adblock.css): Strips ad banners, sidebars, and upgrade promotions with zero layout shift.

spotify-ad-blocker/
├── manifest.json         # Manifest V3 extension definition & permissions
├── rules.json            # declarativeNetRequest network ad-blocking rules
├── background.js         # Service worker: manages badge state, rulesets & stats
├── content.js            # Isolated world script: DOM observer & promo killer
├── page_hook.js          # MAIN world script: hooks HTMLMediaElement playback
├── generate_icons.js     # Script generating multi-resolution PNG icons
├── styles/
│   └── adblock.css       # Zero-flicker CSS ad suppression styles
├── popup/
│   ├── popup.html        # Glassmorphic Spotify dark-mode interface
│   ├── popup.css         # Styling, audio equalizer animations & Bento cards
│   └── popup.js          # Master toggle controller & stats synchronizer
├── icons/                # Multi-resolution extension icons (16, 32, 48, 128, SVG)
└── assets/
    └── screenshot.png    # Extension UI preview screenshot

Created by Yasmanth Vemula. Follow and support for more open-source tools:

• YouTube: @YASMANTHOps — Tech tutorials, devlogs & AI automation.
• Instagram: @yasmanth_vemula — Behind-the-scenes & daily updates.

No. Spotify Ad Shield operates 100% locally in your browser. It does not collect, store, or transmit your credentials, cookies, or listening history.

Yes. It is specifically optimized for free Spotify Web accounts to silence audio/video ads, remove banners, and skip upgrade popups.

Yes. Open the extension popup anytime and click the master toggle switch to pause protection.

This extension is an independent open-source project designed for educational and personal use. Spotify is a trademark of Spotify Technology S.A., registered in the U.S. and other countries. This project is not affiliated with, endorsed by, or associated with Spotify.