Pluck — Extract page elements as HTML with inline CSS or Markdown
Unknown author · Developer Tools
Media
3 items
Description
Copy any element with its computed styles as clean inline HTML or Markdown. DevTools sidebar with preview, highlight, and download. Pluck extracts any element from a webpage as clean, self-contained HTML with inline CSS — or converts it to Markdown with one click. It lives in the DevTools Elements panel sidebar, right where you select elements. HOW IT WORKS 1. Open DevTools and go to the Elements panel 2. Select any element — Pluck appears in the sidebar 3. Click "Copy as HTML + inline CSS" or "Copy as Markdown (MD)" 4. Paste anywhere — the element renders with full visual fidelity SMART STYLE EXTRACTION Pluck doesn't dump all 400+ computed CSS properties. It uses an iframe-based baseline comparison to identify only the styles that actually differ from browser defaults, then applies intelligent filtering: - Attribute-aware baselines (e.g., <a href> has different defaults than <a>) - Inherited property deduplication (only re-declares when values change) - Shorthand reconstruction (margin, padding, border, flex, gap, etc.) - Skips noise: vendor prefixes, animations, scroll behavior, SVG-on-HTML, box-sizing, and 100+ other non-visual properties - Filters out hidden elements (display:none, hidden attribute) - Strips framework attributes (Angular, React, Vue, Ember, Astro) - Captures pseudo-element content (::before/::after converted to real elements) MARKDOWN EXPORT The "Copy as Markdown" button converts the extracted HTML to clean Markdown using Turndown.js. Headings, lists, bold, italic, links, and tables are all preserved. Pseudo-element labels (like "Primary Location:" rendered via CSS content) become real text in the output. PREVIEW PANEL Toggle the preview to inspect the output before copying: - HTML code view with Prism.js syntax highlighting (DevTools-matching colors) - Markdown code view with syntax highlighting - Rendered Markdown preview with GitHub-flavored styling - Soft wrap with indent-preserving line wrapping ADDITIONAL FEATURES - Highlight overlay to visualize the selected element on the page - Hold Alt to download as .txt or .md instead of copying - Dark and light theme, matching your DevTools settings - Auto-reloads when the extension is updated - Works in Chrome and Brave PRIVACY Pluck reads page content solely to extract the selected element. No data is transmitted, stored remotely, or shared with any third party. All processing happens locally in your browser. No analytics, no tracking, no accounts. CREDITS Icon designed by IwitoStudio from Flaticon. Pluck uses MIT-licensed open source libraries: Prism.js for syntax highlighting, Turndown.js for HTML-to-Markdown conversion, and Marked.js for Markdown rendering.