Chrome Extension Element Hider — Developer Guide

4 min read

Build an Element Hider Extension

In this tutorial, we’ll build a Chrome extension that lets users click to hide any page element, with persistent storage per site.

Step 1: Manifest Configuration

Create manifest.json with activeTab and storage permissions:

{
  "manifest_version": 3,
  "name": "Element Hider",
  "version": "1.0",
  "permissions": ["activeTab", "storage"],
  "action": { "default_popup": "popup.html" },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

Step 2: Toggle Hide Mode

Add a browser action popup (popup.html + popup.js) with a toggle button to enable/disable hide mode. When enabled, the extension icon changes state.

Step 3: Hover Highlight (Content Script)

In content.js, add mouseover/mouseout listeners to highlight elements:

document.addEventListener('mouseover', (e) => {
  if (!hideModeEnabled) return;
  e.target.style.outline = '2px solid red';
});

document.addEventListener('mouseout', (e) => {
  e.target.style.outline = '';
});

Step 4: Click to Hide

On click, set element.style.display = 'none' and capture the element’s CSS selector:

document.addEventListener('click', (e) => {
  if (!hideModeEnabled) return;
  e.preventDefault();
  hideElement(e.target);
});

Step 5: Generate Unique CSS Selector

Create a function to generate a robust CSS selector:

function generateSelector(element) {
  if (element.id) return `#${element.id}`;
  let path = [];
  while (element.nodeType === Node.ELEMENT_NODE) {
    let selector = element.tagName.toLowerCase();
    if (element.className) {
      selector += '.' + element.className.trim().split(/\s+/).join('.');
    }
    path.unshift(selector);
    element = element.parentNode;
  }
  return path.join(' > ');
}

Step 6: Save to Storage

Store hidden selectors per domain:

async function saveHiddenElement(selector) {
  const domain = window.location.hostname;
  const key = `hidden_${domain}`;
  const stored = await chrome.storage.local.get(key);
  const hidden = stored[key] || [];
  hidden.push({ selector, timestamp: Date.now() });
  await chrome.storage.local.set({ [key]: hidden });
}

Step 7: Auto-Apply on Page Revisit

On page load, retrieve saved selectors and inject CSS to hide them:

async function applyHiddenElements() {
  const domain = window.location.hostname;
  const stored = await chrome.storage.local.get(`hidden_${domain}`);
  const hidden = stored[`hidden_${domain}`] || [];
  
  const style = document.createElement('style');
  style.textContent = hidden.map(h => `${h.selector} { display: none !important; }`).join('\n');
  document.head.appendChild(style);
}

Step 8: Management UI

In the popup, list hidden elements per site with restore buttons. Add:

Handling Dynamic Content

Use MutationObserver to reapply hiding rules when DOM changes:

const observer = new MutationObserver(() => {
  applyHiddenElements();
});
observer.observe(document.body, { childList: true, subtree: true });

Cross-References

Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.

No previous article
No next article