Skip to content

Latest commit

 

History

History
108 lines (78 loc) · 3.43 KB

README.md

File metadata and controls

108 lines (78 loc) · 3.43 KB
Raw

Easy Website Blocker 🚫

Easy Website Blocker is a Chrome extension designed to help you stay focused by blocking distracting websites, while allowing specific pages through customizable exceptions. Perfect for maintaining productivity without sacrificing access to essential resources.

Easy Website Blocker Screenshot

✨ Features

  • Smart Website Blocking: Block entire domains with a single click
  • Flexible Exceptions: Allow specific pages or sections within blocked sites
  • Instant Blocking: No need to restart the browser for changes to take effect
  • Intuitive User Experience: Quick access via popup menu and a detailed options page
  • Efficient & Secure: Built on Chrome's Manifest V3 using declarativeNetRequest, with local storage for privacy

🛠️ Tech Stack

  • Frontend Framework: React + TypeScript
  • Styling: Tailwind CSS
  • UI Components: shadcn/ui, Radix UI
  • Icons: Lucide React
  • Build Tool: Vite
  • Extension Framework: Chrome Extensions API (Manifest V3)
  • Development Tools: TypeScript, ESLint, Prettier, CRXJS for Vite

🚀 Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn
  • Chrome browser

Installation

  1. Clone the repository:

    git clone https://github.com/aleksa-codes/easy-website-blocker.git
cd easy-website-blocker

  2. Install dependencies:

    npm install
# or
yarn install

  3. Build the extension:

    npm run build
# or
yarn build

  4. Load the extension in Chrome:

    • Open Chrome and navigate to chrome://extensions/
    • Enable "Developer mode" in the top right
    • Click "Load unpacked" and select the dist folder

💡 Usage

  1. Blocking a Website: Click the extension icon, enter the domain (e.g., facebook.com), and click "Block."
  2. Adding Exceptions: Go to the options page, select the blocked website, and add path exceptions (e.g., facebook.com/groups/productivity).
  3. Managing Blocked Sites: Use the popup for quick blocking/unblocking, or visit the options page for detailed management.

🛠️ Project Structure

easy-website-blocker/
├── src/
│   ├── components/          # Reusable UI components
│   ├── popup/               # Extension popup interface
│   ├── options/             # Options page
│   ├── blocked/             # Blocked page interface
│   ├── utils/               # Utility functions
│   ├── types/               # TypeScript types
│   └── background.ts        # Service worker
├── public/                  # Static assets
│   └── rules/               # Blocking rules
└── manifest.json            # Extension manifest

🤝 Contributing

Contributions are welcome! Here's how you can help:

  1. Fork the repository
  2. Create your feature branch: git checkout -b feature/AmazingFeature
  3. Commit your changes: git commit -m 'Add some AmazingFeature'
  4. Push to the branch: git push origin feature/AmazingFeature
  5. Open a Pull Request

Development Guidelines

  • Follow existing code styles and conventions
  • Add TypeScript types for new features
  • Test new features and update documentation as needed

📝 License

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

Made with ❤️ by aleksa.codes