Copy DOM and CSS for AI bởi Faisal Bhuiyan
A powerful Firefox extension that allows you to select elements or areas on any webpage and copy their DOM structure and CSS styling to your clipboard, formatted perfectly for providing context to AI tools.
2 người dùng2 người dùng
Siêu dữ liệu mở rộng
Ảnh chụp màn hình
Về tiện ích mở rộng này
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
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.
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.
Được xếp hạng 0 (bởi 1 người dùng)
Quyền hạn và dữ liệu
Quyền hạn bắt buộc:
- Truy cập dữ liệu của bạn trên mọi trang web
Thu thập dữ liệu:
- Nhà phát triển cho biết tiện ích mở rộng này không yêu cầu thu thập dữ liệu.
Thêm thông tin
- Liên kết tiện ích
- Phiên bản
- 1.0.0
- Kích cỡ
- 64,88 KB
- Cập nhật gần nhất
- một tháng trước (1 Thg 12 2025)
- Thể loại có liên quan
- Giấy phép
- Mozilla Public License 2.0
- Lịch sử các phiên bản
- Thêm vào bộ sưu tập