Create your own website screenshot server

... only with firefox, no other software is required

For some applications it's necessary, useful or only a nice feature to display screenshots/thumbnails of websites.

Mostly it's not very easy or comfortable to setup a server that can take a screenshot of any website you want and return the result as a image.

I found a very simple solution with firefox which can be run on every operation system firefox supports.

What you need

Firefox 3 (maybe other versions also work, I use 3.0.10)
MozRepl (Firefox extension)
Screengrab (Firefox extension)

Thats it!

Start to setup

First install Firefox and the 2 extensions.

Now it's time to setup MozRepl.

Click on the menubar on Tools => MozRepl
then activate the 2 entries Activate on startup and Allow outside connections.

Then it should look like this:

If everything looks like the screen above, you can continue with this:

Create a new textfile with your favourite texteditor (nano, notepad, ...), and copy the following script into the file. Now save the script anywhere on the filesystem and remember the path, you'll need him later. I put my script at this location: /usr/local/firefox/moz-repl.js in the following steps replace this path with yours. On a Windows system your path of course looks like this: C:\firefox\moz-repl.js

repl.home().screenshot = {};
repl.home().screenshot.Action = function() {}
repl.home().screenshot.Action.prototype = {
	doAction: function(canvas) {}
}

repl.home().screenshot.HttpAction = function() {}
repl.home().screenshot.HttpAction.prototype = {
	doAction: function(canvas) {		
		repl.onOutput('HTTP/1.1 200 OK\r\n' + 'Content-Type: image/png\r\n' + '\r\n' + atob(canvas.toDataURL('image/png', '').split(',')[1]));
	}
}

defineInteractor('screenshot', {
    handleInput: function(repl, input) {

        function parseHTTPRequest(request) {
            return request
                .split(/[\r\n]+/)[0] 
                .split(/\s+/); 
        }

        var input = input.replace(/^\s+|\s+$/g, '');

        var [verb, path, protocolVersion] = parseHTTPRequest(input);
        if(verb != 'GET')
            return;

        var browserWindow = Cc['@mozilla.org/appshell/window-mediator;1']
            .getService(Ci.nsIWindowMediator)
            .getMostRecentWindow('navigator:browser');
        var tabbrowser = browserWindow.getBrowser();

        var canvas = browserWindow.document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
        var tab = tabbrowser.addTab();
        var browser = tabbrowser.getBrowserForTab(tab);
		
		var delay = 0;
		var delayUri = path.match(/\/delay_([0-9])\//)[1];
		if(parseInt(delayUri) > 0) {
			delay = parseInt(delayUri);
		}
		delay *= 1000;
		
		var url = decodeURIComponent(path.match(/\/url\/(.*$)/)[1]); 
		
        browser.addEventListener('load', function() {
			repl.home().gBrowser.selectedTab = tab;
			browser.contentWindow.setTimeout(function () { 
				
				var homie = repl.home();
				homie.screengrab.Grab(new homie.screengrab.FrameTarget(), homie.screengrab.CaptureViewPort, new homie.screenshot.HttpAction());
				
				tabbrowser.removeTab(tab);
				repl.quit();
										   
			},delay);
			
            
        }, true);

        browser.loadURI(url);		
    },

    onStart: function(repl) {},

    onStop: function(repl) {},

    getPrompt: function(repl) {},
});

Now type about:config into the navigation bar of firefox. Maybe there is a warning, in this case confirm that you're know what you are doing. After this type mozrepl into the filter input field.

Double click on extensions.mozrepl.defaultInteractor then type screenshot into the prompt which is opened.

Then double click on extensions.mozrepl.initUrl and type the path to the scriptfile above as a file URI into the input field.

In my case this is file:///usr/local/firefox/moz-repl.js on Windows systems this would look like this file:///C:/firefox/moz-repl.js

When you're finished your config should look like this:

Testing the server

Now the setup is complete, an we can test our new server.

First restart firefox.

Then start a browser on an other machine which can access the screenshot-server.

Type into the navigation bar:

http://IP_OF_YOUR_SERVER:4242/screenshot/delay_5/url/http://www.betalon.com/

Replace IP_OF_YOUR_SERVER with the IP of your server :)

In my case this is: http://192.168.0.156:4242/screenshot/delay_5/url/http://www.betalon.com/

Now in a few seconds a screen of my blog should appear in the browser, congratulations the server works!

With the parameter delay you can specify the time in seconds to wait after the load event fires to take the screenshot. This is cool for flash or java elements which are not recognized by the load handler.

Example for delayed shot:

http://SERVER_IP:4242/screenshot/delay_15/url/http://www.google.com
wait 15 seconds after page is loaded and take then the shot

http://SERVER_IP:4242/screenshot/delay_4/url/http://www.google.com wait 4 seconds

Thanks for this great walkthrough/tutorial. Tried it on both OSX and Ubuntu and it works great, except for the delay which only works with the standard \"delay_5\" for some reason. Anything else, like delay_10 just results in an empty page. But I think I can figure it out from there. Thanks again!

May be I dont know how to install it, but I cant install the mozrepl ext., it says \"Firefox could not install the file at file:///C:/Program Files/Mozilla%20Firefox/extensions/bard-mozrepl-a009edf.xpi\" because: Install script not found -204.

Can you tell me whats going on or what should I try to fix that issue (maybe some way to \"hard\" install the extension).

I figured out how to Install it, and it works nice, but that delay thing is a problem (specially on big loads), another problem that I found is that it gets stuck on websites with flash(Solution: install Flashblock extension) the problem with this is that some sites must show flash elements because if you block them it looks weird, it just changes the way a site looks and our end for setting up a screenshot server is to show the visitor how the site will look before he gets in.

betalon.com - simply webdevelopment