WebSitter

Inspiration

A few weeks ago, I was talking with my grandfather, and he told me, quite confidently, that the first human had already landed on Mars. He'd read it on a "news" site. When I checked his phone to find the article, I found something worse: it was riddled with viruses, more than I'd ever seen on a single device. Fake headlines, cluttered ads, and no way for him to tell what was real, safe, or dangerous.

That moment stuck with me. The internet wasn't built with people like my grandfather in mind, and the same is true for kids on the other end of the age spectrum, both groups navigating a web full of scams, clutter, and content they're not equipped to filter on their own.

That's why I built WebSitter, a browser extension that protects and simplifies the internet for the people who need it most.

What it does

WebSitter offers two independent, toggleable modes. In practice, it's designed to be set up by a family member, a grandchild configuring Elderly Mode on their grandparent's laptop, or a parent enabling Kid-Safe Mode on their child's device, rather than requiring the elderly user or child to manage the settings themselves.

Elderly Mode

• Enlarges buttons and text for easier navigation
• Blocks ads automatically
• Detects and flags scam-style language on a page
• Lets users tap any button to get a plain-language explanation of what it does, read aloud

Kid-Safe Mode

• Blurs inappropriate images in real time using a machine learning model running entirely in the browser
• Warns before navigating to unmoderated or risky external links
• Filters toxic comments automatically

How I built it

WebSitter is built as a Chrome extension (Manifest V3), with three main components working together:

• content.js, injected into every page, handles DOM manipulation (resizing buttons, scanning images, intercepting clicks)
• background.js, a service worker that handles all external API calls, both plain-language button explanations and toxic comment detection are powered by OpenAI's gpt-oss-20b model, running on Groq for fast inference
• options.html/options.js, a dedicated settings page where users toggle each mode independently

Image classification runs locally using NSFW.js, a pretrained TensorFlow.js model, meaning no image data ever leaves the user's browser.

Challenges I ran into

Getting the ML model to classify images accurately and consistently was one of the biggest hurdles, tuning the right confidence threshold to catch genuinely inappropriate content without over-flagging harmless images took a lot of trial and error.

Keeping the UI simple and concise was another real challenge. Since WebSitter is explicitly designed for users who find modern interfaces overwhelming, elderly users and children, the options page itself had to embody that same simplicity, clear toggles, minimal clutter, and immediate visual feedback, without accidentally becoming just another confusing interface.

What I learned

This was my first time building a browser extension, so I learned how extensions are actually structured: the separation between content scripts, background service workers, and options pages, and why that separation exists (permissions, security, and browser sandboxing). I also learned the specific requirements Chrome enforces around permissions, manifest configuration, and how content scripts interact with a live webpage's DOM.

What's next

Elderly users and kids are just two corners of the internet that need protecting. Next on the roadmap: a low-vision mode with enhanced contrast and screen-reader support, and a language accessibility mode to help non-native speakers navigate confusing or unfamiliar sites.

I'd also like to expand WebSitter beyond Chrome to other browsers like Firefox and Edge, so it can protect more people regardless of what they already use.

Built With

• chrome
• css
• extension
• frontend
• html
• javascript
• openai
• tensorflow