The inspiration for this app was COVID-19 related. We found it hard to focus on our Zoom classes as we would space out or look at something else online. The idea was that if we had something that prevented us from doing that online then we would have to focus on our classes and as a result, do better in school. We did not know HTML, CSS, or JavaScript, so we all took this opportunity to learn three new languages and try to make a chrome extension that would help us do better in our classes.

What it does

The UStudyApp is a chrome extension that allows the user to insert whitelisted pages and blacklisted pages followed with a timer. The purpose of this is that you can only visit those selected whitelisted pages and not access any other during your time period. If you need to access another site during the time period, you would add it to the whitelist. Blacklisted and non-whitelisted sites cannot be accessed during the time period. When you finish the time period, you would be free to access any sites you please.

How we built it

We first implemented our Manifest JSON file to have the correct security policy to allow us to take in user input. Then we made the Popup HTML page for when you click on the extension, which contains four dropdown lists: whitelist, blacklist, timer, and authors. We formatted the popup HTML page using Bootstrap. Once we had our Front End completed, we worked on the Back End, creating separate JavaScript files to access chrome's local storage information for the whitelist, blacklist, and timer features. After integrating the Back End with the Front End, we tested the program for blacklisted sites when active.

Challenges we ran into

The main challenge we ran into was the Front End Development of the program while trying to achieve the minimalistic design that we were striving for. It was also difficult to format our sub-lists of URLs. Another challenge we ran into was the time constraint of the event. Learning how chrome extension content security policies work and how to functionally use the languages within a short period of time ended up leaving us with minimal time to formulate and construct everything. The most bothersome challenge ended up being that we had to work our way around the inline scripting security policy that Chrome has on its extensions. This limited us and forced us to search for intuitive solutions for basic functions.

Accomplishments that we're proud of

My team and I are proud that we took on this challenge of forcing ourselves to dive in headfirst into three new programming languages and trying to create something we thought was needed and cool. The two accomplishments that we are most proud of are manipulating the local storage on chrome and our front end design which for other study apps have not done presets like how we attempted.

What we learned

We learned that Front End Programming is a lot harder than we anticipated and we respect any nice-looking GUI or design. We learned three more languages: HTML, CSS, and JavaScript. We learned how to manipulate Chrome's local storage, design a timer using the local storage data, develop HTML features for our extension, work around the traditional inline scripting for HTML and JavaScript files, and bridge files together to accomplish tasks.

What's next for UStudyApp

The next thing for the UStudyApp would be implementing more features to increase functionality, fix some of our bugs within the program, and possibly make a mobile version for app restriction. The idea of this app can grow with a rewards system and possibly linking up google accounts between mobile and the website extension to retain data across platforms.

Share this project: