Skip to content

Latest commit

 

History

History
94 lines (53 loc) · 5.6 KB

README.md

File metadata and controls

94 lines (53 loc) · 5.6 KB
Raw

WebGuard : Dark Patterns Detector

License GitHub Forks GitHub Stars GitHub Pull Requests

Guard

Overview

The Dark Patterns Detector is a sophisticated web extension developed with Next.js, designed to systematically identify and analyze deceptive design elements, commonly known as "dark patterns," prevalent on various websites. These manipulative tactics exploit user behavior, and this extension aims to empower users by exposing and providing insights into such practices.

Screenshots

Home Analysis About

Features

  • Pattern Detection: Utilizing ML model and image processing , the extension discerns and categorizes common dark patterns, including urgency, misdirection, scarcity, obstruction, social proof, sneaking, and forced action on websites.

  • Pattern Counts: Providing a transparent count of each detected dark pattern on a given webpage, the extension offers users valuable insights into the specific tactics employed.

  • Interactive Visualization: Results of the analysis are presented through an intuitive and interactive pie chart, enhanced by the Recharts library. This visualization aids users in easily interpreting the distribution of dark patterns.

Process Flow Diagram

ProcessFlowFull drawio

Getting Started

Installation

  1. Clone the repository:

    git clone https://github.com/rachancheet/DPBH

  2. Navigate to the project directory:

    cd DPBH

  3. Install dependencies:

    npm install

  4. Run the development server:

    npm run dev

  5. Open your browser and go to http://localhost:3000 to access the extension during development.

Browser Compatibility

Browser Is compatible? Links
Google Chrome ✅ https://chromewebstore.google.com/detail/webguard/fmdhbnclekigiecacodhabbbnadokeoj
Mozilla Firefox ✅ https://addons.mozilla.org/en-US/firefox/addon/webguard-gg/
Microsoft Edge ✅ Download From Chrome Webstore
Arc ✅ Download From Chrome Webstore
Opera ✅ Download From Chrome Webstore

Usage

  • Automatic Detection: The extension seamlessly scans webpages, automatically identifying and categorizing dark patterns.

  • Comprehensive Analysis: Detailed data analysis provides users with actionable insights into the prevalence of each dark pattern.

  • Visual Representation: An interactive pie chart visually represents the distribution of dark patterns, enhanced using the Recharts library.

License

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

Acknowledgments

  • Special thanks to Recharts for providing an excellent tool for pie chart visualization.
  • Special thanks to Framer-motion for providing the excellent animations and transition