Skip to content

Instantly share code, notes, and snippets.

@christianalfoni
Created November 10, 2020 10:41
Show Gist options
  • Save christianalfoni/7f4e8c299085305d7d1a573a96429cca to your computer and use it in GitHub Desktop.
Save christianalfoni/7f4e8c299085305d7d1a573a96429cca to your computer and use it in GitHub Desktop.
element-capture
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;
});
});
}
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" });
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment