DOMExtractor

Tracking since Apr 4, 2026.

Changelog

• Apr 17, 2026
  description

  DOMExtractor - Extract DOM Elements with Complete CSS Styles
  
  A powerful Chrome DevTools extension for developers and designers who need to extract DOM elements with their associated CSS styles from any website. Export as HTML, CSS, React, Vue, or JSON.
  
  
  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.
  
  
  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 files
  - Supports Shadow DOM extraction
  - Handles CSS variables, media queries, animations, and keyframes
  - Extracts font-face rules
  - Optional computed styles extraction
  - Token count estimation for AI workflows
  
  
  EXPORT FORMATS
  --------------
  
  HTML - Clean, formatted HTML markup ready to use
  
  CSS - All matching CSS rules organized and deduplicated
  
  JSON - Structured data format with metadata, stats, and content
  
  React - TypeScript-ready functional component with proper JSX conversion
  - Converts class to className
  - Converts inline styles to style objects
  - Includes component CSS
  
  Vue - Vue 3 single-file component with Composition API
  - Template section with extracted HTML
  - Scoped styles
  
  
  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 only essential styles. Enables compact mode and CSS minification. Perfect for quick copies
  
  React-Ready - Optimized for React development. Excludes inline styles and Shadow DOM for cleaner component generation
  
  Custom Presets - Save your preferred settings and reuse them across sessions
  
  
  EXTRACTION OPTIONS
  ------------------
  
  CSS Extraction
  - Pseudo-classes like hover, focus, active
  - Pseudo-elements like before, after
  - Media queries for responsive styles
  - Keyframes and animations
  - CSS custom properties and variables
  - Font-face rules
  - Computed styles for all inherited properties
  - Inline styles from element attributes
  
  DOM Options
  - Shadow DOM traversal and extraction
  - Viewport information
  - Base64 image embedding
  
  Output Format
  - Metadata comments with source URL and timestamp
  - Compact mode with reduced whitespace
  - CSS minification
  
  
  HISTORY
  -------
  
  Your last 10 extractions are saved automatically. Click any history entry to re-extract the same element. Each entry shows the selector, page title, element count, rule count, and timestamp.
  
  
  HOW TO USE
  ----------
  
  1. Open Chrome DevTools on any webpage using F12 or right-click and Inspect
  
  2. Navigate to the DOMExtractor panel in DevTools
  
  3. Select an element in the Elements panel
  
  4. Choose your preset or configure extraction options
  
  5. Click Extract Selected Element
  
  6. Preview the output in Combined, HTML, CSS, JSON, React, or Vue tabs
  
  7. Copy to clipboard or download the files
  
  
  USE CASES
  ---------
  
  For Developers
  - Extract UI components from design references
  - Capture styles from websites for learning
  - Generate starter code for React or Vue projects
  - Document existing styles as JSON
  
  For Designers
  - Extract color schemes and typography
  - Capture component styles for design systems
  - Export styles for handoff documentation
  
  For AI Workflows
  - Token count estimation helps with context limits
  - JSON export works well with LLM prompts
  - Extract code context for AI assistants
  
  
  TECHNICAL DETAILS
  -----------------
  
  - Chrome DevTools Extension using Manifest V3
  - No external dependencies - pure vanilla JavaScript
  - Works offline after installation
  - Settings persist using Chrome Storage API
  - Maximum 1000 elements per extraction to ensure performance
  - Shadow DOM traversal limited to depth of 10
  
  
  PRIVACY
  -------
  
  DOMExtractor works entirely locally in your browser. No data is sent to external servers. Your extraction history and presets are stored locally using Chrome Storage.
  
  
  PERMISSIONS EXPLAINED
  ---------------------
  
  activeTab - Required to access the current tab for extraction
  
  scripting - Required to inject extraction scripts into pages
  
  clipboardWrite - Required for copy to clipboard functionality
  
  downloads - Required for file download functionality
  
  storage - Required to save your presets, history, and settings
  
  
  REQUIREMENTS
  ------------
  
  - Chrome version 120 or higher
  - DevTools must be open to use the extension
  
  
  Developed by Hashfox GmbH
  www.hashfox.com

  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 development in mind.
  
  Token Estimation - See approximate token counts for AI models (GPT, Claude) in the stats bar. Separate estimates for Combined, HTML-only, and CSS-only.
  
  Custom AI Prompts - Use the output template editor to prepend AI instructions to any format. For example, add a system prompt before the HTML output that tells the AI how to process or modify the extracted code.
  
  Template Variables - Dynamic placeholders ensure your AI prompts always include the correct metadata (source URL, selector, element count) without manual editing.
  
  Preset Workflows - Create presets optimized for AI tasks:
  - A "Claude Context" preset with a custom combined template that includes extraction metadata and AI instructions
  - A "GPT Component" preset that outputs React with usage documentation as prefix
  - A "Minimal AI" preset with compact mode and token-optimized output
  
  JSON Export - The structured JSON format includes metadata, stats, HTML, CSS, and warnings in a machine-readable format ideal for LLM processing.
  
  Combined Output - The combined format bundles HTML and CSS with a customizable header — perfect for pasting into AI chat interfaces as a single code block.
  
  
  HOW TO USE
  ----------
  
  1. Open Chrome DevTools on any webpage using F12 or right-click and Inspect
  
  2. Navigate to the DOMExtractor panel in DevTools
  
  3. Select an element in the Elements panel — the selected element appears next to the Extract button
  
  4. Choose your preset or configure extraction options
  
  5. Click Extract — the element label turns green when extraction is complete
  
  6. Preview the output in Combined, HTML, CSS, JSON, React, or Vue tabs
  
  7. Use the copy icon in the tab bar or the Copy to Clipboard buttons below
  
  8. Download individual files or all as ZIP
  
  9. Customize output templates via the gear icon in the tab bar
  
  10. Save your configuration as a custom preset for reuse
  
  
  USE CASES
  ---------
  
  For Developers
  - Extract UI components from design references or competitor sites
  - Capture styles from websites for learning and prototyping
  - Generate starter code for React or Vue projects
  - Document existing component styles as JSON
  - Clean framework utility classes for production code
  - Share extraction presets across team members
  
  For Designers
  - Extract color schemes and typography from live sites
  - Capture component styles for design system documentation
  - Export styles for developer handoff
  - Compare styles across different viewports
  
  For AI Workflows
  - Extract code context for AI assistants (Claude, GPT, Copilot)
  - Add custom AI prompts to output via templates
  - Token count estimation for context window planning
  - JSON export for structured LLM input
  - Preset-based workflows for different AI tools
  - Clean output mode for minimal token usage
  
  
  TECHNICAL DETAILS
  -----------------
  
  - Chrome DevTools Extension using Manifest V3
  - No external dependencies — pure vanilla JavaScript
  - Works offline after installation
  - Settings persist using Chrome Storage API
  - Maximum 1000 elements per extraction to ensure performance
  - Shadow DOM traversal limited to depth of 10
  - ZIP download built-in (no external library)
  - Responsive breakpoints: xs (<576), sm (576-767), md (768-991), lg (992-1199), xl (1200-1399), xxl (>=1400)
  
  
  PRIVACY
  -------
  
  DOMExtractor works entirely locally in your browser. No data is sent to external servers. No analytics, no tracking, no cloud sync. Your extraction history, presets, custom templates, and cleaning rules are stored locally using Chrome Storage.
  
  
  PERMISSIONS EXPLAINED
  ---------------------
  
  activeTab - Required to access the current tab for element extraction
  
  scripting - Required to inject extraction scripts into web pages
  
  clipboardWrite - Required for copy to clipboard functionality
  
  downloads - Required for file download functionality
  
  storage - Required to save your presets, history, templates, and settings
  
  
  REQUIREMENTS
  ------------
  
  - Chrome version 120 or higher
  - DevTools must be open to use the extension
  
  
  VERSION 1.6.0
  --------------
  
  Developed by Hashfox GmbH
  www.hashfox.com

