🔒 Obscuro - Sensitive Data Hider

Share your screen without exposing sensitive data.

Obscuro is a Chrome extension that intelligently hides sensitive information in your browser. You can either mask sensitive data or replace it with realistic scrambled stand-ins, then share your screen with confidence.

---

✨ Features

• 🎯 CSS Selector-based Hiding - Target specific elements with precision
• 🔍 Regex Pattern Matching - Automatically detect sensitive text (emails, SSNs, credit cards, etc.)
• � Scramble Mode - Replace sensitive values with realistic, deterministic fake values
• 🌫️ Blur Mode - Keep the original text in place while visually blurring it
• 🎛️ Mode Switcher in Popup - Toggle between Blur and Scramble without changing config
• �🚫 Smart Ignore Rules - Exclude specific content from processing
• ⚡ Dynamic Content Support - Works with React, Vue, and other SPAs via MutationObserver
• 🎨 Customizable Blur Effect - Adjust the blur intensity to your needs by changing the CSS
• 💾 Import/Export Configs - Share configurations across teams
• 🔐 Privacy First - No data collection, everything runs locally

---

📸 Demo

Before & After

Before (Sensitive Data Visible)	After (Data Hidden)

In Action

Watch Obscuro automatically hide sensitive data in real-time

---

🚀 Quick Start

Installation

From Chrome Web Store (Recommended)

1. Visit the Chrome Web Store
2. Click "Add to Chrome"
3. Start hiding sensitive data!

Manual Installation (Development)

1. Clone this repository:

   git clone https://github.com/yourusername/obscuro.git
   cd obscuro

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. Load in Chrome:

   • Open chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the dist/ directory

---

📖 Usage

Blur vs. Scramble

Use the Obscuro popup to choose a mode:

• Blur - Keeps the original value in the DOM and visually blurs it
• Scramble - Replaces the visible value with a deterministic fake value generated locally

Scramble mode is useful when blur is too distracting or when you want the page to remain readable during demos while still hiding sensitive values.

Basic Configuration

Click the Obscuro icon in your toolbar to open the configuration panel. Use the mode dropdown to choose Blur or Scramble. The extension uses a JSON configuration file:

{
  "version": "1",
  "selectors": [
    "[data-sensitive='true']",
    ".customer-email",
    "input[name='email']"
  ],
  "regex": [
    {
      "pattern": "[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}",
      "flags": "gi"
    }
  ],
  "ignore": {
    "selectors": [".public-data"],
    "regex": [
      {
        "pattern": "support@mycompany\\.com",
        "flags": "i"
      }
    ]
  }
}

Configuration Options

selectors (Array of Strings)

CSS selectors to target elements for hiding.

Examples:

• "[data-sensitive='true']" - Elements with data-sensitive attribute
• ".customer-email" - Elements with customer-email class
• "input[name='email']" - Email input fields
• "#user-profile .address" - Specific nested elements

regex (Array of Objects)

Regular expressions to match and hide sensitive text content.

Structure:

{
  "pattern": "regex_pattern_here",
  "flags": "gi"  // optional: g=global, i=case-insensitive
}

Common Patterns:

• Email: [A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}
• SSN: \\b\\d{3}-\\d{2}-\\d{4}\\b
• Credit Card: \\b\\d{4}[\\s-]?\\d{4}[\\s-]?\\d{4}[\\s-]?\\d{4}\\b
• Phone: \\b\\d{3}[-.\\s]?\\d{3}[-.\\s]?\\d{4}\\b

ignore (Object)

Exceptions to prevent hiding of specific content.

Structure:

{
  "selectors": ["array of CSS selectors"],
  "regex": [
    {
      "pattern": "pattern_to_ignore",
      "flags": "i"
    }
  ]
}

---

🎯 Use Cases

Screen sharing

Hide sensitive data while screen sharing your CRM, analytics platform, or admin dashboard.

Healthcare

Hide patient names, medical record numbers, and diagnoses during training sessions.

Financial Services

Mask account numbers, balances, and transaction details in presentations.

Customer Support

Share screenshots with support teams without exposing sensitive information.

---

📦 Example Configurations

We provide pre-built configurations for common use cases:

• SaaS/CRM - Customer emails, phone numbers, addresses
• Healthcare - Patient data, medical records, PHI
• Financial - Account numbers, credit cards, balances

To use an example:

1. Open the Obscuro popup
2. Click "Import Config"
3. Select an example JSON file
4. Click "Save Config"

---

🛠️ Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

# Install dependencies
npm install

# Build TypeScript
npm run build

Project Structure

obscuro/
├── src/
│   ├── content.ts      # Content script (main logic)
│   ├── popup.ts        # Popup UI logic
│   ├── scrambler.ts    # Deterministic local scramble engine
│   ├── types.ts        # TypeScript types
│   └── content.css     # Content styles for blur/scramble states
├── examples/           # Example configurations
├── icons/              # Extension icons
├── manifest.json       # Chrome extension manifest
├── config.json         # Default configuration
├── popup.html          # Popup UI
└── popup.css           # Popup styles

How It Works

1. Content Script Injection: When you visit a page, content.ts is injected
2. Configuration Loading: The script loads your config from Chrome storage
3. Mode Selection: The popup stores whether the extension should blur or scramble matched content
4. Initial Scan: All elements matching your selectors are processed using the active mode
5. MutationObserver: Watches for DOM changes to process dynamically added content
6. Regex Processing: Text nodes are scanned for regex patterns and wrapped in censor spans
7. Scramble Engine: In scramble mode, sensitive values are replaced with deterministic fake values locally
8. Idempotency: Uses data-censor="1" attribute to prevent re-wrapping

---

🔒 Privacy & Security

Obscuro collects ZERO data. Everything runs locally in your browser.

• ✅ No analytics or tracking
• ✅ No external API calls
• ✅ No data sent to servers
• ✅ Open source and auditable

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.