AdBlocks

Oh no my ads
HmmmmMMMM..
Are we meta enough?

Inspiration

We recalled that some years back, Google created a custom version of their home page where the elements turn into objects that fall to the ground and can be thrown around. So why not take that to the next level?

What it does

We created a Google Chrome extension that turns the adverts on any website into interactive physical blocks that obey gravity - so you can fling them around! Alternatively, you can decompose most of the visible DOM elements to have your very own physics playground.

How we built it

We used the matter.js Javascript library for all the physics behaviour, and wrote our own scripts to target, map and update the DOM elements to the underlying physics simulator.

Challenges we ran into

Documentation of the matter.js library was difficult to navigate with limited code examples. Additionally, trying to detect advertisements on a webpage is also very tricky especially given that there is a constant arms race between ad blockers and digital marketers.

Accomplishments that I'm proud of

We managed to overcome many bugs and technical difficulties with using the matter.js library!

What we learned

Good documentation is important. Thanks Mozilla Foundation for the amazing HTML, CSS and JavaScript documentation!

What's next for Ad Blocks

Ad detection in itself is a non-trivial problem, and in the future we use better heuristics to detect and remove more types and intrusive forms of ads, to enhance the experience of using Ad Blocks.