Davide Casali = Folletto Malefico: Hybrid Interaction Designer = Design × Psychology × Technology / Simplicity × Complexity

∞

Blipshot: real one-click screenshots for Google Chrome

If you need a simple extension to make screenshot with Google Chrome, Blipshot is for you: real one-click whole-page screenshot.

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

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

Revo:

When capturing image everything is nice but when I try to save that image I have only Copy option (right click) and if I try drag&drop captured image the Chrome shows blue screen and says "Aw, Snap!". This happens on my both Macs....

Majid:

Thank you for sharing this great extension, it is really awesome.

I wonder if it could easily be changed to suite my needs. What I want to do with the extension is to be able to invoke it with a function like saveshot(path) which would (1) take the screenshot, (2) save the file to the path I am passing to the function. The path will be something like 'c:/shots/37.png'.

I would be greatful if you could provide some advise as to how to attempt this.

Thanks

Davide 'Folletto' Casali:

I think that the problem lies in the sandboxing of Chrome here, because from an extension like this one it's not possible, as far as I know, to interact with the filesystem at all.

Majid:

Thanks for the quick response.

I worked around the save issue. I added the following right before images[i].src = imageDataURLs[i]; in screenshotter.js:


xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","http://localhost/imgsave.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("imgPath=img37.png&imgData=" + imageDataURLs[i]);

The file is saved with the help of imgsave.php which does:

$imgData = $_REQUEST['imgData'];
$imgPath = $_REQUEST['imgPath'];
file_put_contents($imgPath, $imgData);

Now, I am just in need of a way to invoke the screen capture from a javascript function in my page. As it could be seen, I am hardcoding the filename (img37.png) in the code above. If I can fire the action from a function, then I'd be also able to pass a filename for the image to be saved with.

Is this possible?

Davide 'Folletto' Casali:

A ha, you are using a post. Ok, then. You should be able to do that from the function that actually invokes the call. Why don't you just generate it on server side? Given the POST, it should be easier - and if I guess what you are doing, more useful, no? Maybe add the current URL, so you can generate the name starting from that, and recording the URL as well. :)

Majid:

I am developing a PHP webapp and one of the things I need in it is to take a screenshot of the page and send it to the server. That why I am using your extension.

I was kind of pressed for time and thus I also posted a question on Stackoverflow regarding this possibility.

I got two promising answers there. The Q&A is here:
http://stackoverflow.com/questions/7597310/invoking-a-google-chrome-extension-from-javascript/7597904

I am having another problem now: What I send to the server is the base64 src of the image taken from imageDataURLs[i]) I don'y know why, but the string that is sent to the server does is not actually the complete src. Any clues? As I said I am getting the src just before imageDataURLs[i]) in screenshotter.js (line 131); is this the correct place to get the data, oris it only partial data I would have in that point in the script?

Gruntfuggly:

Hi - great extension - nice and simple. Many thanks!

One problem I've found is that if you take a screenshot of the window when it's already displaying a screenshot you can't close it again...

Do you have something to say? Please add it here:

(optional)