CopyKit

Element to LLM - DOM Capture for AI

Capture DOM elements with full context for AI debugging and analysis Your AI agent is blind. It guesses from screenshots. Drowns in raw HTML. Misses what users actually see. One click. Your browser's live UI state — structured, semantic, token-efficient — delivered directly to any LLM. Claude, GPT, Gemini, Llama. Your choice. Now your AI agent doesn't guess. It sees. 🤖 Built for AI Agents The era of AI agents is here. Agents that fill forms, navigate apps, debug interfaces, automate workflows — they all need one thing: accurate perception of the UI. SiFR v2 — structured, semantic, actionable: → Every element labeled and scored by importance → Actions tagged: [clickable] [fillable] [hoverable] → Spatial relationships mapped → 26x smaller than raw HTML → Zero system prompt overhead — live DOM is the context Your agent stops hallucinating UI elements. It acts on what's actually there. ⚡ What changes when AI sees your screen Before E2LLM: "There's a button somewhere on the left, I think it says Submit..." The difference feels unfair. In a good way. → LLM Agents — accurate UI state for autonomous action → AI Debugging — root cause in seconds, not hours → QA Automation — capture real runtime behavior → RPA — eliminate brittle selectors forever → Design review — spec vs implementation, instantly → Accessibility — what assistive tech actually perceives Nothing leaves your browser. Ever. No cloud. No servers. No tracking. DOM stays on your machine. This is the rare AI tool that works without touching your data. Works with Claude · ChatGPT · Gemini · Grok · Llama Chrome · Firefox · Arc · Brave · Edge Install. One click. Your AI finally sees.

Copy HTML with CSS

Adds a DevTools Elements sidebar that lets you copy the selected element's HTML along with its computed CSS as inline styles. Are you a backend developer who still can’t figure out how to center a — but you can copy your HTML into ChatGPT? Then this extension is for you! This handy little tool adds a sidebar to your Chrome DevTools that lets you copy any HTML element along with its CSS — with all the styles automatically converted into inline styles. Perfect for quick prototyping, debugging, or just asking your favorite AI assistant why your layout is broken. The extension also comes with a few simple customization options, like hiding selected elements or filtering out specific styles before copying — so you get exactly the output you need. Built by a backend developer, for backend developers — because we deserve nice things too.

HTML Copy

Copy or Export to file the HTML of a page with options to ignore certain elements. Effortlessly Capture Web Page Structures with "HTML Copy" Ever found yourself wanting a clean snapshot of a webpage's structure without all the extra elements? Dive into "HTML Copy" – your ultimate tool for isolating the essence of any website. Tailored for developers, designers, and web enthusiasts, this extension offers a streamlined approach to capturing web page content. Selective Cloning: Customize what you capture! Choose to ignore common elements like nav, header, footer, aside, or even img tags. Focus solely on the content that matters to you. Custom Element Ignoring: Every website is unique, and so are your preferences. Got specific elements you'd rather not see? Fine-tune your ignore list directly from the user-friendly popup. Enhanced Export Options: Once you've got the cleaned HTML, decide how you want it. Copy directly to your clipboard for instant access or export as a neatly named text file based on the webpage's URL. Experience the web in a new light, free from unnecessary distractions. Install "HTML Copy" today and elevate your web browsing and development journey!

Element Copy

Advanced HTML element selection and copying capabilities The most sophisticated HTML element selection tool for developers, featuring revolutionary spatial navigation, intelligent auto-scrolling, and complete hotkey customization. 🎯 REVOLUTIONARY SPATIAL NAVIGATION • **Ctrl+Arrow Keys**: Navigate elements like a 2D grid - move left, right, up, down based on visual positioning • **Smart element detection**: Finds the closest element in any direction on the page • **Visual spatial mapping**: Navigate menus, forms, grids, and complex layouts intuitively • **Position-based algorithm**: Uses actual element coordinates for precise movement 🧭 ADVANCED DOM TRAVERSAL • **Parent/Child navigation**: Move up/down the DOM hierarchy with Ctrl+Shift+↑/↓ • **Element stack visualization**: See exactly where you are in the DOM tree • **Context-aware selection**: Choose parent containers or specific child elements • **Hierarchy feedback**: Real-time notifications show your DOM position 🎮 INTELLIGENT AUTO-SCROLLING • **Viewport tracking**: Screen automatically follows your element selection • **Smart centering**: Selected elements are smoothly centered in view • **Boundary detection**: Scrolls when elements are near screen edges • **Seamless experience**: Never lose track of your selected element ⚙️ FULLY CUSTOMIZABLE HOTKEYS • **Individual key binding**: Customize every single hotkey through popup interface • **Conflict prevention**: Smart detection prevents duplicate assignments • **Live key capture**: Just press your desired key combination to set it • **Unlimited combinations**: Support for Ctrl, Alt, Shift, Function keys, and more • **Reset options**: Quickly restore defaults for any keybind 🔍 MULTIPLE SELECTION METHODS • **Instant hotkey**: Ctrl+Shift+C for immediate element copying • **Right-click menu**: Traditional context menu when hotkeys aren't suitable • **Visual preview**: Hold Ctrl while hovering to see selectable elements • **Protected content**: Works on dropdowns and right-click disabled sites 💡 SMART USER EXPERIENCE • **Visual feedback**: Red highlight overlay shows selected elements • **Element information**: Display tag names, classes, IDs, and position • **Smart notifications**: Context-aware messages guide your workflow • **Enable/disable toggle**: Complete control without uninstalling • **Universal compatibility**: Works on any website, any layout ⚡ DEFAULT HOTKEYS (All Customizable): • **Ctrl+Shift+C**: Copy element under cursor • **Ctrl+Shift+↑/↓**: Navigate parent/child elements • **Ctrl+Arrow Keys**: Spatial navigation (left/right/up/down) • **Ctrl+Shift+Enter**: Copy currently selected element • **Escape**: Cancel selection and clear highlights 🎯 PERFECT FOR: • **Web developers**: Quickly extract component HTML and CSS • **UI/UX designers**: Analyze element structures and styling • **QA engineers**: Document specific elements for bug reports • **Students**: Learn HTML/CSS through interactive exploration • **Content creators**: Copy specific page elements for analysis 🛡️ PRIVACY & PERFORMANCE: • **Zero data collection**: All processing happens locally • **Minimal permissions**: Only essential Chrome APIs used • **Lightweight design**: No impact on page performance • **Manifest V3**: Latest Chrome extension standards 🔧 TECHNICAL EXCELLENCE: • **Advanced algorithms**: Sophisticated spatial detection and DOM analysis • **Smooth animations**: Hardware-accelerated highlighting and scrolling • **Error handling**: Graceful fallbacks for edge cases • **Cross-platform**: Works on Windows, Mac, Linux, ChromeOS 🚀 PRODUCTIVITY REVOLUTION: Transform your web development workflow with the most advanced element selection tool available. Navigate HTML like never before with spatial awareness, intelligent scrolling, and complete customization. No more struggling with browser dev tools for simple element copying. Experience precision, speed, and total control over your HTML inspection workflow. 🔗 Open source project - contribute and suggest features