🔍 Trust Checker – Chrome Extension

Trust Checker is a Chrome Extension that detects dark patterns and manipulative UI elements on websites.

It identifies:

• ⏱ Fake urgency timers
• 📦 Low stock pressure messages
• 👀 Fake viewer counters

It also generates a Trust Score and highlights suspicious elements directly on the webpage.

---

🧠 How It Works

1. Scans webpage DOM using a content script
2. Detects patterns using regex
3. Sends data to backend
4. Backend returns:
   • Trust Score
   • Issues
   • Explanation
5. Highlights suspicious elements on the page

---

🏗️ Project Structure

project-root/
│
├── dist/                # ✅ Built extension (use this)
├── src/
│   ├── App.js           # Popup UI (React)
│   ├── contentScript.js # Pattern detection + highlighting
│   └── ...
├── manifest.json        # Extension config
├── server.js            # Backend
└── README.md

---

📦 Installation Guide (Step-by-Step)

✅ Step 1: Download the Project

• Click Code → Download ZIP
  OR:

git clone https://github.com/Hacker-KM/Dark_pattern_detector.git

• Extract the ZIP file

---

✅ Step 2: Open the dist Folder

• Go to project directory
• Locate the dist folder

👉 This folder contains the final extension build

---

✅ Step 3: Open Chrome Extensions

Open Chrome and go to:

chrome://extensions/

---

✅ Step 4: Enable Developer Mode

• Toggle ON Developer Mode (top right corner)

---

✅ Step 5: Load the Extension

• Click "Load unpacked"
• Select the dist folder

---

✅ Step 6: Extension Installed 🎉

• You will see Trust Checker
• Click 📌 Pin icon to pin it

---

🚀 How to Use (Step-by-Step)

🔍 Step 1: Open Any Website

Prefer:

• Amazon
• Flipkart
• Any e-commerce site

---

🔍 Step 2: Click Extension Icon

• Click Trust Checker icon in Chrome toolbar

---

🔍 Step 3: Click "Analyze"

• It will:

  • Scan page
  • Detect patterns
  • Call backend

---

🔍 Step 4: View Results

You will see:

• ✅ Trust Score
• ⚠ Issues detected
• 🧠 Explanation

---

🔍 Step 5: Highlight on Page

• Suspicious elements will be:

  • 🔴 Red → Timer
  • 🟠 Orange → Stock
  • 🔵 Blue → Viewers

---

⚠️ Important Fix (Very Common Error)

❌ Error:

Could not establish connection. Receiving end does not exist.

✅ Solution (Follow EXACT steps):

1. Reload extension:

   chrome://extensions/ → Click Reload
   

2. Refresh the webpage

3. Make sure you're NOT on:

   • chrome:// pages
   • Chrome Web Store

---

🔧 Run Locally (For Developers)

1. Install dependencies

npm install

---

2. Build extension

npm run build

---

3. Start backend

node server.js

Backend runs on:

http://localhost:3000

---

🎯 Example Detections

Type	Example
Timer	12:30
Stock	Only 3 left
Viewer	25 people viewing

---

🛠️ Tech Stack

• React (Popup UI)
• Chrome Extension APIs (Manifest v3)
• JavaScript (DOM analysis)
• Node.js + Express
• Axios

---

📌 Features

• Detects dark patterns
• Highlights elements on page
• Trust score system
• Lightweight & fast
• Full-stack project

---

🚀 Future Improvements

• AI-based detection
• Chrome Web Store publish
• Advanced UI dashboard
• Real-time monitoring

---

👨‍💻 Author

Kartik Mishra

• 🌐 https://code-with-kartik.netlify.app/

---