How I boost my web experience

2022-05-06T23:38:04.941Z

This time I've implemented a custom Adblocker extension for Chrome.

Init file named 'manifest.json' looks like this:

I need `content-script.js` to run on a webpage first loads.

There are a lot of banners that could be hidden with simple adding CSS styles. So that's will be my first function in there:

Next, I implement AdBlock features for each site I need it to.

Keybr.com

Here I tried a few ways to kick banners out from the working area

Here is Before/After comparing:

I'm glad with this result. Let's move on with my next experiments.

This source has a lot of issues. And the first thing I would like to do here is to disable all images and videos it shows in the news feed.

This works perfectly with aforementioned applyCSS( ) function.

Now, it's a big pleasure to me to skip one extra Amber Heard meme and surely talanted art.

Yandex music

The hardest one. And it still WIP.

Here I making skip for video banners which appears pretty randomly.

The main thing here is that I've added observer on player-controls. It helps me to indicate when a new audio track begins to play.

If the new track is a banner and the webpage contains one more video file, it runs the script which moves video playback to its end. Function skipVideo() also makes the banner mute, so even on track moving it will not disturb the user.

Here is the result, where you can see it skips advertising tracks that are initially 30+ sec long in a few seconds.

Console errors aren't mine btw.

Gleb Deriyenko

How I boost my web experience

Keybr.com

Reddit

Yandex music