Class Name Lister

WHAT IT DOES

Class Name Lister is a browser extension that scans any webpage for all CSS class names used on elements and lists them with their frequency. It shows a count of unique classes, the total number of class references, and highlights the most frequently used classes. You can click on any class name to see which elements use that class, with the option to scroll to each element. The tool also lets you copy the full class list as plain text or JSON for analysis. It is ideal for web developers, QA engineers, front-end developers, and anyone who wants to understand the CSS class usage patterns on a webpage.

WHERE IT RUNS

Class Name Lister runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, scanning the DOM for class attributes. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the lister. Click the "Scan" button to scan the page for class names. The panel displays the total number of unique classes and total references, followed by the top 10 most frequently used classes. A full list shows all classes with their frequency. Click any class name to see a list of elements that use that class—click an element to scroll to it on the page. Click "Text" to copy the class list as plain text, or "JSON" to copy it as a JSON object. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most class analysis requires manual inspection of the page source or using browser developer tools to search for class names. Class Name Lister uses a DOM-scanning approach that automatically finds all elements with class attributes and extracts their class names. The tool queries the page using document.querySelectorAll("*") to get all elements, then for each element, reads the className attribute and splits it by whitespace to get individual class names. It counts the frequency of each class name and stores references to the elements that use each class. The results are sorted by frequency in descending order, and the top 10 are displayed as color-coded badges. When a user clicks a class name, the tool shows the list of elements using that class with their tag name, ID, and text content preview. Clicking an element scrolls to it and highlights it temporarily. A MutationObserver detects dynamically added elements and rescans automatically. This approach ensures accurate, real-time, and fully private class name analysis without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view the class list and elements. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position and enabled state—are saved per domain for a seamless experience.

PLEASE NOTE

Class Name Lister requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool scans all elements with class attributes and may include classes from scripts, templates, or dynamically generated content. The tool does not modify page content; it only reads and displays class information. Clicking a class name shows elements that have that class at the time of scanning. All settings are stored locally in your browser using GM_setValue. No page content, class data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only scans and displays class name data at your request.