The onset of the pandemic has led to the rapid surge of digital technologies, with people spending 20% more time on social media than they did pre-pandemic. ^1 The rapid surge of digital technologies has also revolutionised the ways we learn, work and interact. Consequently, this has increased our vulnerability to the potential dangers of the internet such as malicious threats, cyberbullying, identity and data theft, social media pressures and toxic information and opinions that can deteriorate our mental health.

Many of the existing solutions focus on education or disconnecting web trackers. These products fail to assist users in reporting online abuse, inform them of cybersafe practices and do not help safeguard one's mental health. This is where uSafe comes in.

What it does

uSafe is a Chrome extension that keeps users safe by helping them report cyberbullying and abuse, get information and advice about the best cybersafe practises specific to each website they visit and also allow them to hide negative/trigger words or messages. Our key features are:

  1. Snapshot - let people to quickly gather all the evidence to report cyber bullying
  2. Warning notifications - warns users of potentially dangerous actions
  3. Safety guide - give users an e-safety guide for their current webpage
  4. Negativity filter - hides words that are explicit or sensitive
  5. Image filter - blurs provocative images

How we built it

The extension was built using React Typescript and utilised the Chrome extensions API/Chrome.Tabs API to interact with the browser's tab system. We also used node fetch to gather data from websites such as "", which provided information about cybersafe practices. We also interacted with data on the user's window/browser via JS DOM. The extension's UI was created with Atlassian's Atlaskit UI library and JSZip was used to help bundle together screenshots into a downloadable zip file. Webpack was used to assist in module management/bundling. We used Chibat's chrome-extension-typescript-starter to provide some basic boilerplate code to help us get started with setting up React, Typescript and Webpack.

Challenges we ran into

Some of the initial challenges we encountered was formulating and refining our ideas, to try and create a product that could provide a positive impact to a wide audience.

When we began coding, the major challenge was learning how to create a chrome extension as no one on the team had any experience with extensions. There were some issues we faced with the DOM manipulation, such as blurring specific words/images in the browser.

Another issue some of us faced include fetching data from unstructured web pages, especially fetching responsibly and making sure we were not spamming their site with requests.

Accomplishments that we're proud of

We are most proud of the commitment from everyone on the team to the project. Despite the time pressure, we were able to learn a lot about using Chrome Extension API, effective DOM manipulation and extracting data from unstructured webpages. We were also very proud of having been able to put the skills we learnt at uni to create a working app.

What we learned

We were able to learn and refine a number of skills, firstly we learnt how to build browser extensions. Secondly, some of the team members were able to learn React JS, whilst others were able to further develop their understanding of the library. Thirdly, we were able to learn and develop our skills in DOM manipulation and extracting data.

What's next for uSafe

We believe there is a lot of avenues where uSafe can grow. We would like to integrate ML/AI to refine some of the existing features such as 'negativity filtering', thus providing more accurate filtering for constantly changing slang. Additionally, ML/AI can also be used to create new features such as scam filters. Additionally, we would also like to improve our 'snapshot' feature by blurring/censoring the areas of the snapshot that can be a trigger for some people but allowing the snapshot to be uncensored when being used as cyber bullying evidence. We would also like to implement selective censoring of provocative images based on Google Cloud Safesearch to detect explicit content.

Built With

Share this project: