Media
2 items
Description
Inspect and visualize HTML element IDs (#id) with smart badges, SVG arrows, table grouping, framework filters, and JSON export. ID Overlay Inspector is the ultimate productivity and inspection extension built for Frontend Developers, QA Engineers, and Test Automation Specialists (Cypress, Playwright, Selenium, Puppeteer). Instantly visualize, inspect, filter, and export every HTML element ID (#id) on any webpage without having to constantly right-click and "Inspect Element" in DevTools. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🌟 KEY FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎯 Smart, Collision-Free Floating Badges • Multi-ring radial positioning engine automatically seeks clear whitespace around elements. • Prevents badges from overlapping each other and crossing existing connector lines. • In tight spaces, a distinct 6-color collision palette (amber, pink, orange, lime, cyan, fuchsia) color-codes overlapping badges and connector arrows for effortless identification. • Drag-and-drop any badge anywhere on screen, with an optional "Return to origin on drop" snap-back toggle. ↗️ Directional Curved SVG Arrows • Elegant cubic Bezier curves link each badge directly to the center or boundary of its target DOM element. • Direction-aware arrowheads with matching category colors provide instant visual clarity. 🛡️ Auto-Generated Framework ID Filter (Enabled by Default) • Eliminate clutter from auto-generated, non-semantic IDs injected by modern frontend frameworks. • Intelligently filters out React 18+ useId (#_r_5f_, #:r0:, #:r12:), Radix UI (#radix-*), Headless UI (#headlessui-*), Material UI (#mui-*), and Next.js hydration IDs. • Keeps your focus strictly on human-written, developer-defined locator IDs. Easily toggle on or off in settings. 📊 Intelligent Table Group Mode • Dense tables and data grids are automatically organized into a single, clean floating ⊞ TABLE badge. • Hovering any table row displays an edge-aligned, non-obscuring ID chip bar right above the row without hiding any cells or buttons. • Full-row color separation highlights the active row with an inset color wash and border. • Includes a searchable, draggable drawer modal listing every row and ID across the entire table. 💬 Interactive Inspection Tooltips with Click-to-Copy • Hovering over any badge or row ID tab reveals detailed element metadata: <tag>, #id, CSS classes, inner text preview, and anchor href links. • Smart edge-aware placement: tooltips dock on the top edge (or bottom if near the viewport ceiling), never covering adjacent ID tabs. • Click any row or value inside the tooltip to instantly copy it to your clipboard. 💾 One-Click JSON Data Export • Export all detected element IDs with complete metadata (id, selector, tag, category, classes, text, bounding rect) as a structured JSON file. • Ideal for feeding reliable element locators directly into automated test scripts and Page Object Models. ⚙️ Customization Studio & Sticky Action Bar • Customize badge appearance: font size, opacity, minimum connector length, and outline style (dashed, solid, dotted, double). • Custom color pickers for Form Inputs, Action Buttons/Links, Layout Sections, Containers, and Text. • Configurable tooltip fields. • Sticky "Apply & Run" button immediately updates active page overlays and saves preferences to Chrome Sync Storage. ⌨️ Keyboard Shortcut • Press Alt + I anywhere on the page to toggle the overlay on and off in a fraction of a second. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 👥 WHO IS THIS FOR? ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • QA Engineers & Automation Testers: Finding unique locators for Cypress, Playwright, Selenium, and Robot Framework. • Frontend Developers: Debugging DOM component trees, React hydration IDs, and accessibility attributes. • Accessibility (a11y) Auditors: Inspecting aria-labelledby and label-for ID connections. • Web Scrapers & Analysts: Locating CSS anchors and unique element hooks quickly. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACY & PERMISSIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • 100% Client-Side: Runs entirely in your local browser. • Zero Tracking: No data, telemetry, analytics, or page contents are ever transmitted or collected. • Open & Lightweight: Built using clean, modern Chrome Manifest V3 standards.