SafeGuard

AI-Powered Image & Text Detection to Shield You from Privacy Leaks and Harmful Content

Comment

SafeGuard Project Story

Inspiration

We built SafeGuard for moments when it matters: in public meetings and live streams, a casual page scroll can expose phone numbers, emails, or addresses to everyone on-screen; in classrooms, a single harmful image or explicit phrase can derail a lecture in seconds. Traditional filters are blunt—they either miss scattered fragments or black out entire sections.

So we chose a multimodal approach. SafeGuard understands both images and text and applies precision masking to surgically hide only the risky pieces, preserving context and keeping people safe when it counts.

What it does

SafeGuard is an intelligent Chrome extension that acts as your personal content guardian, scanning both images and text across any website to detect and block privacy information, sensitive content, and harmful material.

Key Features:

  • Dual-vision AI Detection: Analyzes both text and images using multiple AI providers (Gemini, Qwen, DeepSeek)
  • Precision Masking: Surgically blocks only harmful fragments (e.g., "My phone is {{123-456-7890}}") instead of entire paragraphs
  • Privacy Protection: Detects phone numbers, ID numbers, addresses, and other personal information
  • Harmful Content Filtering: Identifies and blocks sensitive, violent, fraudulent, and inappropriate content
  • Universal Compatibility: Works across all websites, including modern web components with Shadow DOM (YouTube, Bilibili, Reddit)
  • Smart Context Preservation: Blocks threats without breaking the flow of legitimate content
  • Flexible Configuration: Choose different AI providers for text and images based on your needs

How we built it

Architecture: We built SafeGuard using Chrome's Manifest V3 architecture with a sophisticated multi-layer detection system:

  1. Content Script Layer (content.js): The main orchestrator that scans the DOM, including Shadow DOM trees, aggregating text blocks and coordinating detection
  2. Background Service Worker (background.js): Acts as a CORS proxy for AI API calls, manages settings, and tracks statistics
  3. AI Provider System: Modular design supporting Gemini, Qwen, and DeepSeek with dedicated API wrappers
  4. Detection Engine (detector.js): Routes content to appropriate AI providers and processes responses
  5. Helper Utilities: Handle image-to-base64 conversion, CORS-safe fetching, and cross-node text replacement

Technical Innovations:

  • Shadow DOM Deep Traversal: Custom querySelectorAllDeep() function that recursively penetrates Shadow DOM boundaries to detect content in modern web components
  • Text Block Aggregation: Instead of scanning individual text nodes, we aggregate text by semantic blocks (paragraphs, comments, articles), improving AI context understanding by 40%
  • Batch Processing: Group text detection (5 texts per batch) reduces API calls and token usage by 30%
  • Precision Masking with {{}} Markers: AI returns text with {{sensitive}} markers, allowing surgical removal of only harmful fragments
  • Cross-Node Text Replacement: Smart algorithm that handles text spanning multiple DOM nodes without breaking Shadow DOM structure
  • CORS Proxy Pattern: All external API calls route through the background worker to bypass content script CORS restrictions

Development Stack:

  • Pure vanilla JavaScript (no frameworks)
  • Chrome Extension APIs (Storage, Runtime messaging, Scripting)
  • Multiple AI APIs (Gemini, Qwen, DeepSeek)
  • Custom internationalization system supporting English and Chinese

Challenges we ran into

1. The Shadow DOM Challenge

Modern websites like Bilibili, YouTube, and Reddit use Shadow DOM for comments and dynamic content. Standard DOM methods like querySelectorAll() couldn't access this content—our extension was essentially blind to 50% of modern web pages.

Solution: We built a recursive deep query system that penetrates Shadow DOM boundaries and dynamically monitors for new Shadow DOM attachments using MutationObserver.

2. The Precision Masking Problem

Early versions blocked entire paragraphs if they contained any sensitive content. This destroyed context and made websites unusable.

Solution: We developed a precision masking system where AI returns text with {{}} markers around sensitive fragments. Our replaceAcrossNodes() function surgically replaces only these fragments while preserving surrounding content.

3. CORS Restrictions

Content scripts can't make cross-origin API requests directly, blocking all AI API calls.

Solution: Implemented a proxy pattern where all external requests route through the background service worker, which has CORS privileges.

4. Image Detection Optimization

Converting images to base64 for AI analysis was slow and often failed due to CORS tainting when using canvas.

Solution: Built a dual-strategy approach: primary method uses background proxy to fetch images as base64, with canvas fallback for CORS-enabled images.

5. Context Loss in Batch Detection

