Surf Shield

• 

  Icon

Inspiration

I wanted to create a browser-native assistant that acts as a buffer between users and potential threats; something that doesn't just detect danger, but helps people pause and think before reacting.

What it does

SurfShield is a Chrome extension that helps users detect phishing and scam messages directly in their browser. It runs in a side panel, analyzes user input using on-device AI, and provides real-time feedback, no need to visit external sites.

How we built it

I built SurfShield by customizing the Chrome Prompt AI demo and integrating Gemini Nano for on-device analysis. I used VS Code for development, added a phishing pattern dataset in JSON, and rendered responses using and for clean formatting.

Challenges we ran into

I faced compatibility concerns with Manifest v3, and some updates didn’t push through initially. Power outages also disrupted early progress. I had to troubleshoot Chrome APIs, JSON loading, and UI rendering across both Windows and macOS.

Accomplishments that we're proud of

I think it's the fact that I got to build something that helps protect regular people. Most are on the internet these days, and there are some who would get embarrassed to ask for help, or have something be explained to them, without being self-conscious. And this extension could be that shield against the scammers or bots phishing out information (or worse) from them. I’m proud that SurfShield doesn’t just flag threats, it explains them. The explainer block helps users understand why something is suspicious, and the “Report this” button gives them agency.

What we learned

I learned how to work with browser APIs, prompt engineering, and learned the beauty of building something, and contributing something. I know ideas are great, but you need to do something to put those ideas out there. We live and we learn, and that little idea of yours might be able to help others, even in the smallest of ways, like this simple extension.

What's next for Surf Shield

Next, I want to localize SurfShield for other languages and dialects, especially Filipino and Hiligaynon. I also envision a mobile app version that can help users flag suspicious messages across platforms.

Built With

• api
• canva
• chromedevtools
• css
• dompurify
• github
• githubpages
• html
• i18n
• javascript
• json
• localstorage
• manifestv3
• markdown
• marked
• prompt
• promptai
• python
• sessionstorage
• vscode
• webapis