89 lines
2.0 KiB
JavaScript
Executable File
89 lines
2.0 KiB
JavaScript
Executable File
// Delete any applied filters
|
|
delete document.body.style.filter;
|
|
delete document.body.style.webkitFilter;
|
|
|
|
var body = document.body;
|
|
var html = document.documentElement;
|
|
|
|
function drawLine(ctx, x, y) {
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawDot(ctx, x, y) {
|
|
ctx.arc(x, y, 3, 0, 2 * Math.PI, false);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function getCoordinates(elem) {
|
|
var box = elem.getBoundingClientRect();
|
|
var body = document.body;
|
|
var docEl = document.documentElement;
|
|
var halfWidth = box.width / 2;
|
|
var halfHeight = box.height / 2;
|
|
|
|
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
|
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
|
|
|
var clientTop = docEl.clientTop || body.clientTop || 0;
|
|
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
|
|
|
var top = box.top + scrollTop - clientTop;
|
|
var left = box.left + scrollLeft - clientLeft;
|
|
|
|
return {
|
|
top: Math.round(top + halfHeight),
|
|
left: Math.round(left + halfWidth)
|
|
};
|
|
}
|
|
|
|
var height = Math.max(
|
|
body.scrollHeight,
|
|
body.offsetHeight,
|
|
html.clientHeight,
|
|
html.scrollHeight,
|
|
html.offsetHeight
|
|
);
|
|
|
|
var width = Math.max(
|
|
body.scrollWidth,
|
|
body.offsetWidth,
|
|
html.clientWidth,
|
|
html.scrollWidth,
|
|
html.offsetWidth
|
|
);
|
|
|
|
var canvas = document.createElement("canvas");
|
|
canvas.id = 'chrome-lens-canvas';
|
|
canvas.style.pointerEvents = 'none';
|
|
canvas.style.top = 0;
|
|
canvas.style.left = 0;
|
|
canvas.height = height;
|
|
canvas.width = width;
|
|
canvas.style.position = 'absolute';
|
|
canvas.style.zIndex = 2147483647;
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.strokeStyle = 'red';
|
|
ctx.lineWidth = 2;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 0);
|
|
|
|
if (document.activeElement !== document.body) {
|
|
const { top: y, left: x } = getCoordinates(document.activeElement);
|
|
drawLine(ctx, x, y);
|
|
}
|
|
|
|
document.body.appendChild(canvas);
|
|
|
|
document.body.onkeyup = function (e) {
|
|
e = e || window.event;
|
|
if (e.keyCode === 9) {
|
|
// Tab
|
|
const { top: y, left: x } = getCoordinates(e.target);
|
|
drawLine(ctx, x, y);
|
|
drawDot(ctx, x, y);
|
|
}
|
|
};
|