Easily Extract Code from Websites Using SnappySnippet

As web developers, we often stumble upon elements on websites that catch our eye, leading us to wonder, “How was this made?” This curiosity can drive us to want to replicate or study the underlying code. Tools like Chrome DevTools and Firefox’s Firebug offer features that simplify the process of copying HTML and CSS from websites.

However, these tools have a limitation: they allow copying of either HTML or CSS, but not both in relation to the selected HTML element. Consider you select an HTML element with several child elements, like this:

 <div class="container">
 <button>Submit</button>
 <p><span>By submitting you agree to our terms and conditions</span></p>
 </div>

This element, along with its children, has unique style rules defined in the stylesheet. Some HTML elements might inherit various style rules, making it a challenge to copy both the HTML and CSS simultaneously. This is the perfect scenario to use a tool like SnappySnippet, which excels in these situations.

Getting Started

SnappySnippet is a Chrome extension available here. Once installed, it introduces a new tab named SnappySnippet within Google Chrome DevTools, where you’ll utilize its features.

To demonstrate its utility, we’ve prepared a webpage featuring a simple yet attractive web login form. This form and its elements come with inherited CSS codes, which traditionally would be cumbersome to copy using browser DevTools alone.

SnappySnippet simplifies this process significantly.

Start by selecting the element you wish to copy. Then, navigate to the SnappySnippet tab and click the Create a snippet from inspected element button.

The selected element, along with its child elements, is duplicated into the HTML pane on the left side. Simultaneously, all related style rules are copied into the CSS pane, as shown below.

The Settings

SnappySnippet offers customizable output settings. Below the panes for HTML and CSS, you’ll find the Settings panel. Here, you can make adjustments like removing CSS properties with the -webkit- prefix from the output, adding prefixes to the IDs for HTML elements, and more.

Code Sharing

Web developers are likely familiar with code-sharing platforms like Codepen, which facilitate the sharing of functional code snippets. Think of it as a social network where, instead of posting updates and pictures, codes are shared. SnappySnippet enhances this experience by allowing you to directly send the codes you’ve copied to platforms such as Codepen, JSFiddle, and JSBin.

Before sending the code, ensure you are logged into the respective site to guarantee that the codes are saved to your account. Then, simply click one of the three share buttons.

The shared codes will replicate exactly what you observed on the original website.

Final Thoughts

SnappySnippet proves invaluable for duplicating code, yet it’s crucial to steer clear of using it for plagiarizing other developers’ work. The intent behind copying should always be educational, aiming to glean new insights and techniques. Remember, outright imitation, whether of copyrighted material or not, is frowned upon. Use this tool wisely and ethically.