Media
2 items
Description
Click any element on a webpage to extract its HTML and CSS, including authored rules, hover/focus states, and media queries. Style Sniper - UI Extractor Style Sniper copies a live UI off any webpage — the HTML plus the CSS that actually paints it. Click a button, card, or heading and you get that node, not the whole page. It is a developer tool for rebuilding interfaces, matching a design, or moving a component into a playground. It is not View Source and it is not a full computed-style dump. How to use Pin Style Sniper and click Start Sniping, or press Ctrl+Shift+S (⌘⇧S on Mac). Hover to outline a control. Click the element you want. Or click-and-drag a rectangle around a layout. A dim overlay, size label, and pink outline show the block; release to extract. Press Enter to extract the hovered element. Press Esc to cancel. In the result panel: copy CSS or HTML, walk Parent / Child, or open the extract in JSFiddle. Click Stop Sniping or press the same shortcut to turn it off. The toolbar badge shows ON while the picker is active. What you get The selected element’s markup, cleaned of scripts, inline handlers, and javascript: URLs Authored CSS from reachable stylesheets, including @media :hover, :focus, and :active rules that target the selected element Computed fallbacks only for properties the sheets do not already set Unused browser defaults skipped, plus used pixel boxes like width: 347px unless they were authored ::before, ::after, ::placeholder, and ::file-selector-button Open Shadow DOM inlined into the HTML Same-origin iframes (cross-origin frames stay blocked by the browser) Relative src / href / url() values rewritten to absolute URLs so playgrounds can load images and assets Custom font names listed in a comment (Style Sniper does not invent Google Fonts links) Result panel A dark panel sits on the page after you pick. The title is a short label (for example button#save or article#plan-pro), not a long class dump. Copy CSS and HTML separately. Parent and Child walk the tree if you want a wrapper or a child. Open in JSFiddle posts the extract to JSFiddle’s prefill API so you can edit it immediately. CodePen is a copy/paste fallback because CodePen’s current prefill endpoints drop the payload or error. Why it is not View Source View Source and DevTools dump a document or a huge computed blob. Style Sniper walks the selected subtree, keeps authored rules first, drops noise, and prepares URLs for a playground. Limits Closed shadow roots and cross-origin stylesheets cannot be read Hover/focus rules are captured when they target the selected element itself Huge trees are capped at 200 descendant nodes so the tab stays responsive Restricted Chrome pages (chrome://, the Web Store, and similar) cannot be sniped Permissions activeTab — runs only on the tab you start scripting — injects the picker and result panel after you start storage — keeps session state (sniping on/off) Style Sniper does not create an account, does not include analytics, and does not send page content anywhere unless you choose Open in JSFiddle (or the CodePen fallback). Do not export UI you are not allowed to reuse. Keyboard Ctrl+Shift+S / ⌘⇧S — start or stop sniping Esc — cancel the picker, or close the panel Enter — extract the hovered or selected area Parent / Child in the panel — walk the tree