Dynamic Ad Remover

A lightweight Chrome extension that allows you to dynamically remove unwanted elements from web pages using customizable CSS selectors or XPath.

Features

• Custom CSS Selectors and XPath: Remove elements using CSS selectors or XPath expressions
• Interactive XPath Picker: Pick an element from the active page and add its unique XPath
• Inspector-Style Hover Border: The XPath picker highlights the hovered element with a blue border, light overlay, and nearby tooltip before you click
• Domain Exclusion: Exclude specific domains or URLs from ad removal
• Real-time Monitoring: Automatically removes dynamically loaded ads using MutationObserver
• Side Panel Configuration: Easy-to-use side panel for managing settings
• Persistent Settings: Your configurations are saved and synced across devices

Installation

From Chrome Web Store

(Coming soon)

Manual Installation

1. Download or clone this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked" and select the extension directory
5. The Dynamic Ad Remover extension should now appear in your extensions list

Usage

Configuring the Extension

1. Click the extension icon in your browser toolbar to open settings
2. In the "Selectors or XPath" textarea, add CSS selectors or XPath expressions (one per line) for elements you want to remove
3. To pick an XPath visually, click "Pick XPath", hover an element on the page, then click the blue-highlighted target
4. Picked XPath values are appended on a new line and saved automatically
5. Press Esc while picking to cancel without adding a selector
6. Examples of common selectors:

   div#ad
   .advert
   ins.adsbygoogle
   [data-testid*="ad"]
   .sponsored-content
   iframe[src*="googleads"]
   //*[@id='ad-banner']
   /html[1]/body[1]/main[1]/div[2]

Excluding Domains

1. In the "Exclude Domains/Hosts" textarea, add domains or URLs you want to exclude from ad removal
2. Examples:

   dev.azure.com
   github.com
   stackoverflow.com/questions/specific-page
   

Activating Ad Removal

1. Configure your selectors and exclusions (see above)
2. Click "Save" to store your settings
3. The extension automatically applies the saved configuration on matching webpages
4. The extension will remove elements matching your selectors or XPath expressions and monitor for new ones

Save Settings

1. Click the "Save" button to apply your changes
2. The extension will automatically start working on applicable websites

How It Works

The extension uses three main components:

1. Content Script (content.js): Runs on every webpage and removes elements matching your selectors
2. Side Panel Interface (sidebar.html + sidebar.js): Provides the main configuration interface and XPath picker controls
3. Popup Interface (popup.html + popup.js): Provides a compact legacy configuration interface
4. Manifest (manifest.json): Defines extension permissions and structure

Technical Details

• Uses Manifest V3 for modern Chrome extension compatibility
• Employs MutationObserver to catch dynamically loaded content
• Batches mutation cleanup through requestAnimationFrame
• Stores settings using Chrome's sync storage API
• Supports complex CSS selectors, XPath expressions, and domain-based exclusions

Configuration Examples

Common Ad Selectors

/* Google Ads */
ins.adsbygoogle
div[data-google-query-id]

/* Generic ad containers */
.ad-container
.advertisement
.sponsored
[class*="ad-"]
[id*="ad-"]

/* Social media promoted content */
[data-testid="placementTracking"]
[aria-label*="Sponsored"]

Domain Exclusions

# Exclude entire domains
example.com
dev.azure.com

# Exclude specific paths
github.com/settings
stackoverflow.com/questions

Permissions

The extension requires the following permissions:

• storage: To save your selector and exclusion settings
• scripting: To inject content scripts that remove unwanted elements
• activeTab: To access the current tab when you click the extension icon
• sidePanel: To show the main configuration UI in Chrome's side panel
• tabs: To identify the active tab domain and send picker commands to the page

Privacy

• Settings are stored with Chrome's chrome.storage.sync; Chrome may sync them through your Google account if Chrome Sync is enabled
• The extension does not send data to developer-operated servers, analytics, or third-party APIs
• The extension only processes the CSS selectors, XPath expressions, and domains you configure

Contributing

1. Fork this 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

License

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

Changelog

Version 1.2.2

• XPath picker now appends the selected XPath on a new line and saves the current site configuration automatically

Version 1.2.1

• Updated the XPath picker hover highlight to use an inspector-style blue border, light overlay, and cursor-following tooltip
• Updated README and Chrome Web Store metadata for the current XPath picker behavior

Version 1.2.0

• Added interactive XPath picker in the side panel
• Added XPath selector support alongside CSS selectors
• Improved live configuration updates on open tabs
• Hardened storage error handling and import validation
• Improved Manifest V3 badge state handling

Version 1.0

• Initial release
• Basic CSS selector-based element removal
• Domain exclusion functionality
• Popup configuration interface
• Real-time content monitoring

Support

If you encounter any issues or have suggestions for improvements, please open an issue on GitHub.

Disclaimer

This extension is designed for educational purposes and personal use. Please respect website terms of service and consider supporting content creators through legitimate means.