Actual Adblock Alternative

Actual Adblock alternative

12.12.2023 by HenDaBen

A worthy opponent for AdBlock to try out

For several years I have been watching as adblockers evolve from side to side, while Google and others do the same to counter this. I still used AdBlock on a daily basis back in 2013 (and now I'm pointing on the glorious AdBlock) but the fuss with ads not actually getting blocked made me give up on it.

And yes, there was another valid point. Lots of streamers relied on ad revenue so if I wasn't supporting them via donations the act of disabling AdBlock was just a small favor to do. But nowadays I have mostly ditched Twitch and moved on to Youtube.

And that's what this article is about! A nice, soft and efficient way to mute or reduce Youtubes' advertisement volume without any interaction!

How to:

The first step to do is to open your Google Chrome browser. Navigate to extensions from the top right menu, find and install Tampermonkey. This extension is used to run built-in scripts which Chrome then reads while surfing on the web. The basic idea of this extension is to abuse HTML elements, like removing google ad tags and so on.

After the extension is installed, head to Tampermonkey's dashboard and create a new (or edit the existing) script. Then add the following pile of code to the project without touching it.

// ==UserScript== // @name YouTube Mute Ads // @version 0.1 // @description Reduce the sound of YouTube video ads // @match https://www.youtube.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com // ==/UserScript== const volumeRatio = 0.1; // Ratio of volume of video ads to main video const playbackSpeed = 0; // If not positive, use the same playback speed as main video (function() { 'use strict'; let player = null; let videoAds = null; let savedVolume = null; function findVideoAds(observer) { videoAds = player.querySelector(':scope > .video-ads'); if (videoAds) { observer.observe(videoAds, { childList: true }); console.log('[YMA] Found video ads'); } return videoAds; } function onVideoAdsChange() { if (videoAds.childNodes.length) { if (!Number.isFinite(savedVolume)) { savedVolume = player.getVolume(); player.setVolume(savedVolume * volumeRatio); console.log('[YMA] Volume x ' + volumeRatio); const speed = playbackSpeed > 0 ? playbackSpeed : player.getPlaybackRate(); if (speed != 1) { player.querySelector('video').playbackRate = speed; console.log('[YMA] Set playback rate ' + speed); } } } else if (Number.isFinite(savedVolume)) { player.setVolume(savedVolume); savedVolume = null; console.log('[YMA] Restore volume'); } } const observer = new MutationObserver(() => { if (videoAds || findVideoAds(observer)) { onVideoAdsChange(); } }); const timer = setInterval(() => { player = document.getElementById('movie_player'); if (player) { clearInterval(timer); if (findVideoAds(observer)) { onVideoAdsChange(); } else { observer.observe(player, { childList: true }); } console.log('[YMA] Observer started'); } }, 1000); console.log('[YMA] Waiting for player to load...'); })();

After pasting the code, click the top left menu button and save your script. Head to Youtube and wait for ads to appear - in this example they will be reduced to 10 percent of total volume. If you know any basics of coding, you can try muting it. Hell, if you love advertisements, rise the volume to 100 percentage!

By changing the value on the line 13:

const volumeRatio = 0.1; // Ratio of volume of video ads to main video

You can adjust the volume. Some people like to reduce it to low, and by setting it as 0.0 the ad video is totally silent. Sometimes in the beginning of the video the ad reducement still allows a quarter of a second of sound to come through, but is muted instantly afterwards.

Reducing the sound of the video in action

Bonus: Custom dark mode

The next example is just a small 'how to' make your own "dark mode" at any page.

Now I'm going to show you how to make a website theme dark. Let's practive with the minesweeper online on this test. Open up a new tab (minesweeper.online) and go back to Tampermonkey dashboard.

Create a new script and paste the following code there:

// ==UserScript== // @name Minesweeper Online Dark Theme // @match *://minesweeper.online/* // ==/UserScript== const style = document.createElement('link'); style.rel = 'stylesheet'; style.type = 'text/css'; style.href = '/css/themes/fitebone.css'; style.id = 'fitebone'; document.head.appendChild(style);

Now if you reshresh the minesweeper page, you will see a slight change in the theme! Cool, right?