Draw Extension

index.js

if (chrome.tabs) {
  console.log("[XXXCUT] Background Script Loaded");
  const screen = async () => {
    console.log("here", chrome.tabs);
    const capture = chrome.tabs.captureVisibleTab({ format: "png" }, (data) => {
      console.log(data);
    });
    console.log(1, capture);
  };
  chrome.runtime.onMessage.addListener(screen);
} else {
  console.log("[XXXCUT] Content Script Loaded");
  const state = { gesture: false, line: "", brush: "black", radius: 2.5 };

  function trace(x, y, canvas) {
    const dot = document.createElement("div");
    Object.assign(dot.style, {
      position: "fixed",
      top: `${y - state.radius}px`,
      left: `${x - state.radius}px`,
      width: `${state.radius * 2}px`,
      height: `${state.radius * 2}px`,
      background: state.brush,
    });
    setTimeout(() => dot.remove(), 500);
    canvas.appendChild(dot);
  }

  function start(event) {
    state.gesture = true;
    state.line = `M${event.clientX},${event.clientY} `;
    event.preventDefault();
  }

  function move({ clientX, clientY }, canvas) {
    if (state.gesture === true) {
      state.line += `L${clientX},${clientY} `;
      trace(clientX, clientY, canvas);
    }
  }

  function end(event, svg) {
    state.gesture = false;
    state.line += `L${event.clientX},${event.clientY} `;
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    Object.entries({
      d: state.line,
      fill: "none",
      stroke: "red",
      "stroke-linecap": "round",
      "stroke-width": 2,
    }).forEach(([name, value]) => path.setAttributeNS(null, name, value));
    svg.appendChild(path);
    localStorage.setItem("svg", new XMLSerializer().serializeToString(svg));
    event.preventDefault();
  }

  const overlay = {
    position: "fixed",
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    width: "100%",
    height: "100%",
  };
  const canvas = document.body.appendChild(
    Object.assign(document.createElement("div"), { id: "XXXCUT" })
  );
  Object.assign(canvas.style, {
    ...overlay,
    display: "none",
    zIndex: 10 ** 10,
  });
  const svg = canvas.appendChild(
    document.createElementNS("http://www.w3.org/2000/svg", "svg")
  );
  Object.assign(svg.style, overlay);

  const listeners = {
    mousedown: (e) => start(e),
    mousemove: (e) => move(e, canvas),
    mouseup: (e) => {
      end(e, svg);
      chrome.runtime.sendMessage("XXXCUT");
    },
  };
  const touchlisteners = {
    touchstart: ({ touches: [e] }) => listeners.mousedown(e),
    touchmove: ({ touches: [e] }) => listeners.mousemove(e),
    touchend: ({ changedTouches: [e] }) => listeners.mouseup(e),
  };

  const toggle = () => {
    const disabled = canvas.style.display === "none";
    Object.assign(canvas.style, {
      display: disabled ? "block" : "none",
    });
    Object.entries({
      ...listeners,
      ...touchlisteners,
    }).map(([type, listener]) =>
      disabled
        ? document.addEventListener(type, listener)
        : document.removeEventListener(type, listener)
    );
  };

  document.addEventListener("keydown", (event) => {
    if ((event.ctrlKey || event.metaKey) && event.code === "KeyD") {
      toggle();
      event.preventDefault();
    }
  });
}