first commit

GitHub Desktop-dev/extensions/idikgljglpfilbhaboonnpnnincjhjkd/tracer/png_tab_path.js

@@ -0,0 +1,10 @@
+html2canvas(document.body).then(function(canvas) {
+  canvas.toBlob(function(blob) {
+    var a = document.createElement('a');
+    var url = URL.createObjectURL(blob);
+    a.href = url;
+    a.download = 'png.png';
+    a.click();
+    window.URL.revokeObjectURL(url);
+  })
+});

GitHub Desktop-dev/extensions/idikgljglpfilbhaboonnpnnincjhjkd/tracer/trace_tab_path.js

@@ -0,0 +1,88 @@
+// 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);
+    }
+};