Inspiration

We wanted to create something that would help the many people who had to stare at screens all day because COVID has most of us working online from home. We also knew that staring at screens for 7+ hours can cause issues with eyesight, headaches, neck soreness, etc. We thought that since many people use Google Chrome for their work we could create an extension to help remind them to take breaks, drink water, fix their posture, look away from the screen, etc. This comes from our personal experience, since our high school almost requires us to look at the screen from 8 to 11, and we feel like its taking a toll on our health.

What it does

Our extension lets the user choose between 6 seconds, 15 minutes, or 30 minutes as to when to get a reminder for things such as “take a break,” “drink some water,” and “fix your posture.” It also has a set timer of 10 minutes where it shows a green screen in a new tab to remind users to look away from the screen so as not to ruin their eyes, get headaches, etc. There is also a memory-based notification, where it will tell you to work harder if it sees your memory usage is low, or work less if your memory usage is too high

How we built it

We made our website using repel.it. We shared a repel.it with the entire team and we all worked on a part of it. We made a homepage with our extension name on it (SAVR). We then put 3 buttons on the homepage that direct you to other parts of the website. The first button directs you to our “Why?” page, which explains why we chose to make this extension. The second button labeled “Our Project” directs you to a page that explains our project, our goal, and how the extension works.

The extension was made in VS code, using HTML CSS and JavaScript. The background.js file helped to create the automated icon, as well as the code for the timers and memory sensing. We then used CSS and HTML to create the popup window, which lets the user select the duration they want before the motivational message pops up, and also lets you see our website and the green screen. The RNG choses a random number from 1-5 and displays whatever text corresponds with that number. For example, the number 1 would be “Remember to fix your posture!”. The extension will also read your computer’s activity monitor and check your memory every 10 minutes. If the memory usage is too high, the extension will bring you to a green screen and give the notification: “Take a break!”

Challenges we ran into

We originally were planning to base the green screen off of brightness, but it was impossible to get a chrome extension to use the brightness of the screen so we decided to run it on a timer instead. We also had trouble getting the notifications to show but found the error in the code. There were also times where we spent a good amount of time trying to find the mistake in the program only to realize we missed a semicolon.

Accomplishments that we're proud of

Considering this is our first hackathon, we’re proud of the extension itself and the fact that we were able to create a website to explain the extension as well. We spent a lot of time going through issues—centering the buttons on our website horizontally, formatting the website and creating new pages, adjusting the timers, getting the notifications to show, figuring out how to show the green screen, and so on—but kept pushing through and we are proud of the progress we have made these past two and a half days and the outcome of our hard work. There was a very sharp learning curve to learn CSS and HTML, but we made it, and managed to make a semi-decent extension we are proud off.

What we learned

We learned a lot from programming our extension and coding our website. We went to the css/html/javascript classes, took what we learned, and implemented it into our program. We learned a lot about timers for our extensions and css for the design of our website. Almost all of the things we needed to know in order to write our code were new to us, but we feel like we have progressed over the past few days greatly.

What's next for makeSSP_SAVR

Next for makeSPP_SAVR is to make a few appearance edits to make it a little more professional. We might also add a few more reminders or even some jokes. We also want to look into publishing the extension on the web store. We are still figuring out how to implement brightness control, as well as cpu usage into the extension, and are looking into integrating it with google meets, classroom, and calendar in the future.

Share this project:

Updates