It's no secret that our generation gets easily carried away on social media. Despite opening our laptops with the intention to be productive, it is easy to be swept away by various incredibly convenient and addicting entertainment outlets (ex. Instagram, Facebook, etc.). The hardest part about stopping a social media binge, is exiting the app in the first place. With every video being so different from the last, you find yourself unable to stop almost subconsciously. We wanted to create an extension that would convince us to get off of the app once we spent too much time on it. As a gentle reminder without entirely cutting off access. We figured that if the webpage were to simply close, we would just open it again. However, when our entire page is made visually unappealing and harder to use, we genuinely lost interest in continuing to scroll. The initial mystery that would be lost by shutting down the app, is simply diffused when you’re able to continue to view your content, but it is no longer presented in a way that entertains you. Instead it feels slightly annoying, and difficult to enjoy. Shifting you back into your productive gears, in a more effective and entertaining way.

What it does

Media warden is a Google Chrome extension that keeps track of your social media use per session, and moderate you to make sure that you don’t go over you’re a lot of time. The purpose is to help users from being distracted on social media. Using chrome API, we blacklisted the websites: Facebook, Instagram, Reddit, Twitter, YouTube, and TikTok. Ideally it would be an hour or 30 minutes, but for purposes of submission and demo there will be a timer of 15 seconds that determines when a bingeing session should be intervened. After 15 seconds, using the Google alarm API, CSS code is inserted to apply to various filters to the webpage to make the overall layout resemble the “deep-fried” meme theme. It’s known to be very visually unappealing, and once apply to the full webpage it makes the typically addicting experience of social media use, to be less enjoyable of an experience. And effect, deterring your interest to continue to scroll in the first place.

How we built it

We initially followed a tutorial for a Google Chrome extension, provided by the googles development page. After which we made alterations to work on the functionality of a timer, and insertion of CCS into a webpage. After which, we created separate files to be used for media warning, inspired by the chrome tutorial. While the functionality other tutorial was nothing like our completed project, it did give us an excellent foundation for understanding how it go about executing it.

Challenges we ran into

At first there were issues with the timeout() method, which we later came to realize was an outdated form of completing what we were trying to do. Google’s updated documentation required us to use the alarm API, after implementing this we were able to update the webpage CSS. In the past we were trying to use the ad CSS method, but using the Alarm API we also had to change this to the insertCSS() inside the chrome extension API.

Accomplishments that we're proud of

This was the first hack -athon that we were able to create a complete and viable project. We took a different approach to be more creative and have fun with what we were doing, and we ended up learning a great amount. We were proud that we were able to implement the chrome extension, and other Google APIs we had not used before in such a timely manner.

What we learned

We learned that Google Alarm API is the updated version of the timeout() method. We learn how to create a Google chrome extension, and effectively test the duck JavaScript. We also learned how to implement CSS into specified blacklisted webpages, and how to store and track session data using the chrome API.

What's next for Media Warden

In the future Media Warden would be used for mobile apps with similar functionality. In addition we would like to add pop-ups and other animations. For example, an initial pop-up would let the user know they have passed their session time limit. If they continue to scroll despite the filters, another pop-up will inform them that they are overtime. If they ignore again, there will be moving pop-ups that you have to try and catch in order to close. We would like to implement all kinds of tricks like autoscrolling and other distracting animation that gets worse the longer that you scroll. There would also be customization features, to allow custom social media usage time, as well as custom reboot time. Where you would be allowed to browse social media again, if you have been inactive on the blacklisted websites for a specified amount of time.

Built With

Share this project: