Dead Scroll is a Chrome extension that helps you break free from digital distractions by burying websites in a virtual graveyard. Want to access them? You'll need to complete an AI-powered educational quest first. Learn something new to earn your freedom!

• 🔒 Permanent Blocking - Sites stay buried until you complete the quest
• 🧠 AI-Powered Learning - Educational content generated by Google Gemini
• 👻 Horror Theme - Immersive dark aesthetic with animations
• 🎮 Quiz Combat - Battle ghosts by answering questions correctly
• 📊 Progress Tracking - Monitor your attempts and learning journey

• Block any website for 1-365 days
• Sites remain in the graveyard even after the burial period
• Must manually delete to permanently unblock
• Prevents duplicate entries

• Topic Selection - Choose any subject you want to learn
• AI Content Generation - Gemini creates 5 educational sections with quizzes
• Halloween Sound Effects - Spooky audio feedback for correct/wrong answers
• Combat Mechanics - Correct answers kill ghosts, wrong answers cost hearts
• Progressive Learning - Complete all sections to unlock the site

• Dark, immersive UI with Creepster font
• Animated effects and transitions
• Blood-red accents and skull icons
• Consistent theme across all screens

• Attempt tracking for each blocked site
• Auto-deletion after quest completion
• Duplicate blocking prevention
• Chrome tab integration

• Node.js 20+ and npm
• Chrome 120+ or any Chromium-based browser
• Google Gemini API key (free)

# 1. Clone the repository
git clone https://github.com/yourusername/deadscroll.git
cd deadscroll

# 2. Install dependencies
npm install

# 3. Set up your API key
cp .env.example .env.local
# Edit .env.local and add your Gemini API key

# 4. Build the extension
npm run build

# 5. Load in Chrome
# - Open chrome://extensions/
# - Enable "Developer mode"
# - Click "Load unpacked"
# - Select the "dist" folder

Get your free Gemini API key:

1. Visit Google AI Studio
2. Sign in and click "Create API Key"
3. Copy your key

Add to the extension:

Option 1: Environment Variable (Recommended)

# Edit .env.local
VITE_GEMINI_API_KEY=your_actual_api_key_here

# Rebuild
npm run build

Option 2: Browser Console

// Open extension popup, press F12, run:
localStorage.setItem('gemini_api_key', 'YOUR_API_KEY_HERE');

⚠️ Security Note: Never commit your .env.local file. It's already in .gitignore.

Open Extension → Enter URL → Set Duration → Click "BURY FOREVER"

• Enter domain (e.g., instagram.com, youtube.com)
• Choose burial duration (1-365 days)
• Site is added to your graveyard

When you attempt to visit a buried site:

• Horror block screen appears
• Click "LEARN TO ESCAPE"
• Choose a topic to learn about

Learning Flow:

Topic Input → AI Generation → Read Section → Quiz → Combat

• Read educational content
• Answer quiz questions
• Correct ✅ = Kill ghost, next section
• Wrong ❌ = Lose heart, try again
• Complete all 3 sections = Victory!

• Site opens in new tab
• Automatically removed from graveyard
• You've learned something new! 🎓

• Start with 3 hearts ❤️❤️❤️
• Wrong answer = -1 heart
• No hearts = Quest restarts

• React 18 - UI framework
• TypeScript - Type safety
• Framer Motion - Smooth animations
• Tailwind CSS - Styling

• Vite - Fast build tool
• Chrome Extension Manifest V3 - Latest extension API
• Google Gemini API - AI content generation

┌─────────────────┐
│   Extension     │
│   Popup (React) │
└────────┬────────┘
         │
    ┌────┴────┐
    │         │
┌───▼───┐ ┌──▼──────┐
│ Horror│ │Learning │
│ Block │ │ Quest   │
└───┬───┘ └──┬──────┘
    │        │
    └────┬───┘
         │
    ┌────▼────────┐
    │  Background │
    │   Service   │
    └─────────────┘

Comprehensive documentation is available in the docs/ folder:

• Installation Guide - Detailed setup instructions
• Quick Start - Get started in 5 minutes
• Usage Guide - How to use all features
• Troubleshooting - Common issues & solutions

• API Key Setup - Secure API key management
• Gemini Setup - Google Gemini configuration
• Security Update - Security best practices

• Project Summary - Architecture overview
• Implementation Details - Technical implementation
• Testing Guide - How to test the extension

• Latest Updates - Recent feature additions
• UI Improvements - UI/UX enhancements
• Bug Fixes - Resolved issues

📖 See docs/README.md for complete documentation index

Dark horror-themed interface with graveyard management

Immersive blocking experience with dramatic effects

AI-generated educational content with quiz combat

Celebrate your learning achievement

# Install dependencies
npm install

# Development mode (watch)
npm run dev

# Build for production
npm run build

# Type checking
npm run type-check

skinnerbox/
├── components/          # React components
│   ├── LearningQuest.tsx
│   ├── HorrorBlock.tsx
│   └── ...
├── services/           # Service layer
│   └── storageService.ts
├── docs/              # Documentation
├── dist/              # Build output
├── App.tsx            # Main app component
├── background.js      # Extension background script
└── manifest.json      # Extension manifest

• Font loading warnings (cosmetic only, doesn't affect functionality)
• Chrome 120+ required for full feature support

See TROUBLESHOOTING.md for solutions.

• Multiple AI provider support (OpenAI, Claude)
• Configurable quest difficulty
• Statistics dashboard
• Achievement system
• Multi-language support
• Content caching to reduce API calls
• Custom quiz topics per website

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

• Google Gemini - AI content generation
• Framer Motion - Smooth animations
• Lucide Icons - Beautiful icon set
• Creepster Font - Horror typography