Skip to content

Latest commit

 

History

History
49 lines (35 loc) · 2.26 KB

File metadata and controls

49 lines (35 loc) · 2.26 KB

Patch - Dark Pattern Detector

Version

Patch is a Chrome browser extension and Node.js backend service that work together to detect and highlight deceptive design patterns ("dark patterns") on websites, helping protect users from manipulative UI/UX tactics.

Detected Dark Patterns

  1. Urgency – Artificial or exaggerated time pressure.
  2. Scarcity – False or exaggerated limited stock claims.
  3. Confirmshaming – Emotionally manipulative decline options.
  4. Hidden Costs – Undisclosed or obscured fees.
  5. Fake Social Proof – Fabricated popularity indicators.
  6. Trick Wording – Confusing double negatives.
  7. Nagging – Persistent interruptions.
  8. Hidden Subscription – Unclear recurring billing.
  9. Preselection – Pre-checked marketing opt-ins.
  10. Visual Interference – Less visible decline options.

Monorepo Layout

This repository is a pnpm workspace with three packages:

  • extension: Chrome extension (MV3)
  • backend: Express.js API (LLM-based analysis)
  • shared: Shared TypeScript schemas & types

Usage (Extension)

  1. Click the extension icon to open the popup.
  2. Auto-scan – When no patterns are detected yet, opening the panel starts a scan automatically; use the header refresh control to rescan.
  3. View Results – See detected patterns with severity levels.
  4. Filter Patterns – Filter by severity or category.
  5. Click a pattern – View detailed explanation and suggested actions.
  6. Hide Pattern – Remove the pattern element from the page.
  7. Submit Feedback – Report false positives or missed patterns.
  8. Toggle Detection – Disable/enable detection for specific domains.

Demo pages under extension/demo/ provide reproducible pages with known dark patterns:

  • dark-patterns.html – Comprehensive test page with various patterns.
  • marketplace.html – E-commerce simulation.
  • signup.html – Sign-up flow with dark patterns.

For more detailed information on how to use the extension, see the User Manual.

Developer Information

See CONTRIBUTING.MD for more information on how to set up a local development environment and contribute to the project.