Chrome and Firefox DevTools Extension ⛵ 👻 ⚓
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/
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).
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.
Current state:
Outdated (but still demonstrates the basic idea):
Pull requests welcome
- 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