WebBlocker

Inspiration

The theme of this year's Manchester hackathon was "to the future", and I asked myself what the future internet would look like. And how spoilt we are already from current state of the internet.

What it does

My chrome extension monitors user search activity for specific keywords which the users can set, and blocks the page before it loads. Instead of just closing the tab, a custom warning screen will pop up, where an AI voice (Emily from Neuphonic) will guide you through, explaining why keyword is blocked, which will ask the user to say "I will not search up again." Followed by a reflection, they must say "I'm sorry" out loud to fully unlock the freedom for the web search. Users can freely delete or add keywords via voice commands, and videw their search stats in the statistics page.

How we built it

I used Javascript, HTML, and CSS to build the UI and logic, and I integrated Neuphonic's WebSocket TTS AI for AI voice.

I used Chrome's SPeechRecognition API to handle the user voice commands. I also desinged the extension using Chrome Extension APIs (background, content, and popup scripts)

Challenges we ran into

Getting Neuphonic to work in the browser environment was trickier than expected — especially understanding how to correctly import and use the SDK inside Chrome Extensions, Managing real-time interaction between user speech and UI unlocking logic, and Database integration required rethinking due to time constraints (still in progress)

Accomplishments that we're proud of

I implemented speech-based unlocking, including multi-stage reflection with "I'm sorry"

Custom warning screen with UI, live speech monitoring, and a stats tracker

Voice commands for managing keywords — no clicks required!

What we learned

How to structure and publish a Chrome Extension

Integrating real-time AI audio via WebSockets in frontend projects

Speech recognition challenges and hacks

Design thinking: how to use friction (speech) as a tool for reflection and behaviour change

What's next for WebBlocker

Proper integration with Firebase to log stats per user

Real-time dashboard that shows user search trends

Add more context-based keyword detection (e.g., NLP)

Offer different AI voice personalities and languages

Export blocked search history for accountability partners

Mobile version (maybe someday 😅)

Built With

• chrome-extensions-api
• chrome-speechrecognition-api
• css
• firebase
• html
• javascript
• neuphonic-(ai-tts)