Exact Element Hider

A minimal Chrome extension that permanently hides a specific DOM element on any website — identified by a css selector you provide.

Why this exists

Some websites detect ad-blockers and overlay a blocking <div> (or similar element) over the page, prompting you to disable your ad-blocker. This extension lets you target that exact element by its css selector and remove it from view as soon as the DOM is ready — without touching anything else on the page.

Originally built for investing.com, using the selector #__next > div:last-of-type.

How it works

• Each rule is stored per domain using chrome.storage.local.
• Storage keys follow the prefix specrule:.
• On every page load, the extension looks for the first element matching the saved selector and sets display: none !important on it.
• A MutationObserver watches the DOM for up to 15 seconds after load, so late-injected overlays (popups added after the initial render) are caught as well.
• Once the element is found and hidden, the observer stops immediately.

Install

1. Open chrome://extensions
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked
4. Select this folder

Usage

1. Navigate to the site where you want to hide an element.
2. Click the extension icon in the toolbar.
3. Enter the css selector for the element you want to hide.
4. Click Save (or press Enter).

The rule takes effect immediately on the active tab and on every subsequent visit to that domain.

To remove a rule, open the popup on that domain, clear the selector field, and save an empty value — or manage entries directly via chrome.storage.local in DevTools.

Selector reference

The input accepts any valid querySelector expression:

Selector	What it targets
#foo .bar	.bar inside the element with id foo
#foo > div:last-of-type	Last direct child div under the element with id foo
.modal-backdrop	First element with class modal-backdrop
[data-testid="newsletter-popup"]	Element with a specific data-testid value
body > div[role="dialog"]	Dialog div directly under body

Note: div:last-child and div:last-of-type are not equivalent.
Use > div:last-of-type when you want the last direct child div of a container.

Limitations

• Allows the content script to run on any http/https page.
• Hides only the first element matching the selector.
• One rule per domain (the popup overwrites the previous selector on save).

Before I forget

• No data leaves your browser. No external requests are made. (Clean & simple)
• As this is a developer-focused tool, I chose not to publish it to the Chrome Web Store.