Inspiration

We have all used websites that contain copious amounts of ads. Some examples include news sites and citation machines. The ads showcase bogus products, display shady links, or even have distasteful pictures. In general, they’re pretty annoying to look at and click on. An ad blocker is a standard tool used for clearing up a web page. However, we wondered if there was a way we could solve the issue of clickbait ads without removing images. From this idea, Ad Absurdum was born.

What it does

Ad Absurdum emulates a conventional ad blocker in that it is able to detect ads on a webpage. However, instead of removing ads, it replaces them with homemade parodies of memes from the 2010s. These elegant memes are tastefully made and benign— they will not redirect you to other sites, nor will they corrupt your device with malware. Ad Absurdum instantly improves the visual consistency of any webpage. More importantly, it turns harmful distractions into harmless, silly ones that will brighten your day.

How we built it

The chrome extension was built in HTML, CSS, and Javascript. The manifest.json file contained meta-data on the extension in order to properly load onto a chrome browser. The dropdown menu (extension popup) was built in HTML and CSS. The functionality of each button was coded in Javascript. As well, the extension’s background script utilized many built-in chrome API’s and functions like webRequest, sendMessage/onMessage, and reload to detect an ad’s HTTP request, redirect the URL to our own images (hosted on imgbb.com), and refresh the page with updated images. The chrome extension popup also utilized Javascript functions to improve user experience by changing the button colour of the selected theme from pink to blue to indicate which category of images would be replacing advertisements.

Challenges we ran into

Because we had school during the first several hours of the hackathon, we did not get to start our project until later. When we were able to start, Kirsten tackled the chrome extension’s dropdown menu. She had trouble making the buttons change colour when clicked, but some troubleshooting and teamwork with Lavan allowed her to complete the dropdown. Having never built a chrome extension before, our team spent an immense amount of time just reading documentation to understand what components were necessary and what AP’s/functions would be required to implement the necessary functions. Lavan spent hours reading through chrome extension documentation to understand how the webRequest API functioned, how to send and receive messages between the background script and content script, and how to refresh the current chrome tab upon clicking on a button in the extension’s popup. While these struggles seem trivial after completing the project, the process of discovering necessary code and troubleshooting a new application was lengthy. As well, our entire team had limited experience with JavaScript, so we spent considerable time acquainting ourselves with appropriate syntax and coding practices to code the extension’s logic.

Accomplishments that we're proud of

Firstly, we are so proud of the graphics featured in Ad Absurdum. All of the hand-drawn icons and beautiful memes, inspired by real memes (and our pets), were laboriously crafted by Sandini and Corey. The consistent colour scheme and graphics style made for an aesthetically unified chrome extension.

On the technical side, we are proud to have overcome many challenges. We began with 3 lines of code in a manifest.json file— a file format foreign to the group—and ended with a folder containing all necessary HTML, CSS, Javascript, JSON, and PNG files to create a working chrome extension that any device can use. Despite spending hours researching what different scripts were available and when to use each, we were able to identify and implement all the features we had planned for our project. We were also beginners to GitHub, so being able to upload our entire project onto a repository and collaborate successfully was quite incredible and very useful during the hackathon.

What we learned

We are pretty new to hackathons! Impractical Hacks is Sandini’s 1st hackathon, Corey's 2nd hackathon, Kirsten’s 3rd hackathon, and Lavan’s 4th hackathon. As such, we learned a lot from creating Ad Absurdum!

Sandini picked up basic HTML! She learned to set up files and code using TextEdit.

Corey acquired new skills in graphic design when putting together Ad Absurdum’s beautiful graphics. They designed the logo and header using Autodesk Sketchbook and Pixlr Photo Editor. Corey also learned how to better navigate GitHub.

Kirsten learned to code a dropdown menu in HTML, CSS, and JavaScript. This is her second time trying HTML and CSS, and her first time working with JavaScript. Kirsten also developed basic knowledge on how to set up a chrome extension.

Lavan discovered how to create chrome extensions. He gained valuable experience in JavaScript as he learned to make pop-ups, add APIs, and identify and redirect ads to our memes.

What's next for Ad Absurdum

We would love to keep adding to Ad Absurdum’s reservoir of memes! More memes and more meme categories mean that the novelty of Ad Absurdum’s hilarium will never get old.

We would also like to improve Ad Absurdum to detect the aspect ratios of ads by identifying the ad’s container and either resizing our ad to fit within it or choosing an ad with a more fitting aspect ratio for the ad’s container. At the moment, our ads sometimes get cut off due to our dimensions not matching the original ad’s container’s size. This would minimize the distortion/cropping of our exquisite memes.

In addition, we would like to increase the list of URLs that redirect to our memes, since they currently only redirect ads hosted by doubleclick.net.

Finally, we would like to implement a feature allowing users to upload their own memes to replace advertisements, as this would allow for not only ours but also any user’s silly creativity to shine in their everyday browsing!

Built With

Share this project:

Updates