HtmlClipper – save html content from any website

Posted August 26th, 2010 in Javascript and tagged , , , , by Florentin

What is HtmlClipper

HtmlClipper is a bookmarklet which lets you copy html sections of any web pages together with the attached css styles. After the script is enabled inside a web page, you may select and extract any html element together with all it’s children and computed css styles. What you get is a new html document made up of an inline stylesheet and html code needed to render the element as close as possible to what you’ve seen in the source web page.
The bookmarklet only works in Firefox and Google Chrome.

Download HtmlClipper from GitHub

Firefox Installation

  • Make sure the “Bookmarks Toolbar” is visible. If it is not, go to menu View > Toolbars.
  • Drag this link: Html Clipper up to your Bookmarks Toolbar.

How to use it

  • click the bookmarklet from your Bookmarks Toolbar
  • click inside the html page to select an element
  • press “w” to select the parent element
  • press “q” to undo the selection of parent element
  • press “r” to remove an element
  • press “s” to clip the element
  • press ‘esc’ to exit the ‘clipping’ window
  • press ‘x’ to exit HtmlClipper

Here are some screenshots of webpage clippings created with HtmlClipper:

14 Responses so far.

  1. Prax says:

    Very good tool! How to use in Chrome?

  2. Prax says:

    Sorry, I resolved, was enough to turn on the bookmarks bar and do like Firefox!

  3. vijayakumara nv says:

    thank you buddy..!
    its super..!

  4. KSC says:

    wonderful extension!

  5. Pali Madra says:

    Hello Florentin

    Thank you for the bookmark code.

    It does work in Firefox and Chrome. In Chrome though there are some issues I’m having but I would like to add I have not tried enough.

  6. Alex says:

    Thanks for this great tool!
    But looks like it is not working on https pages, right?

  7. foo says:

    Great! But doesnt work anymore (Mac/FF).

  8. Andy says:

    Hey dude, this is awesome, you’ve just made my whole month!

  9. jarek says:

    Does it include Javascript download?

  10. mmm011 says:

    thanks buddy !!!! its awesome…..

  11. Terminal says:

    Thank you! This is extremely useful. Working fine in Firefox 26.0.

  12. Florentin says:

    It doesn’t, just shows the html and css.

  13. Edouard Kestemont says:

    Works very nicely in Safari 8.0.5 under Yosemite (Mac OS X) 10.10.3 (beta). Thanks.

  14. mc0e says:

    looks like it’s built on getComputedStyle?

    I’m wondering if a variant could be produced along the lines of http://stackoverflow.com/a/19130994/2109800 ?

Leave a Reply