SnappySnippet

Easily extract CSS and HTML from selected element. Then send it to CodePen, jsFiddle or JS Bin with one click.

Total ratings

4.00 (Rating count: 9)
See reviews for SnappySnippet on Chrome Web Store
Upgrade to see all 15 reviews

User reviews

Recent rating average: 4.30
All time rating average: 4.00
Upgrade to see all 15 reviews

Rating filters

5 star
67% (10)
4 star
0%
3 star
13% (2)
2 star
7% (1)
1 star
13% (2)
Date Author Rating Lang Comment
2024-04-11
Natalie Grossman
en It's really slow. Its stylesheets are huge. It obliterates the original CSS and scrubs the original IDs & classes from the HTML. It takes the "Cascading" out of CSS, creating one flat style for each element. It's buggy (try saving a snippet that includes a CSS counter e.g.), and because the classes are gone there's no easy way to fix those errors in the generated CSS. It sets height and width properties of every block element to what they were when the snippet was generated, so snippets won't reflow if you try to add them into another page. If you imagine creating a PDF of the web page and cropping it in Acrobat 0.0.1 beta you've pretty much got it. Well-intended, could be useful, but not as it's realized here. I expected the snippet HTML to be substantially the same as the original HTML, and the snippet CSS to be some subset of the original CSS rules, maybe with references to the "inspected element" replacing references to its ancestors (or some other magic) to "fix" descendant selectors that referenced elements outside the snippet. Kind of like I'd worked my way through the snippet in DevTools, copying CSS rules from the "Styles" panel as I went, then touched up rules that would break without the inspected element's ancestors. Not even close. SnappySnippet strips the original class and id attributes (and others? idk) and assigns each snippet element a new id. It creates a new CSS rule for each element with an id selector and the computed element style. It also adds property values to freeze block elements at the size they were when the snippet was created. So what is the use case for this thing anyway? Not for sharing HTML - it strips the identifiers you rely on to navigate the DOM. Not for sharing CSS - it burns the original style rules and substitutes its own. You can't easily merge the snippet into another web page because the block element dimensions are fixed. And omg the stylesheet is HUGE! A single multiple-choice question from an online quiz (137 elements)? 6 kb HTML, 150 kb CSS. Twenty questions? 120 kb HTML, 1000 kb CSS. If one paragraph is 5 lines high and a second is 4 lines high but otherwise identical then each will have its own CSS rule, duplicating all property values except the height (which wasn't set by the original stylesheets at all). That's a lot of unnecessary duplicates - welcome back to the 1990s. Oh, and it's really slow. I counted 10 Mississippis waiting for that 20-question snippet. [zzz...] PS: If you uncheck "Format and clean up HTML" you'll keep the original HTML (except IDs, which will still be replaced). See https://github.com/kdzwinel/SnappySnippet/issues/29
2023-05-19
Carlos Ulises Ochoa Villa (Shane)
Really helpful extension. Thank you!
2023-05-19
Carlos Ulises Ochoa Villa (Shane)
en Really helpful extension. Thank you!
2023-05-17
Vladan Colovic
Works perfectly!
2023-05-17
Vladan Colovic
en Works perfectly!
2023-04-19
Sheryar Khan
Works Fine for me. Although sometimes bugs but it's impossible to copy things the way this extension does.
2023-04-19
Sheryar Khan
en Works Fine for me. Although sometimes bugs but it's impossible to copy things the way this extension does.
2023-01-15
Mike S
Nice plugin, it works well. Would be nice to have the option to retain the original structure and class names
2023-01-15
Mike S
en Nice plugin, it works well. Would be nice to have the option to retain the original structure and class names
2021-11-22
Logy Tech
fake spam
Upgrade to see all 15 reviews