Element Hider

WHAT IT DOES

Element Hider is a browser extension that allows you to hide any element on a webpage by clicking on it while the tool is in "select mode." When you activate select mode, moving your mouse over elements highlights them with a blue border, and clicking hides the element permanently for that site. The tool stores hidden elements using CSS selectors, so they remain hidden even after page reloads. You can view a list of all hidden elements for the current site, unhide individual elements, or clear all hidden elements at once. The tool is ideal for removing distracting ads, unwanted sidebar elements, popups, banners, and any other page elements you don't want to see.

WHERE IT RUNS

Element Hider runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, using DOM manipulation to hide elements and CSS selectors for persistence. It works on any page, whether static or dynamic, with no external dependencies. All hidden element data is stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. Click the "Select & Hide" button to enter select mode—your cursor changes to a crosshair. Move your mouse over any element on the page to see it highlighted with a blue outline. Click the highlighted element to hide it instantly. The element is removed from view and added to the hidden elements list for the current site. Press the Escape key to exit select mode without hiding anything. The panel displays a list of all hidden elements for the current site, showing their CSS selectors. To unhide an element, click the ↩ button next to it in the list. Click "Clear All" to unhide all elements for the current site. Click "Reset" to reapply hidden styles if they were accidentally removed. All hidden elements persist across page reloads.

REAL MECHANISM — WHY THIS WORKS

Most element hiding tools require you to inspect the page, find the element's class or ID, and manually write CSS rules. Element Hider uses a visual, point-and-click approach that generates CSS selectors automatically. When the user clicks an element in select mode, the tool generates a unique CSS selector for that element by building a path from the element up to the document body. The selector uses the element's ID if available, or a combination of tag name and nth-of-type to ensure uniqueness. The tool then adds this selector to a persistent array stored in GM_setValue, keyed by the current site's hostname. To apply the hiding, the tool creates a style element in the document head with display: none !important rules for each selector in the array. When the page reloads, the tool retrieves the stored selectors from storage and re-creates the style element, ensuring the hidden elements remain hidden. The highlight functionality uses a fixed overlay div that follows the mouse cursor, showing the element that would be hidden. This approach ensures accurate, persistent, and fully private element hiding without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view hidden elements. Press the Escape key to close the panel instantly (or to exit select mode). The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position and all hidden element data—are saved per domain for a seamless experience.

PLEASE NOTE

Element Hider requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool generates CSS selectors based on the page structure at the time of hiding. If the page structure changes significantly (e.g., a website redesign), the selectors may no longer match the intended elements. In such cases, you can unhide all elements and re-hide them as needed. All hidden element data is stored locally in your browser using GM_setValue. No page content, element data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only reads the DOM to identify elements and applies hiding locally at your request.