Copy DOM and CSS for AI EN

Select any element or area on a webpage and instantly copy its full DOM structure + real CSS rules (from stylesheets) to clipboard – perfectly formatted for pasting into ChatGPT, Claude, Gemini, or any AI coding assistant.

Tired of describing layouts or copying messy “View Source” HTML? This add-on lets you point, click (or drag), and get clean, context-rich DOM + CSS ready for any LLM in one second.

Key Features
- Single-click element selection with live hover preview
- Drag-to-select rectangular areas (captures all elements inside)
- Automatically includes ancestor hierarchy up to <body> for proper context
- Extracts actual CSS rules from stylesheets (not just computed styles)
- One-click copy with customizable prompt template
- Visual overlay shows exactly what will be copied
- Full keyboard support (ESC to cancel)

How To Use
- Click the toolbar icon
- Choose Element Mode (default) or Area Mode
- Hover & click, or click-and-drag
- Formatted DOM + CSS is copied instantly – just paste into your AI chat

Output Example

DOM structure:
<div class="container mx-auto">
<section class="card shadow-lg">
<h2 class="text-2xl font-bold">Hello World</h2>
<p class="mt-4 text-gray-600">Lorem ipsum...</p>
</section>
</div>

CSS rules:
/* .container.mx-auto */
.container { max-width: 1200px; margin: 0 auto; }
/* .card.shadow-lg */
.card { padding: 2rem; border-radius: .5rem; background: white; box-shadow: 0 4px 6px rgba(0,0,0,.1); }


Customization Options
- Ancestor levels (0–20, default 3)
- Children depth (-1 = all, default)
- Custom prompt template with {dom}, {css}, {url}, {timestamp} variables
- Toggle between single-element and area selection

Privacy First
- No data collection or transmission
- Only activates when you click the icon
- Runs entirely in your browser
- Settings stored locally

Best Practices for AI Use
- 2–4 ancestors = ideal context for most components
- 0 ancestors = when you want just one exact element
- Higher ancestors = debugging complex page structure

Works Everywhere
Tested on React, Vue, Angular, Shopify, WordPress, Tailwind, Bootstrap, and vanilla sites.
Instant DOM + CSS extraction for developers, designers, and prompt engineers on Firefox. Free, open-source, no tracking.