Universal Page Element Count Badge

WHAT IT DOES

This script scans the current page DOM and counts every element by type—div, span, p, a, img, button, input, form, table, section, article, and more. It displays a floating badge panel showing total element count, a frequency distribution with percentage breakdown for each tag, and key metrics including semantic element count, div ratio, images without alt text, elements without accessible labels, empty links, and deprecated tags. The panel highlights unusual element ratios and potential accessibility issues (e.g., high div usage instead of semantic elements). Users can copy element counts as JSON or text, export data as CSV, and view historical snapshots per domain to track page complexity over time.

WHERE IT RUNS

Works on any webpage—personal sites, blogs, e-commerce, dashboards, or complex web applications. The script scans the entire DOM using document.querySelectorAll('*'), making it compatible with any site regardless of framework or technology.

HOW TO USE

The panel appears automatically when you visit any page. It counts all elements and displays a summary with total elements, semantic element count, and div ratio. The "Insights" section highlights potential issues like high div usage, missing alt text on images, missing ARIA labels, empty links, and deprecated tags. The "Element Breakdown" section shows a bar chart of the top 25 tags with counts and percentages. Click "Refresh Page" to re-count elements after dynamic content loads. Copy the report as JSON (for developers) or plain text (for documentation). Export all data as CSV for offline analysis. The "Clear History" button removes stored snapshots for the current domain. The panel automatically saves a snapshot each time you visit, building a history of page complexity over time.

TECHNICAL MECHANISM: DOM TRAVERSAL WITH SEMANTIC ANALYSIS AND ACCESSIBILITY DETECTION

The script uses document.querySelectorAll('*') to retrieve every element on the page, then iterates through each element to count by tag name using a frequency map. It calculates total element count and percentage distribution for each tag. For accessibility analysis, it checks each img element for the presence of an alt attribute (or if it's empty), flags elements without aria-label or aria-labelledby for interactive and semantic elements (button, a, input, textarea, select, nav, main, header, footer, section, article), detects empty links (anchor tags with no text content and no child images), and identifies deprecated HTML tags (font, center, marquee, blink, frame, frameset). Semantic element count includes section, article, header, footer, nav, and main elements. The div ratio is calculated as the percentage of div elements relative to total elements. Insights are generated based on thresholds: high div ratio (>80%), missing alt images, missing ARIA labels (>20% of accessible elements), empty links, deprecated tags, and very high element count (>2000). Each snapshot stores all counts and metrics with a timestamp, capped at 30 entries per domain.

THE PANEL

The element count badge appears in a draggable, resizable panel that remembers its position per site. The panel shows a summary card with total elements, semantic elements, and div ratio, followed by an insights section and a tag breakdown with bar charts. Drag by the header to reposition, collapse to a compact icon with a click, and resize using the bottom-right corner. The panel snaps to screen edges for tidy placement and closes with the Escape key. All settings—panel position—persist per website using GM_setValue, so your view returns exactly as you left it.

PLEASE NOTE

This script requires the free BotGentz extension to run. The script counts all visible and hidden elements in the DOM, including those created by JavaScript frameworks. The accessibility and semantic analysis is heuristic and based on common best practices—it may flag issues that are intentionally designed or contextually appropriate. The insights are generated as suggestions, not definitive judgments. Historical snapshots track total element counts and semantic counts per domain, helping you monitor how page complexity changes over time. All data is stored locally in your browser via GM_setValue and never transmitted.