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.
-
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.
-
Clone the repository:
git clone https://github.com/rachancheet/DPBH
-
Navigate to the project directory:
cd DPBH
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and go to http://localhost:3000 to access the extension during development.
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 |
-
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.
This project is licensed under the MIT License - see the LICENSE file for details.
- 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