Web Design Pirate

Chrome and Firefox DevTools Extension :boat: :ghost: :anchor:
Fast and easy way to copy full HTML widgets, components, and parts of web design.

Chrome Web Store: https://chrome.google.com/webstore/detail/web-design-pirate/pdplijceapgnjafgenmlijejmjgplbhm
Firefox Add-on: https://addons.mozilla.org/en-CA/firefox/addon/web-design-pirate-for-devtools/

Motivation & Description

It is hard to look at a website and copy only a small part of it (widget/component/element). We could copy the full HTML and all CSS files and then try to filter out things we don't need, but that would take too much time...

Web Design Pirate is a DevTools extension that allows you to select an HTML node, and then gives you only the CSS styles that you need to render the full component. Optionally, for copying wrapper-style components it also allows you to specify the level of inner HTML content that can be thrown away (to further reduce the number of needed CSS styles).

Examples

For instance I like MDN's header navigation widget. I select it using Developer Tools Inspector, switch to my Web Design Pirate tab, tweak the settings, and finally copy the result.

Screenshots

Current state:

Outdated (but still demonstrates the basic idea):

Dev

Pull requests welcome

TODO

• For large chunks of HTML (e.g. Expedia html body) it is too slow (devtools freeze) - maybe remove deep level innerHTML already in content scripts (assume user interest in the wrapper element)
• Replace UnCSS online api with a custom offline script using jQuery selectors from parsed CSS AST