dalimil / web-design-pirate

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

Web Design Pirate

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/

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

web-design-pirate's Issues

issue with firefox

thanks for the extension.
it works well on chrome but not firefox 57.0.2

Responsive layouts don't give correct rendering

Go to any RWD website: https://digg.com

Select the top nav bar class, the one that contains header with breadcrumb.

The preview window doesn't show the mobile version of the nav-bar, it shows the desktop version.

Setting the user-agent for mobile kinda works, though the layout is still messy and not as clean as desktop version.

Not working on particular site.

Hey,

Have the following "CSS input" error:

{"isException":true,"value":"DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules\n at slice.call.map (:2:65)\n at Array.map ()\n at getStyleSheets (:2:48)\n at :8:5"}

for the following site:
http://spirit.com.au/

Will try my best to see if I can create a PR, if you could give me a hint in the meantime that would be sweet.

Please include direct links to xpi and crx files

Web Design Pirate is coming up 404 at mozilla addons site.
Please include direct links to xpi and crx files.

not working anymore in FF 59b12+ / 59final / 60b3

not working anymore in FF 59b12

was working greatt before!

message: file not found
please see attachment.

reinstallation doesn't help

Please use Releases section in Github for Firefox and an update.json

Hi,

Pretty cool extension!

If you put your XPI file in the releases section like this example people will be able to install it with one click.

If you also add an update.json to your manifest.json then you will use the Firefox automatic update system to ship updates.

Thank you for your extension!