Element Hider Pro: Web Privacy & Content Control
Cross-Browser Extension for Visual DOM Control & Content Customization
System Architecture Overview
Element Hider Pro is a cross-browser extension that gives users complete visual sovereignty over any webpage. With point-and-click selection, users can remove distracting ads, apply Gaussian blur to sensitive details during screen shares, randomize text, and configure persistent domain rules.
Problem Statement
Modern websites are cluttered with banners, intrusive widgets, sticky overlays, and distracting sections. Furthermore, software engineers, content creators, and remote workers frequently share their screens, risking accidental exposure of confidential API keys, customer emails, or private data.
Architectural Blueprint
Dynamic CSS & Style Injection Pipeline
Rules are compiled into targeted CSS selector trees and injected into the DOM before paint, eliminating visual layout shifts (CLS) when refreshing pages.
MutationObserver Re-hydration
Single-Page Applications (SPAs) frequently redraw DOM trees. Element Hider Pro monitors DOM mutations in the background and reapplies user rules seamlessly without performance degradation.
Zero-Server Privacy Guarantee
All hide, blur, and text randomization rules reside strictly within the browser's local sandbox. No analytics or browsing histories ever leave the client machine.
Engineered Feature Toolkit
Point-and-Click Visual Element Picker
Hover over any element with visual highlighting and click to hide, collapse, or blur.
Adjustable 0 to 20px Gaussian Blur
Obscure sensitive text, financial data, or images while keeping page layout natural.
Client-Side Text Randomization
Scramble or replace visible text on the fly: ideal for recording demos or taking clean screenshots.
Per-Site Rules Dashboard
A centralized dashboard to search, sort, toggle, edit, and export/import rules as standard JSON files.
Global Keyboard Shortcuts
Trigger quick actions via Alt+H (Hide), Alt+B (Blur), and Alt+R (Randomize) with full Ctrl+Z undo support.
Engineering Challenges & Solutions
Supporting Manifest V3 service worker lifecycle constraints while maintaining instantaneous UI responsiveness.
Separated transient popup states from persistent background configurations, using event-driven messaging to broadcast rule updates to active content scripts.
Ensuring rules apply accurately across dynamic web apps that re-render DOM nodes continuously.
Engineered a debounced MutationObserver engine that caches compiled selector queries, avoiding repeated querySelector passes on every micro-mutation.
Technology Stack Breakdown
Extension Core
DOM & Styling Engine
Storage & State
Measurable Production Impact
- Cross-browser distribution supporting Chrome, Firefox, and Microsoft Edge.
- Used by developers, content creators, and presenters to safeguard confidential screen data.
- Lightweight footprint with zero network calls and sub-millisecond selector application.