Hide Element

A Chrome/Edge extension (Manifest V3) that hides distracting elements on any website — the way Safari's Hide Distracting Items works.

Install (unpacked)

1. Open chrome://extensions (or edge://extensions).
2. Turn on Developer mode (top-right).
3. Click Load unpacked and choose this folder: G:\hide_element_extension.
4. Pin the extension from the puzzle-piece menu.

Use

• Click the toolbar icon → Hide element…, or
• Right-click any page element → Hide this element…, or
• Press Alt+Shift+H to toggle the picker.

Then hover to highlight, click to hide. Use ↑ to expand to the parent, ↓ to drill into a child, Enter to confirm, Esc to cancel.

Manage per-site rules from the popup: turn hiding off temporarily, unhide individual elements, or reset the whole site.

Files

• manifest.json — MV3 manifest, permissions, content scripts, shortcut.
• hider.js — runs at document_start in every frame, injects display: none !important for saved selectors.
• picker.js — inspector UI (Shadow-DOM toolbar + highlight box), builds stable CSS selectors.
• background.js — service worker: context menu, keyboard command, popup ↔ tab bridge.
• popup.html / popup.js — per-site management panel.
• icons/ — 16/48/128 PNG icons.

Storage

Rules live in chrome.storage.local:

{
  hiddenBySite:  { "example.com": ["#ad-banner", "body > div.promo:nth-of-type(2)"] },
  enabledBySite: { "example.com": false }  // omitted = enabled
}

Notes / limitations

• Cannot inject into chrome:// pages, the Chrome Web Store, or PDF viewer.
• Closed Shadow DOM cannot be pierced; open shadow roots are highlighted only at their host boundary.
• Sites that render into cross-origin iframes need the iframe content itself to be hidden (all_frames: true is already set for hider.js).
• Selectors avoid classes that look like build-time hashes (css-1a2b3c, jsx-…) so rules survive redeploys, but SPAs that fully rebuild their DOM tree may still shift.