Documentation: Create Tampermonkey Script Example for Client Integration

[matthewgoluba]

We need a reference implementation for how to use the API from a client-side script (Tampermonkey). This will serve as the bridge between any external web tool and our Redaction API.

Note: The script implements a standalone client-side redaction engine (no API dependency) for immediate use. Can be extended to call the API if needed.

Tasks:

• Create examples/tampermonkey-redactor.js
• Script should:
  • Add a floating indicator/button to supported sites
  • Auto-redact on paste (configurable)
  • Manual redact via keyboard shortcut (Ctrl+Shift+R)
  • Display redaction mapping in settings panel
  • Allow copying the mapping to clipboard
• Include configuration for API URL (localhost vs production) - Currently standalone, API integration optional
• Document installation steps in script header

Supported Sites:

• ChatGPT, Claude, Gemini, Copilot, Poe

[goobz22]

Implementation Notes Based on Codebase Review

Current State

• examples/ directory exists with basic-usage.ts
• API endpoint needed first (Issue Feature: Implement REST API for Redaction Service #3)
• Core package is published to npm as data-redactor-core

Suggested Implementation

Create examples/tampermonkey-redactor.js:

// ==UserScript==
// @name         Data Redactor
// @namespace    https://github.com/goobz22/data-redactor
// @version      1.0.0
// @description  Redact sensitive data before sending to AI tools
// @match        *://gemini.google.com/*
// @match        *://chat.openai.com/*
// @match        *://claude.ai/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @connect      your-redactor-api.vercel.app
// ==/UserScript==

(function() {
  'use strict';
  
  const API_URL = 'https://your-redactor-api.vercel.app/api/redact';
  
  // Configurable: CSS selector for the text input area
  const INPUT_SELECTORS = {
    'gemini.google.com': 'textarea[aria-label="Enter a prompt here"]',
    'chat.openai.com': '#prompt-textarea',
    'claude.ai': '[contenteditable="true"]'
  };
  
  // Add styles
  GM_addStyle(`
    .redactor-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      padding: 10px 20px;
      background: #002868;
      color: #FFD700;
      border: 2px solid #BF0A30;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
    }
    .redactor-btn:hover { background: #001a4d; }
    .redactor-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      z-index: 10000;
      max-width: 600px;
      width: 90%;
    }
    .redactor-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 9999;
    }
  `);
  
  function getInputElement() {
    const host = window.location.hostname;
    for (const [domain, selector] of Object.entries(INPUT_SELECTORS)) {
      if (host.includes(domain)) {
        return document.querySelector(selector);
      }
    }
    return null;
  }
  
  function getInputText(el) {
    return el.value || el.innerText || el.textContent || '';
  }
  
  function setInputText(el, text) {
    if ('value' in el) {
      el.value = text;
      el.dispatchEvent(new Event('input', { bubbles: true }));
    } else {
      el.innerText = text;
      el.dispatchEvent(new InputEvent('input', { bubbles: true }));
    }
  }
  
  async function redactText(text) {
    return new Promise((resolve, reject) => {
      GM_xmlhttpRequest({
        method: 'POST',
        url: API_URL,
        headers: { 'Content-Type': 'application/json' },
        data: JSON.stringify({ text, preset: 'strict-ai' }),
        onload: (response) => {
          if (response.status === 200) {
            resolve(JSON.parse(response.responseText));
          } else {
            reject(new Error('API request failed'));
          }
        },
        onerror: reject
      });
    });
  }
  
  function showModal(originalText, redactedText, onConfirm, onCancel) {
    const overlay = document.createElement('div');
    overlay.className = 'redactor-overlay';
    
    const modal = document.createElement('div');
    modal.className = 'redactor-modal';
    modal.innerHTML = `
      <h3 style="margin-top:0">Redacted Text Preview</h3>
      <textarea readonly style="width:100%;height:200px;margin-bottom:10px">${redactedText}</textarea>
      <div style="display:flex;gap:10px;justify-content:flex-end">
        <button id="redactor-cancel" style="padding:8px 16px">Cancel</button>
        <button id="redactor-copy" style="padding:8px 16px">Copy Only</button>
        <button id="redactor-confirm" style="padding:8px 16px;background:#002868;color:white">Use Redacted</button>
      </div>
    `;
    
    document.body.appendChild(overlay);
    document.body.appendChild(modal);
    
    modal.querySelector('#redactor-cancel').onclick = () => {
      overlay.remove();
      modal.remove();
      onCancel();
    };
    
    modal.querySelector('#redactor-copy').onclick = () => {
      navigator.clipboard.writeText(redactedText);
      alert('Copied to clipboard!');
    };
    
    modal.querySelector('#redactor-confirm').onclick = () => {
      overlay.remove();
      modal.remove();
      onConfirm(redactedText);
    };
    
    overlay.onclick = () => {
      overlay.remove();
      modal.remove();
      onCancel();
    };
  }
  
  // Create button
  const btn = document.createElement('button');
  btn.className = 'redactor-btn';
  btn.textContent = '🛡️ Redact';
  document.body.appendChild(btn);
  
  btn.onclick = async () => {
    const input = getInputElement();
    if (!input) {
      alert('Could not find input field on this page');
      return;
    }
    
    const text = getInputText(input);
    if (!text.trim()) {
      alert('No text to redact');
      return;
    }
    
    btn.textContent = '⏳ Processing...';
    btn.disabled = true;
    
    try {
      const result = await redactText(text);
      showModal(
        text,
        result.redactedText,
        (redacted) => setInputText(input, redacted),
        () => {}
      );
    } catch (error) {
      alert('Redaction failed: ' + error.message);
    } finally {
      btn.textContent = '🛡️ Redact';
      btn.disabled = false;
    }
  };
})();

Dependencies

• Issue Feature: Implement REST API for Redaction Service #3 (REST API) must be implemented first
• Issue Feature: Add 'AI Compliance' Strict Configuration Preset #4 (Presets) for preset: 'strict-ai' support

Additional Suggestions

• Add keyboard shortcut (Ctrl+Shift+R)
• Support for custom API URL in Tampermonkey settings
• Add feedback button to report missed redactions (ties to Issue Feature: Implement Feedback Loop for Missed Redactions #5)

[goobz22]

Implementation Complete

Created Tampermonkey userscript in examples/tampermonkey-redactor.js:

Supported Sites

• ChatGPT (chat.openai.com, chatgpt.com)
• Claude (claude.ai)
• Gemini (gemini.google.com, bard.google.com)
• Microsoft Copilot (copilot.microsoft.com)
• Poe (poe.com)

Features

• Floating indicator showing redaction status
• Settings panel with pattern toggles
• Auto-redact on paste (optional)
• Manual redact with Ctrl+Shift+R
• Redaction mapping display
• Persistent settings via GM_setValue

Patterns Included

• Email, Phone, SSN, Credit Card
• IPv4, IPv6, MAC Address
• Custom entity support (company names, customer names)

Ready to close.

[goobz22]

Note: The current implementation is a standalone client-side redaction engine that doesn't require the API server. This provides immediate value without server dependency. API integration can be added as an enhancement if needed.