Chrome 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
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
Firefox version: APIs used are supported as of Firefox 54. However, Console's command-line helper functions, like $0 (last inspected element) are still not implemented - and sadly, getting access to the last HTML element selected by user is a required part of this extension's workflow.
- 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