DOM Blocker

## 🎯 Plugin Overview **DOM Blocker** is a powerful browser extension tool designed to intercept and hide unwanted DOM elements on web pages. It allows you to easily customize webpage display content, remove distracting elements, and enhance your browsing experience. ## ✨ Core Features ### 🎯 Smart Element Picking - **Visual Selection**: Highlight page elements by hovering with your mouse - **One-Click Picking**: Click to select elements you want to hide - **Intelligent Recognition**: Automatically generates multiple selector formats (CSS, XPath, etc.) - **Real-time Preview**: Elements are highlighted in real-time during the picking process ### 👁️ Flexible Element Management - **Instant Hiding**: Picked elements are immediately hidden without affecting page layout - **State Toggle**: Show or hide picked elements at any time - **Batch Management**: Support managing multiple elements, grouped by page - **Persistent Storage**: Settings are saved and remain effective after page refresh ### 🔔 Smart Notification System - **Operation Feedback**: Receive system notifications when picking is complete - **Status Indicators**: Extension icon displays operation status - **Convenient Access**: Click notifications to quickly view results ## 🚀 Why Choose This Plugin? ### 1. **Enhanced Browsing Experience** - **Remove Ad Distractions**: Hide annoying ad banners and popups - **Clean Page Layout**: Remove unnecessary sidebars and recommended content - **Focus on Reading**: Hide social media buttons, share components, and other distracting elements ### 2. **Personalized Customization** - **Hide on Demand**: Only hide elements you don't need, keeping useful content - **Page Optimization**: Make webpages more suitable for your browsing habits - **Visual Clarity**: Reduce visual noise and improve page cleanliness ### 3. **Simple and Easy to Use** - **Zero Learning Curve**: Intuitive click-to-select approach - **Instant Effect**: Elements are hidden immediately after selection, no restart required - **Reversible Operations**: Can restore display at any time ### 4. **Technical Advantages** - **Smart Selectors**: Automatically generates the most stable element selectors - **Strong Compatibility**: Supports all modern websites - **Performance Optimized**: Lightweight implementation that doesn't affect page performance - **Data Security**: All data stored locally, protecting privacy ## 📖 User Guide ### Step 1: Install the Plugin 1. Download the plugin files 2. Open `chrome://extensions/` in Chrome browser 3. Enable "Developer mode" 4. Click "Load unpacked extension" 5. Select the plugin folder ### Step 2: Start Using 1. **Open Target Webpage**: Visit the website you want to customize 2. **Click Extension Icon**: Click the DOM Blocker icon in the browser toolbar 3. **Start Picking**: Click the "🎯 Start Picking Elements" button 4. **Select Elements**: Hover over elements you want to hide and click to select 5. **Manage Elements**: View and manage picked elements in the extension popup ### Step 3: Manage Elements - **Show/Hide**: Click "Show" or "Hide" buttons next to elements - **Delete Elements**: Click "Delete" button to remove unwanted rules - **View Details**: Each element displays tag name, ID, class name, and other information ## 🎨 Use Cases ### 📰 News Website Optimization - Hide ad banners and recommended content - Remove social media share buttons - Clean up irrelevant sidebar information ### 🛒 E-commerce Website Cleanup - Hide promotional popups and recommended products - Remove unnecessary navigation elements - Optimize product detail page layout ### 📚 Learning Website Customization - Hide ads and irrelevant links - Remove distracting social features - Focus on learning content ### 💼 Work Website Optimization - Hide entertainment content - Remove unnecessary function buttons - Improve work efficiency ## 🔧 Technical Features ### Smart Selector Generation - **CSS Selectors**: Generate the most stable CSS selectors - **XPath Support**: Provide XPath format selectors - **Attribute Selectors**: Support ID, class name, and other attribute selections - **Path Selectors**: Generate complete element paths ### Persistent Storage - **Local Storage**: All settings saved locally in the browser - **Page Association**: Manage elements grouped by page URL - **State Recovery**: Automatically restore hidden state after page refresh ### Performance Optimization - **Lightweight Implementation**: Minimize impact on page performance - **Asynchronous Processing**: Support dynamically loaded elements - **Retry Mechanism**: Intelligently handle element loading delays ## 🌟 Key Highlights ### 🎯 Precise Targeting - Support complex page structures - Handle dynamically loaded content - Compatible with various website frameworks ### 🔄 Flexible Control - Toggle display state at any time - Support batch operations - Reversible hiding operations ### 📱 User-Friendly - Intuitive interface design - Detailed operation instructions - Multi-language support (Chinese/English) ### 🛡️ Secure and Reliable - Local data processing - No network transmission - Protect user privacy ## 📋 System Requirements - **Browser**: Chrome 88+ or Chromium-based browsers - **Permissions**: Requires access to webpage content and storage permissions - **System**: Windows, macOS, Linux ## 🔮 Future Plans - [ ] Support more browsers (Firefox, Safari, etc.) - [ ] Add element selector import/export functionality - [ ] Support regular expression matching - [ ] Add batch operation features - [ ] Support user-customizable themes ## 📞 Support and Feedback If you encounter any issues during use or have improvement suggestions, please contact us through the following methods: - **Email**: zoolee1021@163.com - **Issue Feedback**: Please describe the problems encountered and usage scenarios in detail