Ad Blocker is a powerful Chrome extension designed to block intrusive advertisements and analytics trackers while browsing the web. With a beautiful, modern UI that adapts to your system theme preferences, it offers an elegant solution to improve your browsing experience by removing unwanted content.
Table Of Content
Features
- Comprehensive Ad Blocking: Eliminates banner ads, pop-ups, video ads, and other intrusive advertisements
- Analytics Blocking: Separate toggle to block analytics and tracking scripts
- Detailed Statistics: Track how many ads and analytics scripts have been blocked in real-time
- Whitelist Support: Easily add trusted websites to your whitelist with one click
- Multiple Filter Lists: Uses industry-standard filter lists including EasyList, AdGuard, EasyPrivacy and more
- Smart Theme Detection: Automatically adapts between light and dark mode based on your system preferences
- Modern UI Design: Features a clean interface with gradients, shadows, and rounded corners
- Multilingual Support: Available in English and Turkish, with easy extensibility for more languages
How It Works
Ad Blocker uses Chrome’s Manifest V3 API with declarativeNetRequest to efficiently block unwanted content before it loads. The extension also implements DOM-based filtering through content scripts to remove elements that slip through network-level blocking.
The architecture consists of:
- Background Service Worker: Manages blocking rules, maintains statistics, and handles communication between components
- Content Scripts: Identify and remove DOM elements related to advertisements and trackers
- Popup Interface: Provides statistics and easy controls for enabling/disabling features
- Options Page: Allows detailed configuration of filter lists and whitelist management
Development Journey
Ad Blocker was developed with a focus on performance and user experience. The development process included:
- Initial Framework: Created using Chrome’s latest Manifest V3 API for future-proofing
- Filter Implementation: Integrated multiple filter lists for comprehensive blocking
- UI Design: Crafted a responsive, modern interface with automatic theme switching
- Performance Optimization: Minimized resource usage while maximizing blocking efficiency
- Multilingual Support: Added localization framework for multiple languages
What Makes This Ad Blocker Different
Unlike many other ad blockers, this extension:
- Separates Ad and Analytics Blocking: Control whether you want to block advertisements, analytics trackers, or both
- Features Real-time UI Updates: Changes to whitelist and settings apply instantly without page refresh
- Has a Lightweight Footprint: Minimal performance impact on browsing experience
- Provides a Beautiful User Interface: Modern design principles with automatic theme adaptation
How To Use
- Block Ads: Toggle the “Enable Ad Blocking” switch in the popup
- Block Analytics: Toggle the “Block Analytics” switch to prevent tracking
- Whitelist Sites: Click “Add Current Site to Whitelist” for trusted websites
- View Statistics: Check how many ads and analytics trackers have been blocked
- Advanced Configuration: Access the Options page for detailed settings
Support and Development
For support, bug reports, or feature requests, please visit our GitHub repository. The extension is continuously improved based on user feedback and advancements in ad-blocking technology.
Technical Details
- Built with JavaScript, HTML, and CSS
- Uses Chrome’s declarativeNetRequest API for efficient network filtering
- Implements content scripts for DOM manipulation
- Supports Chrome Manifest V3 for future compatibility
- Utilizes local storage for saving user preferences and statistics
Project URL
https://github.com/rideo1622/adblocker
