Browser Dark Pattern Detector

ISEF Category: Systems Software

Subcategory: Human/Machine Interface  ·  Difficulty: Advanced  ·  Setup: Home Setup  ·  Time: 1 to 2 Months

The Hook

Online stores can steer you with sneaky design tricks, not just with price. A checkout page can nudge you to accept add-ons, hide fees, or make canceling hard. Your browser extension can act like a traffic cop for the web. It flags those tricks before you click.

What Is It?

Dark patterns are interface designs that push people toward choices they might not make on their own. Think of them like a maze with signs that point you the wrong way. In checkout flows, that can mean confusing button labels, pre-checked extras, hidden costs, or a cancel path that is harder to find than the sign-up path.

Your project tries to detect those patterns automatically while a page loads. The extension reads the page structure, called the DOM, which stands for Document Object Model. That is the browser's live map of buttons, text, links, and forms. A small language model can scan that structure, look for known warning signs, and alert the user in real time.

Why This Is a Good Topic

This is a strong science fair topic because you can test it with real web pages and clear measurements. You can measure accuracy, false alarms, speed, and how well the tool handles different kinds of checkout flows. The project connects to a real problem, consumer deception, and teaches you skills in web parsing, classification, evaluation, and product design.

Research Questions

• How does model size affect dark pattern detection accuracy on checkout pages? ?
• What is the effect of different DOM snapshot depths on false positive rates? ?
• Does adding layout features improve detection of hidden fees and preselected add-ons? ?
• To what extent can a small language model detect subscription traps in real time? ?
• Which dark pattern types are easiest for the extension to classify correctly? ?
• How does browser page complexity affect inference latency and warning timing? ?

Basic Materials

• Laptop or desktop computer with a modern web browser.
• Browser extension development setup, such as Chrome or Firefox developer mode.
• Access to the Princeton dark-patterns dataset or similar labeled examples.
• Text editor or code editor, such as VS Code.
• Spreadsheet software for tracking results.
• Screen recording software for checking warning timing.
• Test website list with checkout pages, saved for repeated trials.

Advanced Materials

• University or shared lab access to a GPU workstation.
• Large labeled dataset of checkout pages and interface screenshots.
• Version-controlled code repository for model experiments.
• Manual annotation guide for dark pattern labels.
• Access to web archives or crawled page snapshots.
• Benchmarking scripts for latency, precision, recall, and F1 score.
• User study materials for warning comprehension testing.

Software & Tools

• Python: Helps you clean page data, train models, and analyze results.
• Chrome DevTools: Lets you inspect the DOM, test extension behavior, and debug page parsing.
• VS Code: Gives you a clean place to write and organize your code.
• ImageJ: Measures visual elements in screenshots if you compare layout cues across pages.
• pandas: Organizes labels, predictions, and evaluation tables for analysis.

Experiment Steps

1. Define the dark pattern types you want to detect first, and keep the list narrow.
2. Choose what page information the model will read, such as text, buttons, form structure, or both.
3. Build a label scheme that matches the dataset and your own test pages.
4. Plan a baseline method so you can compare your model against a simpler detector.
5. Set up evaluation metrics for accuracy, false positives, recall, and warning latency.
6. Design a test set with pages the model has not seen, so your results reflect real generalization.

Common Pitfalls

• Training on page text only, which misses visual tricks like hidden options and deceptive button placement.
• Mixing checkout pages from the same site across train and test sets, which inflates accuracy.
• Using only obvious dark patterns, which makes the model look better than it is on subtle cases.
• Ignoring browser rendering changes, which can make DOM snapshots differ from what the user sees.
• Measuring detection quality without latency, which hides whether the warning arrives too late to help.

What Makes This Competitive

A strong version of this project goes past a simple classifier. You would compare multiple feature sets, test more than one model size, and measure how well the warning works across different site layouts. You could also separate patterns by type, since hidden fees and forced continuity are not the same problem. Careful error analysis, not just a single accuracy score, can make the project much stronger.

Project Variations

• Detect dark patterns in mobile checkout pages instead of desktop pages.
• Compare DOM-only detection with a hybrid system that also reads screenshots.
• Test whether a rules-based detector or a small language model works better on subscription cancellation flows.

Learn More

• Princeton Web Transparency and Accountability Project: Search for the dark patterns dataset and related papers from the university group that studied deceptive interface design.
• PubMed: Search for review articles on user interfaces, decision making, and online deception.
• ACM Digital Library: Find peer-reviewed papers on dark patterns, human-computer interaction, and web usability.
• MIT OpenCourseWare, Introduction to Computer Science and programming: Use the free course materials to strengthen your coding and data handling skills.
• Chrome Extensions Documentation: Read the official developer docs for browser extension APIs and DOM access.
• NIH PubMed Central: Search for free full-text papers on human factors and digital behavior studies.