The main extension popup - Email + site ID generated for each site you visit.
After clicking on the text, copies to clipboard.
The dashboard window - Displays statistics about most reported sites for spam.
The "Lookup/Report Site" Window, after looking up a site ID code.
After Clicking "Report" on the "Lookup/Report Site" Window
Initial Email Prompt
Initial Email Prompt - invalid email
We often receive a lot of spam emails. With the proliferation of Data Brokers and the "you are the product" mentality, it feels like every site we visit is trying to gather as much information on us as it can.
The DataDefender chrome extension is a way to fight back -- By tracking the sale and sharing of email address information using the Gmail email tagging feature, alongside providing easy insights into the spam you receive.
After watching a segment on Last Week Tonight with John Oliver, we realized just how easy it is for sites to sell our data to Data Brokers -- who can then sell that information to whoever they want. With the recent news about Twitter employees having access to all user data, the massive Equifax breach, and more, our data could have been leaked or sold anywhere.
What it does
DataDefender lets users know which platforms sell their personal information, leading to downstream utilization by marketers.
It is a chrome extension with 3 simple parts:
- Unique email tags per site -- Quickly autofill forms with a personalized site email
- Lookup & reporting of email tags -- If you receive a spam email, figure out the original upstream data source
- Global Reporting Dashboard -- View the sites that are most likely to sell or leak your data with easy-to-view visualizations across all extension users
How we built it
We built a chrome extension and a dashboard. The front end was built using React, the chrome extensions API, MaterialUI, and React-Charts. We heavily utilized styled-components, and react hooks to customize and add state to our extension.
The back end is built using the Go with Gin framework. We used Redis as a DB layer for its fast speed and performance. The entire back-end infrastructure, including the Redis DB layer, is containerized and running with docker. This allows for easy scalability and deployment of the backend.
Challenges we ran into
- React inside chrome extensions: configuring webpack correctly to bundle react inside extensions
- URL encoding and shortening : Performing database updates quickly
- Docker container communication: Exposing networks between separate docker containers
Accomplishments that we're proud of
- Scalable implementation of backend
- Highly available algorithmic implementation of back-end service
- Crowd-sourcing supported dashboard for the community
- A clean, professional UI that accounts for edge cases in form validation
- KNOWLEDGE of who is selling our data
What we learned
- Building Chrome extensions with modern front-end technologies
- Data broker ecosystem
- Enoding caveats
- Integration and network calls
- Container applications and virtual networks
What's next for DataDefender
- Deploying the backend to a cloud provider such as AWS and GCP
- Bug fixes for the alpha product
- Publishing a beta version on Chrome extension stores