Brainrot extension

StackOverflow getting absolutely lobotomized by the extension
Subway surfers gameplay jumpscare
pink-themed brainrot store! (created after the video was recorded)

TRACKS

build a tool that distracts you when ur trying to be productive - kanika mohan
i laughed.
(IJAG) I’m Just A Girl
the most cutesy pink project
most IQ points lost

Inspiration

We were inspired by Zayd making a Google Chrome extension that jumpscares the user with Homer Uchiha (audio included).

What it does

Our project is a Google Chrome extension in which the user gains brain rot points and can use those points to buy brain rot effects, from simple "hawk tuah" and "I just lost my dawg" audios to a Subway Surfers gameplay video when the user interacts with a button.

How we built it

We first started with an article on how to build your own browser extension link, and then we divided our tasks into front-end and back-end. Mily worked on gathering brainrot effects and testing them on the browser, while Zayd created the brainrot shop and fleshed out the backend.

Challenges we ran into

Both of us are still relatively new to Javascript, so we had to overcome a slight language barrier.

Zayd - this was my first ever project that needed some sort of backend and persistent storage, so I had to learn how chrome.local.storage works. It was also difficult, but rewarding to flesh out the communication system between the content script, background script and shop.

Mily - this was also one of my first projects working as frontend, as I usually do backend. I had to learn how to deal with event listeners, audios, images, and videos using Javascript, and 'chrome.runtime.getURL()'. I had my stressful moments, but saw it as a fun learning experience.

Accomplishments that we're proud of

This is our first time finishing a hackathon project! Overall, we split labor really effectively and communicated well, so that when the time came, integrating the front-end and back-end together was easy. We jumpscared ourselves several times with the brainrot images and audios. Some of the effects were really funny. My (Zayd) personal favorite is the one that replaces words on the webpage with brainrot. Mine (Mily) has to be the Subway Surfers video!

What we learned

How to build functioning browser extensions
How to interact with a webpage and inject code
Basics of backend design
Basics of frontend design
How to work with audio, images, and videos using Javascript and CSS

What's next for Brainrot extension

If we continued this project, we would add more brainrot effects, and make them more sophisticated. Moreover, we would establish more entertaining ways of obtaining brainrot points; right now, the only way to do so is to hover over a button. Lastly, we would enhance/brainrot-ify the shop UI.

Built With

Submitted to

brainrot jia.seed hackathon ($5,772) in prizes
- Winner i laughed. (new hackers prize) (10 winning teams)
- Winner (TPIA) this project is awesome

Created by

Zayd - I worked on the backend of the extension using chrome's local storage and a background script. I also created the shop, which pops up when the user presses the extension icon on their toolbar. To communicate between the content script, shop and background script, I set up multiple messaging ports.

Zayd Khan
Mily - I worked on frontend, testing out the browser's effects and how the user interacts with them. I gathered the effects and created event listeners that go with them. I created the effect that replaces words with random brainrot, dealing with text nodes.

Mily Mendez
intern at the tortured programmers department