04 December 2012

Full Page Screen Capture Chrome Extension

I built a Chrome Extension that allows you to save a screenshot of an entire webpage as an image—including what’s below the fold. That’s the only feature, nothing more. I wanted this tool but every similar app that I tried in the Chrome Webstore couldn’t do it right.

Just a few clicks from the chrome webstore (it’s free) and you should be ready to go—try out the full page screen capture extension.

Features:

  • one-click full page screen-capture—the easiest way for anyone to do it
  • captures all content on the page—including scrolling down and right (if necessary)
  • pauses to prevent the scrollbar from appearing in the screenshot on Mac OSX
  • handles most sticky headers that always appear at the top of the page when you scroll (e.g., twitter.com)
  • opens a new tab with your screen capture, which is given a named based on your current URL—right click on the file and hit “save as” or just drag it to your desktop

Issues:

  • because of the limitations of chrome extensions, it has to scroll to each part of the page, taking a screenshot, and then it can assemble them into one image
  • the extension cannot be run in the Chrome Webstore or settings URLs that start with “chrome://”

Examples (scaled down because of large file sizes):

twitter screen capture mrcoles screen capture mrcoles screen capture

Please let me know (comment below) if you find any issues, I’d like for this to continue working for everyone! If you’d like to help develop it, checkout the project on git. I’ve already merged a pull request from Ben Gleitz for naming the temp file.


Other options (if you’re using Mac OSX)

Built-in screen shot utility

If you only need to capture what’s already visible on the page, you can just type: cmd + shift + 4 and you’ll have a cross hair that you can click, drag, and release over a region to make a screen shot. Furthermore, hit spacebar after that command and the crosshair will turn into a camera that will capture any window with a click.

This utility defaults to saving pictures to your Desktop, but you can change the capture location with this trick.

Webkit2png - command-line screen capture

Webkit2png is a cool python command-line tool that will take a full page screen capture of a page. Follow the instructions on that page to install it and give it a try. I think it’s really great, but if you’re not a developer or you want to capture a page that is in a specific state, e.g., the result of submitting a form, then try out my extension.

comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer who lives in NYC, worked at Hunch/eBayNYC, and blogs here.
More about Peter »

@lethys · github · rss

It’s time to get big money out of politics. Join the kick-started campaign to put government back in the hands of the people. Pledge mayday.us now