Save parts of screen using Chrome extension

background.html

<script>

var Constants = {
	saveURL: 'http://random/birthday/saveimage.php',
	w: 500,
	h: 500,
	x: 200,
	y: 200
};

function cropData(str, coords, callback) {
	var img = new Image();
	
	img.onload = function() {
		var canvas = document.createElement('canvas');
		canvas.width = coords.w;
		canvas.height = coords.h;
	
		var ctx = canvas.getContext('2d');
	
		ctx.drawImage(img, coords.x, coords.y, coords.w, coords.h, 0, 0, coords.w, coords.h);
		
		var fd = new FormData();
		fd.append('image', dataURItoBlob(canvas.toDataURL()));
		
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function() {
			if ( xhr.readyState == 4 ) {
				callback();
			}
		}
		
		xhr.open('POST', Constants.saveURL);
		xhr.send(fd);
	};
	
	img.src = str;
}

function capture(coords) {
	chrome.tabs.captureVisibleTab(null, {format: "png"}, function(data) {
		cropData(data, coords, function() {
			console.log("Done");
		});
	});
}

chrome.browserAction.onClicked.addListener(function() {
	sendMessage({type: 'start-screenshots'});
});

chrome.extension.onRequest.addListener(gotMessage);

function gotMessage(request, sender, sendResponse) {
	if (request.type == "coords")
		capture(request.coords);

	sendResponse({}); // snub them.
}

function sendMessage(msg) {
	chrome.tabs.getSelected(null, function(tab) {
		chrome.tabs.sendRequest(tab.id, msg, function(response) {});
	});
};

// --
// Library things
// --

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var bb;
    if ( typeof BlobBuilder != 'undefined' )
    	bb = new BlobBuilder();
    else
    	bb = new WebKitBlobBuilder();
    bb.append(ab);
    return bb.getBlob(mimeString);
}


</script>

content.js

// 
// messages
//

chrome.extension.onRequest.addListener(gotMessage);

function gotMessage(request, sender, sendResponse) {
	if (request.type == "start-screenshots")
		startScreenshot();
	
	sendResponse({});
}

function startScreenshot() {
	document.addEventListener('mousedown', mouseDown, false);
	document.addEventListener('keydown', keyDown, false);
}

function endScreenshot(coords) {
	document.removeEventListener('mousedown', mouseDown, false);
	
	sendMessage({type: 'coords', coords: coords});
}

function sendMessage(msg) {
	chrome.extension.sendRequest(msg, function(response) {});
};

// 
// end messages
//

var ghostElement, startPos, gCoords;

function keyDown(e) {
	var keyCode = e.keyCode;
	
	// Hit: n
	if ( keyCode == '78' && gCoords ) {
		e.preventDefault();
		e.stopPropagation();
		
		endScreenshot(gCoords);
		
		return false;
	}
}

function mouseDown(e) {
	e.preventDefault();

	startPos = {x: e.pageX, y: e.pageY};
	
	ghostElement = document.createElement('div');
	ghostElement.style.background = 'blue';
	ghostElement.style.opacity = '0.1';
	ghostElement.style.position = 'absolute';
	ghostElement.style.left = e.pageX + 'px';
	ghostElement.style.top = e.pageY + 'px';
	ghostElement.style.width = "0px";
	ghostElement.style.height = "0px";
	ghostElement.style.zIndex = "1000000";
	document.body.appendChild(ghostElement);
	
	document.addEventListener('mousemove', mouseMove, false);
	document.addEventListener('mouseup', mouseUp, false);
	
	return false;
}

function mouseMove(e) {
	e.preventDefault();

	var nowPos = {x: e.pageX, y: e.pageY};
	var diff = {x: nowPos.x - startPos.x, y: nowPos.y - startPos.y};
	
	ghostElement.style.width = diff.x + 'px';
	ghostElement.style.height = diff.y + 'px';
	
	return false;
}

function mouseUp(e) {
	e.preventDefault();
	
	var nowPos = {x: e.pageX, y: e.pageY};
	var diff = {x: nowPos.x - startPos.x, y: nowPos.y - startPos.y};

	document.removeEventListener('mousemove', mouseMove, false);
	document.removeEventListener('mouseup', mouseUp, false);
	
	ghostElement.parentNode.removeChild(ghostElement);
	
	setTimeout(function() {
		var coords = {
			w: diff.x,
			h: diff.y,
			x: startPos.x,
			y: startPos.y
		};
		gCoords = coords;
		endScreenshot(coords);
	}, 50);
	
	return false;
}

manifest.json

{
	"name": "Super Happy Fun Tests",
	"version": "1.0.0",
	
	"description": "Have a super happy fun time.",
	"icons": {
		"128": "Icon.png"
	},
	
	"browser_action": {
		"default_title": "",
		"default_icon": "Icon.png"
	},
	
	"content_scripts": [
		{
			"matches": ["http://*/*", "https://*/*"],
			"js": ["content.js"]
		}
	],
	
	"background_page": "background.html",
	"options_page": "options.html",
	
	"permissions": [
		"tabs",
		"http://*/*",
		"https://*/*",
		"chrome://*",
		"chrome://favicon/",
		"contextMenus"
	]
}