Google spreadsheet image link context menu

google-spreadsheet-image-context-menu-link.user.js

// ==UserScript==
// @name           Google SpreadSheet Image Context Menu Link
// @include        https://docs.google.com/spreadsheets/*
// @version        4
// @downloadURL    https://gist.github.com/foriequal0/9e7e3c36f6596fd2561b1ca72b71c2a1/raw/google-spreadsheet-image-context-menu-link.user.js
// ==/UserScript==

// TODO : 셀 채우기로 삽입된 그림 우클릭 인식.

function getTrustedTypes() {
    if (typeof trustedTypes !== 'undefined') {
        return trustedTypes;
    }

    // Trusted Types API 는 2024-01-22 일 최신 상태가 "Editor’s Draft, 19 January 2024" 이고,
    // 그래서 구글이 주도해서 Chromium 계열 브라우저에만 구현 된 상태 (e.g. Firefox, Safari)
    // https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML#browser_compatibility
    // 그래서 해당 플랫폼에서는 mock 으로 대충 때움.
    return {
        createPolicy(name, options) {
            return options;
        }
    }
}

const dummyTrustedTypePolicy = getTrustedTypes().createPolicy("dummy", {
    createHTML: str => str,
});

addEventListener('contextmenu', (event) => {
  const target = event.target;
  if (!(target instanceof HTMLImageElement)) {
    return;
  }

  const parent = target.parentElement;
  if (!parent.classList.contains("waffle-borderless-embedded-object-container")) {
    return;
  }

  const existing = parent.querySelector(".image-link-hover")
  if (existing) {
    parent.removeChild(existing);
  }

  const div = document.createElement("div");
  div.classList.add("image-link-hover");
  div.style = `
position: absolute;
top: ${event.layerY}px;
left: ${event.layerX}px;
background: white;
padding: 0.75em 1em;
border-radius: 1em;
box-shadow: 0 0 1em;
z-index: 0;
`;
  div.innerHTML = dummyTrustedTypePolicy.createHTML(`
<a href="${target.src}" target="_blank">link</a>
`);

  const inner = document.createElement("div");
  inner.style = `
position: absolute;
top: -1em;
left: -1em;
width: calc(100% + 2em);
height: calc(100% + 2em);
z-index: -1;
`;
  div.appendChild(inner);

  let timer = null;
  div.addEventListener("mouseleave", () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    timer = setTimeout(() => { parent.removeChild(div); timer = null; }, 500);
  });
  div.addEventListener("mouseenter", () => {
    if (!timer) {
      return;
    }

    clearTimeout(timer);
    timer = null;
  });

  parent.appendChild(div);
});


addEventListener("mouseup", (event) => {
  if (event.button != 1) {
    return;
  }

  const target = event.target;
  if (!(target instanceof HTMLImageElement)) {
    return;
  }

  const parent = target.parentElement;
  if (!parent.classList.contains("waffle-borderless-embedded-object-container")) {
    return;
  }

  window.open(target.src);
});

innerHTML 을 직집 입력하는게 막혔네요

const aTag = document.createElement('a');
aTag.href = target.src;
aTag.target = "_blank";
aTag.textContent = "link";
div.appendChild(aTag);

https://developer.mozilla.org/en-US/docs/Web/API/TrustedTypePolicy/createHTML
이걸 적용했는데요
음 이건 Firefox 에서 안먹는군요.