Chrome extension - Simple code to make screenshot of page element

Hello.
Here is code, that makes screenshot of element of the page:
In the injected to the page javascript file:
var dimensions = {};

var productElement = $(".shipping-section").first();
var position = $(productElement).position();

dimensions.width = $(productElement).outerWidth();
dimensions.height = $(productElement).outerHeight();
dimensions.top = $(productElement).offset().top; //get the offset top of the productElement
dimensions.left = $(productElement)[0].getBoundingClientRect().left + $(window)['scrollLeft']();

$(window).scrollTop(dimensions.top);
dimensions.top = 0;

chrome.runtime.sendMessage({
      from : 'makeScreenshotOfBaseTrackingInfoStep2',				
      dimensions : dimensions
});
And in the background.js file:
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {

    if (request.from == 'makeScreenshotOfBaseTrackingInfoStep2') {
        var tabId = request.tabId;
        var dimensions = request.dimensions;

        captureV2(tabId, dimensions);
    }

}


function captureV2(tabId, dimensions) {

	// Activate the target tab
	chrome.tabs.update(tabId, {
		'active' : true
	}, function () {});

	var croppedDataUrl;

	chrome.tabs.get(tabId, function (tab) {
		chrome.tabs.captureVisibleTab(tab.windowId, {
			format : "png"
		}, function (dataUrl) {
			if (!canvas) {
				canvas = document.createElement("canvas");
				document.body.appendChild(canvas);
			}
			var image = new Image();
			image.onload = function () {
				canvas.width = dimensions.width;
				canvas.height = dimensions.height;
				var context = canvas.getContext("2d");
				context.drawImage(image,
					dimensions.left, dimensions.top,
					dimensions.width, dimensions.height,
					0, 0,
					dimensions.width, dimensions.height);
				croppedDataUrl = canvas.toDataURL("image/png");
				 chrome.tabs.create({
             url : croppedDataUrl,
             windowId : tab.windowId
				 });		

			}			
			image.src = dataUrl;

		});
	});

}