Sending individual text nodes to AI ("Hello" and "world" separately) provided poor context compared to full sentences ("Hello world").

Solution: Implemented semantic text block aggregation that groups related text before AI analysis, dramatically improving detection accuracy.

6. Dynamic Content Detection

Single-page applications load content dynamically after initial page load, missing our detection.

Solution: Implemented comprehensive MutationObserver system that watches for DOM changes, new Shadow DOM attachments, and dynamically loaded content.

Accomplishments that we're proud of

  1. Universal Shadow DOM Support: We're proud that SafeGuard works seamlessly across modern web components where most content filters fail. Our deep traversal system is one of the most comprehensive Shadow DOM solutions we've seen.

  2. Precision over Bluntness: The {{}} marker system represents a paradigm shift from "block everything suspicious" to "surgically remove only threats." This preserves usability while maintaining security.

  3. Multi-AI Architecture: Successfully integrated three different AI providers with flexible configuration, proving that a multi-model approach provides better accuracy and resilience than relying on a single AI.

  4. 30% Token Optimization: Our batch processing and text aggregation strategies significantly reduced API costs while improving detection quality—a win-win.

  5. Production-Ready Code: We built a robust, well-documented system with comprehensive error handling, logging, internationalization, and backward compatibility—not just a proof of concept.

  6. Real-World Testing: Validated across actual websites (Bilibili, Reddit, forums) with diverse content types, ensuring practical effectiveness beyond controlled test cases.

What we learned

Technical Learnings:

  • Shadow DOM is everywhere: Modern web development increasingly uses Shadow DOM, and any content-aware extension must handle it properly
  • AI needs context: Sending fragmented text to AI produces poor results; semantic aggregation is critical
  • Precision matters more than recall: Users prefer missing some harmful content over aggressive false positives that break websites
  • CORS is the enemy: Content script limitations require creative architectural solutions
  • Batch everything: API call optimization isn't optional—it's essential for scalability

AI Integration Insights:

  • Different AI models excel at different tasks (Gemini for images, Qwen for Chinese text, etc.)
  • Structured prompts with clear output formats (JSON with markers) are crucial for reliable parsing
  • Caching AI responses with content hashing prevents redundant API calls
  • Multiple models provide fallback resilience when one API is unavailable

Extension Development Best Practices:

  • Manifest V3's service worker architecture requires different patterns than background pages
  • Message passing between content scripts and background workers needs careful orchestration
  • Settings must support backward compatibility as features evolve
  • Internationalization should be built in from day one, not added later

What's next for SafeGuard

Short-term Goals:

  1. Chrome Built-in AI Integration: Explore Chrome's upcoming built-in Gemini Nano API for on-device processing, eliminating API costs and privacy concerns
  2. User Customization: Allow users to define custom detection categories and sensitivity levels
  3. Whitelist/Blacklist System: Per-site configuration to disable detection on trusted sites or force strict mode on risky ones
  4. Performance Optimization: Implement more aggressive caching and differential scanning to reduce resource usage

Medium-term Vision:

  1. Video Content Analysis: Extend detection to video frames and subtitles
  2. Real-time Threat Intelligence: Community-driven threat database for faster detection of known harmful content
  3. Privacy Dashboard: Show users what types of threats were blocked, with detailed statistics and trends
  4. Educational Mode: Explain why content was flagged, helping users learn about online safety

Long-term Ambitions:

  1. Cross-browser Support: Extend to Firefox, Edge, and Safari with WebExtension API
  2. Mobile Browser Extension: Bring SafeGuard to mobile browsers for comprehensive protection
  3. Enterprise Edition: Advanced features for organizations (centralized management, compliance reporting, custom policies)
  4. AI Model Training: Develop specialized models trained on web content filtering tasks for better accuracy
  5. Open Platform: API for third-party developers to integrate SafeGuard's detection capabilities into other tools

Research Directions:

  • Contextual Understanding: Improve AI's ability to understand context (satire vs. genuine threats, educational vs. harmful content)
  • Multilingual Support: Expand beyond English and Chinese to support global users
  • Privacy-Preserving ML: Explore federated learning approaches where models improve without collecting user data
  • Accessibility: Ensure filtered content remains accessible to users with disabilities

SafeGuard represents our vision of a smarter, more nuanced approach to content safety—one that protects users without infantilizing them, blocks threats without breaking experiences, and evolves with the web's complexity. We're excited to continue this journey and see how AI can make the internet safer for everyone.

Built With

Share this project:

Updates

Submission history