Inline Style Extractor

WHAT IT DOES

Inline Style Extractor is a browser extension that scans any webpage for elements with inline styles and extracts them into a structured list. It shows each element with its CSS selector and inline style properties, and displays a summary of the most common inline styles used on the page (color, background, font-size, margin, padding, etc.). You can copy the extracted styles as plain text or as formatted CSS rules. The tool helps developers identify inline styles that should be moved to external stylesheets, analyze style usage patterns, and audit code quality. It is ideal for web developers, QA engineers, performance auditors, and anyone who wants to understand and optimize inline style usage on a webpage.

WHERE IT RUNS

Inline Style Extractor 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 elements with style 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 extractor. Click the "Scan" button to extract inline styles from the page. The panel displays a summary showing the most common inline style properties used on the page, followed by a list of all elements with inline styles, showing the element selector and its style properties. Click "Text" to copy the report as plain text, or "CSS" to copy it as formatted CSS rules. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most inline style analysis requires manual inspection of the page source or using browser developer tools to inspect each element individually. Inline Style Extractor uses a DOM-scanning approach that automatically finds all elements with inline styles and extracts them. The tool queries the page using document.querySelectorAll("[style]") to get all elements with style attributes. For each element, it reads the style attribute, splits it into individual property-value pairs, and stores them in a structured object. The tool also builds a selector for each element by combining the tag name, ID, and classes. The extracted data is aggregated to show the frequency of each style property across the page. Results are displayed with color-coded badges for the most common styles and a detailed list of elements with their inline styles. A MutationObserver detects dynamically added elements and rescans automatically. This approach ensures accurate, real-time, and fully private inline style 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 results. 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

Inline Style Extractor 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 extracts inline styles from style attributes only; it does not read styles from external stylesheets or style tags. The tool does not modify page content; it only reads and displays style information. The CSS export formats the extracted styles as CSS rules with the element selector and inline styles. All settings are stored locally in your browser using GM_setValue. No page content, style 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 inline style data at your request.