SnappySnippet

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

Total ratings for SnappySnippet

4.00 (Rating count: 9)

Merlin

See reviews for SnappySnippet on Chrome Web Store

Recent reviews for SnappySnippet

Recent rating average: 3.88

All time rating average: 4.00

Rating filters

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-17	Vladan Colovic			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-01-15	Mike S			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
2021-01-19	Dipen Parmar			Great work....Thanks
2021-01-11	cherif barry			cette extension fonctionne plutôt bien. Seuls problèmes c'est quand vous gênerez le html et le css d'une page qui est elle responsive, vous obtenez du code ne prenant pas en charge le coté responsif de votre application. L'autre grand problème c'est concernant la largeur de la page. L'extension est organisée de sorte qu'il faut d'abord inspecter votre page puis ouvrir l'outil Snappysneepet. Vous obtenez un code exactement correspondant au contenu du layout.