Inspiration
Many youth often struggle with "doom-scrolling", staying on social media websites endlessly going from post to post or video to video, with often not much enjoyment. Personally, this has impacted my life considerably, as this type of behaviour is known to contribute to poor mental health. Additionally, I have struggled to stop myself from abusing these services. I have deleted the apps from my phone and told myself I can only use them on other devices such as my laptop, but even there I sometimes struggle with moderation of these services. It is infeasible to completely cut out all services like YouTube, Twitter, TikTok, Instagram and more from your life, because then you're left out of trends and what your friends are looking at, or unable to view important information, or genuinely enjoy these services in moderation.
What it does
This project is to help the user moderate their usage effectively, not completely cut out these services as that is unrealistic. We attempt to do this by adding a lot of "friction" in the way of abusing these services. The harder something is to do, the less likely we are to do it. This extension will be annoying to have and that is the point, but we want it to be designed to be as least frustrating as possible. Over the span of a certain time limit or number of scrolls set by the user, the extension would insert a popup to tell the user to take a break from scrolling. This popup forces the video the pause and prevents scrolling for a certain amount of time, also set by the user. We then calculate the energy saved by taking these breaks and give the user credits where they can redeem prizes such as gift cards.
How we built it
We built this project using JavaScript, HTML, and CSS. Javascript was mainly used for the back-end portion of the project. It was used to manage the timing and injection of the content scripts, ensuring videos are paused and unpaused based on the predefined time limits and user interactions. The background script monitors tab updates and uses Chrome's scripting API to execute the pause and unpause scripts, manage countdown timers, and track the state of video elements across different platforms. Additionally, JavaScript was used to create and manage the popup notification that appears when a video is paused. We used HTML/CSS to configure the UI of the Chrome Web Extension, allowing the user to define their screen limits to their own preference. It is also responsible for sending the user's response to the back-end and running the script injections for the program.
Challenges we ran into
Throughout the development process, we faced many challenges. Initially, we had issues with how to start the project since we had little to no experience with front-end-heavy projects. We addressed this problem by learning together and working to solve each other’s issues to jump-start our project. Furthermore, in the middle of the development stage, we spent five hours debugging and trying to get our features to work on both the front end and back end. During this time, we were demoralized and felt that we were not on track to finish the project. However, we persisted, understanding that this stage is inevitable in hackathons, and we overcame this hump.
Accomplishments that we're proud of
We are especially proud of our overall completion of the project. Coming into this hackathon, we had very little experience with JavaScript, HTML, and CSS. This hackathon allowed us to break the ice of trying to learn a new language and opened up a new opportunity for front-end development. Additionally, we are proud of how we communicated and solved issues as a team. We were always willing to help each other out, ensuring each team member had an important role crucial to this project's success.
What we learned
We learned that anything is possible once you put your mind to it. This hackathon made us realize that with persistent hard work and motivation, we can develop our ideas and turn them into reality. Additionally, we learned the fundamentals of front-end development and how to apply it in an application, rather than just learning the theory.
What's next for EcoScroll
The development of EcoScroll is limitless. We are currently developing this to work with other search engines such as Firefox. We also developing a prototype mobile version of the Chrome web extension, allowing it to run in the background and work with applications instead of websites. Additionally, we plan on refining our current model to support other sites such as Reddit and X.
Log in or sign up for Devpost to join the conversation.