Permissions & access

Permissions

scriptingclipboardWritedownloadsactiveTabstorage

Host access

<all_urls>

Screenshots

Similar extensions

Alternatives to DOMExtractor, ranked by description similarity.

HTML/CSS Extractor

Extract HTML & CSS from any element with live preview, smart selector simplification, and syntax-highlighted editor

115

★ 5.0

DOM Extractor

Select elements or areas and copy their DOM structure and CSS to ask AI models for help.

80

CSS Extractor Pro - Extract Clean CSS Code & Color Palettes

Extract clean CSS code from any webpage element & generate complete color palettes. Essential developer tool.

908

★ 3.0

Webpage Code Extractor

Extract, view, copy, and download HTML/CSS/JS code from any webpage. Full-page screenshots, Monaco editor, customizable settings.

1.0K

★ 2.4

Extractify

Extract HTML and CSS from selected elements.

20

CSS Extractor — Extract CSS from Any Website

Instantly extract clean, ready-to-use CSS for any element on any webpage. Stop digging through stylesheets manually.

183

★ 5.0

HTML/CSS Section Copier

Extracts selected section and provides raw HTML and CSS.

162

Content Extractor

CSS/XPath Content Extractor is a simple and efficient Chrome extension designed for developers, testers, and anyone working with…

134

★ 5.0