X Cleaner Extension

A professional Chrome extension to automatically delete tweets and undo reposts on X (formerly Twitter)

Features • Installation • Usage • Architecture • Contributing

---

✨ Features

• 🚀 Automated Cleaning: Automatically detects and removes tweets and reposts on X
• 🎯 Smart Detection: Intelligently distinguishes between regular tweets and reposts
• ⚙️ Fully Configurable: Customizable delays, limits, and behavior settings
• 📊 Real-time Statistics: Track processed, deleted, and repost actions in real-time
• 🎨 Modern UI: Beautiful, intuitive interface with gradient design
• 🛡️ Safe & Reliable: Built with robust error handling and validation
• ⏸️ Pause/Resume: Full control over the cleaning process
• 🎭 Visual Feedback: Status indicators and progress tracking

🏗️ Architecture

This extension follows a professional, modular architecture with clear separation of concerns:

Technology Stack

• TypeScript: Full type safety and modern JavaScript features
• Webpack: Modern build system with code splitting
• Chrome Extension Manifest V3: Latest extension API
• Modular Design: Clean, maintainable code structure

Project Structure

src/
├── background/          # Background service worker
│   ├── service-worker.ts      # Main background script
│   ├── state-manager.ts       # Centralized state management
│   └── message-handler.ts     # Message routing
├── content/             # Content scripts
│   ├── content.ts             # Content script entry point
│   ├── cleaner/
│   │   ├── cleaner-engine.ts  # Core cleaning logic
│   │   └── action-executor.ts # Action execution
│   └── services/
│       ├── selector-service.ts # DOM element selection
│       └── dom-utils.ts        # DOM utilities
├── popup/               # Popup UI
│   ├── popup.html             # Popup markup
│   ├── popup.ts               # Popup logic
│   └── styles/
│       └── popup.css          # Modern styling
├── options/             # Options page
│   ├── options.html
│   ├── options.ts
│   └── styles/
└── shared/              # Shared utilities
    ├── config/                # Configuration management
    ├── storage/               # Storage abstraction
    ├── types/                 # TypeScript definitions
    ├── utils/                 # Utility functions
    └── selectors/             # DOM selectors

Key Design Principles

• Layered Architecture: Clear separation between UI, business logic, and services
• Message-Based Communication: Inter-component communication via Chrome messages
• Centralized State: Single source of truth in the background service worker
• Type Safety: Full TypeScript coverage for reliability
• Error Handling: Comprehensive error handling at all levels

📦 Installation

Prerequisites

• Node.js 16+ and npm
• Chrome or Chromium-based browser

Development Setup

1. Clone the repository

   git clone https://github.com/asamassekou10/-X-Cleaner-Extension.git
   cd -X-Cleaner-Extension

2. Install dependencies

   npm install

3. Build the extension

   npm run build

4. Load extension in Chrome

   • Open Chrome and navigate to chrome://extensions/
   • Enable "Developer mode" (toggle in top-right)
   • Click "Load unpacked"
   • Select the public directory from the project root

Production Build

npm run build

The built extension will be in the public directory, ready for distribution.

🚀 Usage

1. Navigate to X: Open twitter.com or x.com in your browser

2. Go to your Posts or Replies tab: Navigate to either your Posts or Replies tab where you want to clean content

3. Open the extension: Click the X Cleaner extension icon in your browser toolbar

4. Start cleaning: Click the "Start Cleaning" button

5. Monitor progress: Watch real-time statistics update as the extension processes tweets

6. Control the process:

   • Use Pause to temporarily stop cleaning
   • Use Resume to continue from where you left off
   • Use Stop to completely halt the cleaning process

Statistics

The extension tracks:

• Processed: Total number of tweets processed
• Deleted: Number of tweets deleted
• Reposts: Number of reposts undone
• Errors: Number of errors encountered

⚙️ Configuration

Access settings via:

• The "Settings" link in the popup footer
• Right-clicking the extension icon → "Options"

Available Settings

• Delays: Control timing for scroll, click, confirmation, and between actions
• Limits: Set maximum tweets per session and error thresholds
• Behavior: Toggle auto-scroll, DOM removal, and visual feedback

🛠️ Development

Scripts

npm run build    # Build for production
npm run dev      # Build in development mode with watch
npm run lint     # Lint TypeScript code
npm run format   # Format code with Prettier
npm run clean    # Clean build directories

Code Style

• TypeScript strict mode enabled
• ESLint for code quality
• Prettier for consistent formatting
• Follow existing code patterns and architecture

Building

The extension uses Webpack to bundle TypeScript files:

1. Source files are in src/
2. Built files go to public/
3. Manifest.json is copied to public/
4. HTML and CSS files are copied to their respective directories
5. Icons and assets are preserved

🌐 Browser Support

• ✅ Chrome (Manifest V3)
• ✅ Edge (Chromium-based)
• ✅ Brave
• ✅ Opera
• ✅ Other Chromium-based browsers

📝 License

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

🤝 Contributing

Contributions are welcome! Please follow these steps:

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

Guidelines

• Follow the existing code style and architecture patterns
• Write clear commit messages
• Update documentation as needed
• Test your changes thoroughly

⚠️ Disclaimer

Use this extension responsibly. Always review what will be deleted before starting the cleaning process. The extension operates on your own account only and requires your active presence on the X/Twitter website.

Note: This extension interacts with the X (Twitter) website's DOM. Any changes to X's website structure may require updates to the extension. Use at your own discretion.

🙏 Acknowledgments

• Built with modern web technologies
• Designed for ease of use and reliability
• Open source and community-driven

---

Made with ❤️ for the X/Twitter community

Report Bug • Request Feature • View on GitHub