Keep an Eye
Keep a watchful eye on your kids, in a dangerous digital world.
Created on 26th June 2022
•
Keep an Eye
Keep a watchful eye on your kids, in a dangerous digital world.
The problem Keep an Eye solves
The internet is an amazing place. Lots of possibilities, things to learn, people to meet and stuff to try out. It represents free will, literally anyone can become a creator, and influencer and can even set up their own business with no physical office space. But with all this freedom and anonymity, comes a lot of explicit and sometimes inflammatory content.
It's not possible to keep a track of what every person is writing on the internet, as that would infringe free speech, but we can't deny the fact that underage kids who are exposed to sensitive, hateful and explicit content online might suffer serious mental problems. To deal with this issue, we came up with the idea of Keep an Eye, so that parents can know when their kids (under 13 years of age)
are exposed to such content online, without having to have the kids avoid the wonders of the internet...
How it does it
Keep an Eye is a Google Chrome browser extension, which parents have to set up on their child's browser. They have to complete the following steps:
- Add the browser extension to their child's chrome profile
- Add their phone number along with their country code
- Verify their phone number via OTP authentication
- Keep an eye out for any messages they receive on their registered mobile number regarding their child's browsing history. Something like :
Your kid might be looking at something fishy. The URL which generated this warning is: "www.example.com"
Challenges we ran into
Major challenges
For starters, none of us are big fans of JavaScript and have mostly used python in our projects before. In order to create a web extension, JavaScript was a must. So, we struggled with that. Two of our teammates are in USA and one is in India. So, a huge time difference. In order to collaborate with back-end and front-end, deploying the back-end somewhere was a must too, and none of us were familiar with Dev-ops either!! So, we took help from Linode documentation and deployed our API.
To top that off, it was Meryl's first hackathon!!
Process flow
In order to make a Chrome web extension, we took help from chrome API and chrome extensions API. We set up the UI for the extension using HTML and CSS, and integrated the chrome API facilities using JavaScript.
We needed to have a back end service too for profanity check. Our algorithm is:
- As soon as the content on a chrome tab is loaded, we invoke a tree parser
- The parser gets all the <p> tags in the page and filters out those which have "text" as their content-type
- The text from each tag is than sent to the API that we built which returns a boolean value telling whether or not this text contains something sensitive/vulgar/explicit
- If any triggering content is found, a notification is sent to the registered mobile number about it.
The API was built in python using FastAPI, and is deployed on a Linode Linux instance. We are saving the user's phone numbers in a CockroachDB database, which is integrated to the back-end server using SQLAlchemy.
For sending verification OTPs and notifying parents whenever the API is triggered, we've set up a Twilio service (free account).
Technologies used