Element Inspector

Description

Hover over a page and see each container easily

Match Pattern

<all_urls>

Script Code

(function() {
  const overlayId = "__injectjs_element_inspector__";
  const highlightId = "__injectjs_element_highlight__";

  if (document.getElementById(overlayId)) return;

  // Tooltip overlay
  const overlay = document.createElement("div");
  overlay.id = overlayId;
  Object.assign(overlay.style, {
    position: "fixed",
    pointerEvents: "none",
    background: "rgba(0,0,0,0.8)",
    color: "#fff",
    padding: "2px 6px",
    borderRadius: "4px",
    fontSize: "12px",
    fontFamily: "monospace",
    zIndex: "999999",
    display: "none",
  });
  document.body.appendChild(overlay);

  // Highlight box
  const highlight = document.createElement("div");
  highlight.id = highlightId;
  Object.assign(highlight.style, {
    position: "fixed",
    background: "rgba(0, 150, 255, 0.25)", // translucent blue
    border: "1px solid rgba(0,150,255,0.7)",
    zIndex: "999998",
    pointerEvents: "none",
    display: "none",
  });
  document.body.appendChild(highlight);

  document.addEventListener("mousemove", (e) => {
    const el = document.elementFromPoint(e.clientX, e.clientY);
    if (!el || el === overlay || el === highlight) return;

    const rect = el.getBoundingClientRect();
    const tag = el.tagName.toLowerCase();

    let classStr = "";
    if (el.classList && el.classList.length) {
      classStr = "." + Array.from(el.classList).join(".");
    }

    const size = `${Math.round(rect.width)}x${Math.round(rect.height)}`;

    // Update tooltip
    overlay.textContent = `${tag}${classStr} [${size}]`;
    overlay.style.left = e.pageX + 10 + "px";
    overlay.style.top = e.pageY + 10 + "px";
    overlay.style.display = "block";

    // Update highlight box
    Object.assign(highlight.style, {
      left: rect.left + "px",
      top: rect.top + "px",
      width: rect.width + "px",
      height: rect.height + "px",
      display: "block",
    });
  });

  document.addEventListener("mouseleave", () => {
    overlay.style.display = "none";
    highlight.style.display = "none";
  });
})();