Blipshot: real one-click screenshots for Google Chrome

2 minute read

Blipshot is a Google Chrome extension to make whole-page website screenshot in a really easy way. It’s designed to be a real one-click extension.

Features

  • whole-page screenshot, not just the visible area
  • Flash content is included in the screenshot
  • real one-click screenshot, the easiest extension possible
  • fast drag’n’drop or right click to save the image in PNG
  • the screenshot is saved with page name, date and time

How to use it

The extension is published as Blipshot on the official Google Chrome Extension website. Just go there and click on the big “Install” button.

To use it:

  1. Click on the Blipshot icon in the toolbar: the screenshot will be done straight away, no options, no delays.
  2. The screenshot will appear on the right side of the website you’re on: from that you can just drag’n’drop it on your computer or right click if you prefer.

It couldn’t be as simple as this! :)
To dismiss the screenshot just click on any dimmed area.

Development

I was thinking since a long time ago an app to take screenshot and map website hierarchies in order to ease benchmarks and simple image archival. So I decided to try doing it in Chrome since its javascript Extension API looked very nice to me.
Unfortunately I hit a few walls due to the limitations of the browser sandbox and so even if I think it’s still probably something that I will be able to do, I changed my plans because it would have been be too time consuming.

But to not throw away any work done, I’ve re-packaged it in a simple extension, because all the current ones in the Extension Gallery are able or just to screenshot the visible area or they are too complex with annotations and such. With Blipshot, I tried to be as straightforward as possible: just one click.

Unfortunately again, while making screenshot was really easy, making whole-page screenshot was a bit harder due to limitations in the screenshot API (chrome.tabs.captureVisibleTab) and so the internals of this seemingly simple extension are quite complex due to all the workarounds I had to make (mostly, a ping-pong between the extension sandbox to do the work and the page sandbox to get the screenshot and move the page).

The source code is published on Github under an opensource BSD license.

Known issues: waiting for Google

There are unfortunately two annoyances that depend from Google’s progress on Chrome:

  1. If the page has an horizontal scrollbar the screenshot will be a bit screwed up. Same thing happens with “fixed” elements in page, since scrolling will keep them in the same position.
    I will be able to solve the problem once Google will implement Issue #45209.
    Please comment/vote there to get it done.
  2. Huge pages may crash the tab when you drag’n’drop the image on your desktop (big data urls >2M aren’t managed well by Chrome, I have a workaround in but it would be better to have a fix directly from Chrome).
    The problem will go away automatically once Google will solve Issue #69227.
    Please comment/vote there to get it done.
On the other side, one annoying bug has been already fixed by Google:
  1. Chrome have a bug for PNGs under Windows (the fonts are missing).
    Fixed in Issue #44758.

Changelog

  • 1.0.4 (20/02/2012)
    Reintroduced page names and timestamp on file names.
  • 1.0.3 (19/02/2012)
    Updated with a workaround for big images (thanks to @ble).
  • 1.0.2 (16/08/2010)
    First public release.