DOMExtractor

DOMExtractor - Extract DOM Elements with Complete CSS Styles A powerful Chrome DevTools extension for developers, designers, and AI workflows. Extract DOM elements with their associated CSS styles from any website and export as HTML, CSS, React, Vue, or JSON — with customizable output templates, CSS framework cleaning, and full preset management. WHAT IT DOES ------------ DOMExtractor captures any element you select in Chrome DevTools along with all its CSS rules. No more manually copying styles or hunting through stylesheets. Select an element, click Extract, and get production-ready code — optimized for both human developers and AI assistants. KEY FEATURES ------------ - Extract complete DOM structures with all child elements - Capture all associated CSS rules including pseudo-classes and pseudo-elements - Export as HTML, CSS, JSON, React components, or Vue single-file components - Copy to clipboard or download as ZIP - Customizable output templates per format (Combined, HTML, CSS, JSON, React, Vue) - CSS framework class removal (Tailwind, Bootstrap, Bulma, and 7 more) - CSS rule deduplication and selector simplification - Custom cleaning rules (prefix, regex, exact match) - Supports Shadow DOM extraction - Handles CSS variables, media queries, animations, and keyframes - Extracts font-face rules and computed styles - Token count estimation for AI workflows - History with stored extraction content — reload results without revisiting the page - Full preset system with import/export - Toast notifications for all user feedback - Custom confirm modals (no browser alerts) EXPORT FORMATS -------------- Combined - HTML + CSS with customizable header template. Add metadata, AI prompts, or context information using template variables. HTML - Clean, formatted HTML markup ready to use CSS - All matching CSS rules organized by category (base, pseudo-classes, pseudo-elements, media queries, keyframes) JSON - Structured data format with metadata, stats, HTML, CSS, and warnings React - TypeScript-ready functional component with proper JSX conversion - Converts class to className, for to htmlFor - Converts inline styles to style objects - Includes component CSS as separate file reference Vue - Vue 3 single-file component with Composition API - Template section with extracted HTML - Script setup with TypeScript - Scoped styles OUTPUT TEMPLATES ---------------- Customize the output for every format through the template editor (gear icon in the tab bar). Combined Template - Full header replacement with dynamic variables. Build your own comment block with extraction metadata, AI prompts, or custom instructions. Format Prefixes (HTML, CSS, JSON, React, Vue) - Add prefix text before any output. Useful for AI prompts, usage instructions, or context comments. Available template variables: - {{source}} - Page URL - {{title}} - Page title - {{timestamp}} - Extraction date and time - {{selector}} - CSS selector of the extracted element - {{elements}} - Number of extracted elements - {{rules}} - Number of CSS rules - {{viewport}} - Viewport dimensions and breakpoint - {{dpr}} - Device pixel ratio - {{cleaned}} - CSS cleaning statistics Templates are saved per preset, so different workflows can use different templates. CSS CLEANING ------------ Remove framework utility classes and clean up extracted CSS for production use. Framework Support: - Tailwind CSS (v3/v4 utility classes) - Bootstrap (grid, utilities, components) - Bulma (columns, helpers, modifiers) - Foundation, Materialize, Semantic UI, UIKit, Tachyons, Primer, Pure CSS - Generic patterns (common utility prefixes) - Auto-detection of active frameworks on the page Cleaning Options: - Remove framework classes from HTML class attributes - Remove CSS rules that only target framework classes - Deduplicate CSS rules with identical properties - Simplify overly complex selectors Custom Rules: - Prefix-based matching (e.g. my-app- removes my-app-button, my-app-card) - Regex patterns for expert matching - Exact class name blacklist - Test rules against the current page before applying PRESET PROFILES --------------- Save time with built-in presets or create your own. Full - Extracts everything including pseudo-classes, pseudo-elements, media queries, animations, CSS variables, font-faces, Shadow DOM, and viewport info Minimal - Lightweight extraction with compact mode, CSS minification, and framework class removal enabled React-Ready - Optimized for React development. Excludes inline styles and Shadow DOM. Enables CSS deduplication and selector simplification Clean Output - No metadata comments. Enables deduplication, simplification, and framework cleaning Custom Presets - Save your preferred settings including extraction options, cleaning rules, and output templates. Import and export presets as JSON for sharing across teams. EXTRACTION OPTIONS ------------------ CSS Extraction - Pseudo-classes like hover, focus, active, nth-child - Pseudo-elements like before, after, first-letter - Media queries for responsive styles - Keyframes and animations (only used ones) - CSS custom properties and variables (from :root) - Font-face rules (only used fonts) - Computed styles for important inherited properties - Inline styles from element attributes DOM Options - Shadow DOM traversal and extraction (depth limit 10) - Viewport information (width, height, breakpoint, DPR) - Base64 image embedding with CORS fallback Output Format - Metadata comments with source URL, timestamp, and stats - Compact mode with reduced whitespace - CSS minification HISTORY ------- Your last 5 extractions are stored with full content (HTML, CSS, Combined output, stats, warnings). Click any history entry to instantly load the result — no need to navigate back to the original page. Each entry shows the selector, page title, element count, rule count, and timestamp. AI WORKFLOW INTEGRATION ----------------------- DOMExtractor is built with AI-assisted deve…