element-capture

background.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  console.log("request type", request.type)
    if (request.type === "enable") {
        chrome.pageAction.show(sender.tab.id);
    }
    else if (request.type === "up") {
        capture(sender.tab.id, request.dimensions);
    }

    sendResponse({});
    function send(request) {
        chrome.tabs.sendMessage(sender.tab.id, request, function(response) {});
    }
});

chrome.pageAction.onClicked.addListener(function onClicked(tab) {
    chrome.tabs.sendMessage(tab.id, { type: "start" }, function(response) {});
});

chrome.commands.onCommand.addListener(function(command) {
  if (command === 'take-screenshot') {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var currTab = tabs[0];
      if (currTab) { // Sanity check
        chrome.tabs.sendMessage(currTab.id, { type: 'start' }, function(response) {});
      }
    });
  }
});

var canvas = null;
function capture(tabId, dimensions) {
    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
                );
                var croppedDataUrl = canvas.toDataURL("image/png");
                chrome.tabs.create({
                    url: croppedDataUrl,
                    windowId: tab.windowId
                });
            }
            image.src = dataUrl;
        });
    });
}

contentscript.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type === "start") {
        start();
    }
    sendResponse({});
});

function send(request) {
    chrome.extension.sendMessage(request, function(response) {});
}

var BORDER_THICKNESS = 4;
var overlay, outline;

function start() {
  const iframe = document.querySelector('#sandbox-preview')
  const dimensions = iframe.getBoundingClientRect()
  console.log("dim", {
    top: dimensions.top,
    left: dimensions.left,
    width: dimensions.width,
    height: dimensions.height
  })
  send({ type: "up", dimensions: {
    top: Math.round(dimensions.top) + 20,
    left: Math.round(dimensions.left) + 150,
    width: Math.round(dimensions.width) + 150,
    height: Math.round(dimensions.height)
  }})
}

send({ type: "enable" });

manifest.json

{
    "name": "Element Capture",
    "version": "1.1",
    "manifest_version": 2,
    "description": "Screen capture any element on a webpage.",
    "page_action": {
        "default_icon": "icon48.png"
    },
    "permissions": [
	    "activeTab"
    ],
    "commands": {
      "take-screenshot": {
        "suggested_key": {
          "default": "Ctrl+Shift+S",
          "mac": "Command+Shift+S"
        },
        "description": "Take screenshot"
      }
    },
    "background": {
      "persistent": true,
        "scripts": ["background.js"]
    },
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["contentscript.js"],
        "run_at": "document_idle",
        "all_frames": false
    }],
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    }
}