singlefile.pngHow many times have you wanted to archive a webpage or save its current state for one reason or another? I know this has happened to me, and I’ve almost always turned to a scrolling screenshot to snap an image of the entire page or I’ve used a print-to-PDF app. These methods aren’t bad for most purposes, but I know very few people who try to save a webpage using the “save as” option that is built-in to most browsers. If you do go that route you’ll normally end up with a bunch of helper files (images, CSS, scripts, etc…) that also get saved in order to fully reproduce the site.

There is an awesome Google Chrome extension called SingleFile that will actually make modifications to a page so that everything (except videos/Flash) are stored in-line and can therefore be saved to just one HTML file. It encodes images and embeds CSS so that there are no helper files needed, and since it is a standard HTML file it can easily be shared with other people without worrying whether they’ll be able to open the file.

There are several different “SingleFile” extensions available for Chrome and I want to point out the differences:

  • SingleFile – This is the stable version of the extension that is recommended for most users. There are some nice new options and features in the Beta version which is a little further down this list.
  • Scrapbook for SingleFile – Creates a browsable archive of all the pages you save. It’s a great way to manage saved pages if you don’t feel like organizing them yourself on your hard drive.
  • SingleFile Beta – Has some great new features including options to remove elements from a page before saving, background processing, and more. The options are all pictured in the screenshot above.
  • SingleFile Core Beta – You’ll need this if you’re using the SingleFile Beta, and has been broken out into a separate extension so that other extension developers can take advantage of the work that has been put into this library.

After installing the extension a new button will be added to the toolbar, and what happens from there depends on the settings you have configured. If you enable the “save processed page” option it will automatically save the file in an obscure directory within your Google Chrome profile. You can create a shortcut to this folder (which is listed in the help section for the various operating systems), but I recommend just enabling the “display processed page” option. Then all you have to do is click the button, wait for it to finish processing the page, and then use Control+S (or Command+S on Mac) to save it to your hard drive.

I highly recommend checking out this extension if you’ve ever found yourself snapping a screenshot of a page or saving it as a PDF for later reference. At least this way you can still fully interact with the page and click on any of the links.

There Are 4 Comments

  1. That’s a pretty cool extension. At first I didn’t think it was working because I was trying to view the htm file in IE 7. After reading the extension’s page, I found it stated that IE 8 will mostly render the saved page correctly. I was able to successfully open the saved htm file in Firefox and Chrome.

  2. Thanks Ryan for this great article :)

  3. IE has this feature built in, save as Web Archive. Its a custom file format with the extension .mht and can only be viewed in IE.

    Probably the only thing I miss with IE, nice to see I can get it in chrome now.

  4. IE has this feature built in, save as Web Archive. Its a custom file format with the extension .mht and can only be viewed in IE.

    Probably the only thing I miss with IE, nice to see I can get it in chrome now.

Leave Your Comment


Message is the only required field.
Emails are not published.