Media
5 items
Description
Extract DOM elements with CSS styles from any website. For developers & designers. Export as HTML, CSS, React or Vue components. 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