DEV Community

Chrome Extension That Skips YouTube Ads (+Steps How To Create It)

Pavel Bucka on January 02, 2020

Recently I have created chrome extension called My Notes and as it received nice reviews, I have decided to create another one – Skip Ad. I am als...

Read full post

Pavel Bucka • Jan 7 '20 • Edited

For those who would like to try the solution using Observer out of curiosity, although it seems not to be more performant nor work on pages where #movie_player is not present, here's the code:

const target = document.getElementById('movie_player');
const config = { childList: true, subtree: true };

const callback = function(mutationsList, observer) {
  for(const mutation of mutationsList) {
    if (mutation.addedNodes.length === 0) {
      return;
    }

    if (mutation.target.className !== "video-ads ytp-ad-module") {
      return;
    }

    // Look for Skip Button here :)
  }
};


const observer = new MutationObserver(callback);
observer.observe(target, config);

The solution needs some finishing where the comment is now. Take it as an exercise :)

OffCorner Developer • Jan 4 '20

performance would be better using a document observer instead of calling the function every 300 milliseconds

Pavel Bucka • Jan 4 '20

Hi!

You need to attach the Observer to the node. The "good" node would be #movie_player but it is not always present on the page, like in home page for example. You would then have to move the observer up the chain to the node that exists on each page. As content script is inserted on the first page load that might not have #movie_player.
If you let's say ignore point 1. (which you can't lol) and test it from #movie_player, then you still find yourself getting HUNDREDS of mutations (no attribute mutations included). You loop the mutations and filter them to only those that have addedNodes. Then, you finally get to the container that encloses the ad, which is having className equal to "video-ads ytp-ad-module".
The ad container that contains the enclosed ad, from point 2., is not the final destination. You still have to look for button inside that node as you don't get mutation for that button. So you end up using getElementsByClassName anyway.
The execution time for the script using setInterval 300ms, is around 0.00024ms every 300ms. That's literally nothing. 500k executions take about 120-130ms and that's tested on really cheap ARM CPU. This execution time, from the top of the tree, is same (no real difference), when compared to starting from #movie_player.

And so for these reasons, I doubt performance using the Observer would be any better.

PS: I'd like to see btw how this could be precisely measured. If you have the time to test it and support your statement with better result, that would be really cool.

OffCorner Developer • Jan 5 '20

Thanks for the response, I just checked how many times the Mutationobserver actually triggers while watching a video, and it's so much more than every 300ms! So yes, your method seems more efficient.
One thing I did, in order to hide the ads shown to the right oft the video, is a tiny bit of css code:

#player-ads {display:none !important}

The ads are still loaded, so the publisher should be paid (unlike with adblock, which blocks the request).

Pavel Bucka • Jan 5 '20 • Edited

That's a good idea! Thanks!

I will add it to the next version.

Video overlay banners can also be handled the same way, as I found out they have a different container than Video ads. Hiding it via CSS would make it longer "visible" and publisher would get paid better as closing the banner is handled by youtube's base.js so it's probably tracked.

Video ads would continue to be handled the same way, with a click.

The final code would be like this:

setInterval(() => {
  for (const button of document.getElementsByClassName("ytp-ad-skip-button")) {
    button.click(); // "Skip Ad" or "Skip Ads" buttons
  }
}, 300);

CSS

.ytp-ad-overlay-container, #player-ads {
  display: none !important;
}

Much better!

Julian Nicholls • Jan 5 '20

Thank you for this. I have created an extension for myself now.

BANDARU ASHOK • May 10 '21

Can we make if conditions to skip the ads like if the ads 15 secs longer suppose to skip at 7 sec or if the ad is 30 sec duration to skip at 15 sec or if the ad is longer than 1 minute or more it should skip at 30 sec...? please help me :)