gyazoにテキストを埋め込んで表示するTamperMonkeyUserScript

code:gyazo.user.js

// ==UserScript==

// @name gyazo-text-layer

// @version 0.1.0

// @description gyazoにテキストを埋め込んで表示するTamperMonkeyUserScript

// @author takker

// @license MIT

// @copyright Copyright (c) 2023 takker

// ==/UserScript==

const makeStyle = () => {

const id = "gyazo-layer-style";

const styleEl = document.getElementById(id);

if (styleEl) return styleEl;

const style = document.createElement("style");

style.id = id;

style.textContent = '.image-box-component picture{position:relative}#textLayer{position:absolute;height:var(--image-height);line-height:1.0;}#textLayer span{color: transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%;}';

document.head.append(style);

return style;

};

const render = ({ metadata, scale }) => {

const id = "textLayer";

document.getElementById(id)?.remove?.();

const image = document.querySelector("img.image-viewer");

const textLayer = document.createElement("div");

textLayer.id = id;

textLayer.addEventListener("click", (e) => {

if (globalThis.getSelection().getRangeAt(0).commonAncestorContainer === textLayer) return;

e.stopPropagation();

e.preventDefault();

image.click();

});

const pageWidth = scale.width * scale.scale;

const pageHeight = scale.height * scale.scale;

for (const { description, boundingPoly: { vertices } } of metadata.ocrAnnotations) {

const span = document.createElement("span");

span.textContent = description;

textLayer.append(span);

}

const handleResize = (rect) => {

};

const observer = new ResizeObserver(

);

handleResize(image.getBoundingClientRect());

observer.observe(image);

image.insertAdjacentElement("afterend", textLayer);

};

const callback = async () => {

makeStyle();

const json = await res.json();

// 画像が表示されるまで待機

await new Promise((res) => {

const timer = setInterval(() => {

if (!document.querySelector("img.image-viewer")) return;

clearInterval(timer);

res();

}, 100);

});

render(json);

};

globalThis.addEventListener("load", () => {

callback();

let prevURL = location.href;

setInterval(() => {

if (prevURL === location.href) return;

prevURL = location.href;

callback();

}, 1000);

});

文字が画像と一致していないのが微妙

フォントの食い違いは仕方ないけど

https://gyazo.com/3325de927b34fcaff820403ffd40ece9

改行を入れたい