AdBusters

Every time an ad tries to haunt your browser, we bust it — zap, trap, and contain it in your personal ghost vault.

Comment

Inspiration

Ad blockers have always been boring, so I wanted to put a twist on them and add interactive ad-blocking features. This Halloween theme gave me a perfect environment to do so, and it led me to make a Ghostbusters-themed AdBlocker that has a cool interactive aspect.

What it does

It is simply an ad blocker that takes a percentage of the ads on a web page and replaces them with spooky ghosts. You can then capture them by simply clicking on them, leading to them being captured through a neat little animation. You can then see the amount you have captured, as well as upgrade your capture amount once you have reached capacity. There is also an option to toggle on and off your ad blocker.

How I built it

I built it using the Kiro IDE, which helped tremendously, especially because I was learning a bunch of new technologies and languages. The extension utilizes Chrome's declarativeNetRequest API for efficient network-level ad blocking, blocking requests to known advertising domains before they even load. Content scripts are injected into web pages to detect ad elements in the DOM, replacing them with interactive monster graphics and portal animations.

Challenges I ran into

The main challenge that I ran into was the blocking of ads on videos. YouTube frowns upon adblocking and has employed methods to cause problems in ad blockers, and because of that, I wasn't able to block ads that are in YouTube. Every attempt to block ads on YouTube was met with failure, and I made the decision not to attempt to block YouTube ads.

Accomplishments that we're proud of

I am very proud of how the ghosts and their animations turned out. I think that it looks terrific and has a very refined look. I had to do a lot of prompts in ChatGPT for it to generate images that were exactly what I wanted, but in the end, I believe that the visuals of this app look great.

What I learned

I learned that Manifest V3's declarativeNetRequest API is powerful but has limitations. Balancing network-level blocking with content script manipulation was key to effective ad blocking without breaking websites. Also, I learned how to create smooth CSS animations for the portal effects while maintaining page performance required careful optimization. We learned to use GPU-accelerated transforms and limit DOM manipulation to keep things running fast.

What's next for AdBusters

If I want to add something major to AdBusters, it would be blocking ads on YouTube and Twitch. It would be very difficult to find a way to block ads for both those websites, but it would make the extension much more functional and universal.

Built With

Share this project:

Updates