GitHub README Image Viewer

Preview GitHub markdown images in a viewer with switching, wheel zoom, and drag pan.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         GitHub README Image Viewer
// @namespace    https://github.com/
// @version      1.0.4
// @description  Preview GitHub markdown images in a viewer with switching, wheel zoom, and drag pan.
// @author       Tommy
// @match        https://github.com/*
// @run-at       document-idle
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  const ROOT_SELECTORS = [
    'article.markdown-body',
    '.markdown-body',
    '.js-comment-body',
    '[data-testid="markdown-body"]'
  ];

  const BADGE_HOSTS = [
    'shields.io',
    'badgen.net',
    'badge.fury.io',
    'poser.pugx.org',
    'nodei.co'
  ];
  const BADGE_TEXT_PATTERN = /(?:badge|shield|build|status|ci|coverage|version|license|npm|pypi|downloads|release|codecov|coveralls|sonarcloud|quality|dependencies|dependabot)/i;

  const PREVIEW_MIN_DIMENSION = 100;
  const MIN_SCALE = 0.2;
  const MAX_SCALE = 8;
  const ZOOM_STEP = 1.16;

  let imageItems = [];
  let currentIndex = 0;
  let viewer = null;
  let scanTimer = 0;
  let previousBodyOverflow = '';
  let state = {
    scale: 1,
    x: 0,
    y: 0,
    dragging: false,
    dragStartX: 0,
    dragStartY: 0,
    startX: 0,
    startY: 0
  };

  const styleText = `
    .ghiv-ready { cursor: zoom-in !important; }
    .ghiv-overlay {
      position: fixed;
      inset: 0;
      z-index: 2147483647;
      display: none;
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      gap: 10px;
      box-sizing: border-box;
      padding: 16px;
      color: #f0f6fc;
      background: rgba(1, 4, 9, 0.82);
      backdrop-filter: blur(10px);
      font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .ghiv-overlay.ghiv-open { display: grid; }
    .ghiv-toolbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
    }
    .ghiv-counter {
      min-width: 88px;
      text-align: center;
      color: #c9d1d9;
      font-variant-numeric: tabular-nums;
    }
    .ghiv-nav-btn {
      position: fixed;
      top: 50%;
      z-index: 1;
      width: 56px;
      height: 72px;
      border: 1px solid rgba(240, 246, 252, 0.22);
      border-radius: 8px;
      padding: 0;
      display: grid;
      place-items: center;
      color: #f0f6fc;
      background: rgba(48, 54, 61, 0.78);
      font: 42px/1 Georgia, "Times New Roman", serif;
      cursor: pointer;
      transform: translateY(-50%);
      user-select: none;
    }
    .ghiv-nav-prev { left: 18px; }
    .ghiv-nav-next { right: 18px; }
    .ghiv-nav-btn:hover {
      border-color: rgba(88, 166, 255, 0.78);
      background: rgba(56, 139, 253, 0.28);
      color: #fff;
    }
    .ghiv-btn, .ghiv-link {
      height: 32px;
      min-width: 32px;
      border: 1px solid rgba(240, 246, 252, 0.22);
      border-radius: 6px;
      padding: 0 10px;
      color: #f0f6fc;
      background: rgba(48, 54, 61, 0.88);
      text-decoration: none;
      cursor: pointer;
      user-select: none;
    }
    .ghiv-btn:hover, .ghiv-link:hover {
      border-color: rgba(88, 166, 255, 0.7);
      background: rgba(56, 139, 253, 0.24);
      color: #fff;
      text-decoration: none;
    }
    .ghiv-stage {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      display: grid;
      place-items: center;
      border-radius: 8px;
    }
    .ghiv-image {
      max-width: calc(100vw - 160px);
      max-height: calc(100vh - 190px);
      transform-origin: center center;
      transition: transform 90ms ease-out;
      cursor: grab;
      user-select: none;
      -webkit-user-drag: none;
      box-shadow: 0 18px 80px rgba(0, 0, 0, 0.45);
    }
    .ghiv-dragging .ghiv-image {
      cursor: grabbing;
      transition: none;
    }
    .ghiv-caption {
      min-height: 18px;
      max-width: min(100%, 980px);
      justify-self: center;
      color: #c9d1d9;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ghiv-strip {
      display: flex;
      gap: 8px;
      min-height: 54px;
      max-width: 100%;
      overflow-x: auto;
      padding: 2px 2px 8px;
      justify-self: center;
    }
    .ghiv-thumb {
      width: 56px;
      height: 42px;
      flex: 0 0 auto;
      border: 2px solid transparent;
      border-radius: 6px;
      padding: 0;
      background: rgba(48, 54, 61, 0.72);
      cursor: pointer;
      overflow: hidden;
    }
    .ghiv-thumb[aria-current="true"] { border-color: #58a6ff; }
    .ghiv-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
    .ghiv-hint {
      justify-self: center;
      color: #8b949e;
      font-size: 12px;
      text-align: center;
    }
    @media (max-width: 720px) {
      .ghiv-overlay { padding: 10px; gap: 8px; }
      .ghiv-toolbar { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
      .ghiv-nav-btn { width: 44px; height: 58px; font-size: 34px; }
      .ghiv-nav-prev { left: 8px; }
      .ghiv-nav-next { right: 8px; }
      .ghiv-image { max-width: calc(100vw - 24px); max-height: calc(100vh - 184px); }
      .ghiv-caption { max-width: calc(100vw - 24px); }
    }
  `;

  addStyle(styleText);
  scheduleScan();
  observeGitHubNavigation();
  document.addEventListener('click', onDocumentClick, true);
  document.addEventListener('keydown', onKeyDown, true);

  function addStyle(css) {
    if (typeof GM_addStyle === 'function') {
      GM_addStyle(css);
      return;
    }

    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);
  }

  function observeGitHubNavigation() {
    ['turbo:load', 'turbo:render', 'pjax:end'].forEach((eventName) => {
      document.addEventListener(eventName, scheduleScan);
    });

    const observer = new MutationObserver((mutations) => {
      const hasPageChange = mutations.some((mutation) => {
        if (isViewerNode(mutation.target)) return false;
        return Array.from(mutation.addedNodes).some((node) => !isViewerNode(node));
      });

      if (hasPageChange) {
        scheduleScan();
      }
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });
  }

  function scheduleScan() {
    window.clearTimeout(scanTimer);
    scanTimer = window.setTimeout(scanImages, 120);
  }

  function scanImages() {
    imageItems = collectImages();
    imageItems.forEach((item) => {
      item.img.classList.add('ghiv-ready');
      if (!item.img.title) {
        item.img.title = '点击预览图片';
      }
    });

    if (viewer && viewer.root.classList.contains('ghiv-open')) {
      renderThumbs();
      updateCounter();
    }
  }

  function collectImages() {
    const nodes = new Set();

    ROOT_SELECTORS.forEach((selector) => {
      document.querySelectorAll(`${selector} img`).forEach((img) => nodes.add(img));
    });

    return Array.from(nodes)
      .filter(isPreviewableImage)
      .map((img) => {
        const src = normalizeUrl(img.currentSrc || img.src || img.getAttribute('src') || img.dataset.canonicalSrc || '');
        const original = normalizeUrl(img.dataset.canonicalSrc || src);
        return {
          img,
          src,
          original,
          alt: (img.getAttribute('alt') || img.getAttribute('aria-label') || '').trim()
        };
      })
      .filter((item) => item.src);
  }

  function isPreviewableImage(img) {
    if (!(img instanceof HTMLImageElement)) return false;
    if (!isInsideMarkdown(img)) return false;
    if (img.closest('g-emoji, .emoji, .avatar, .octicon, .reaction-summary-item')) return false;

    const src = img.currentSrc || img.src || img.getAttribute('src') || img.dataset.canonicalSrc || '';
    if (!src || src.startsWith('data:')) return false;

    const rect = img.getBoundingClientRect();
    const width = img.naturalWidth || img.width || rect.width;
    const height = img.naturalHeight || img.height || rect.height;

    if (width < PREVIEW_MIN_DIMENSION || height < PREVIEW_MIN_DIMENSION) return false;
    if (rect.width === 0 && rect.height === 0) return false;
    if (isBadgeImage(img, src, width, height)) return false;

    return true;
  }

  function isInsideMarkdown(element) {
    return ROOT_SELECTORS.some((selector) => Boolean(element.closest(selector)));
  }

  function normalizeUrl(value) {
    if (!value) return '';
    try {
      return new URL(value, location.href).href;
    } catch (_) {
      return value;
    }
  }

  function isBadgeImage(img, src, width, height) {
    const link = img.closest('a');
    const href = link ? normalizeUrl(link.getAttribute('href') || '') : '';
    const alt = img.getAttribute('alt') || '';
    const title = img.getAttribute('title') || '';
    const text = `${src} ${href} ${alt} ${title}`;
    const badgeShape = width <= 260 && height <= 42;

    try {
      const url = new URL(src, location.href);
      const host = url.hostname.toLowerCase();
      const path = url.pathname.toLowerCase();

      if (BADGE_HOSTS.some((badgeHost) => host === badgeHost || host.endsWith(`.${badgeHost}`))) {
        return true;
      }

      if (/\/actions\/workflows\/[^/]+\/badge\.svg$/i.test(path)) {
        return true;
      }

      if (path.endsWith('/badge.svg') && badgeShape) {
        return true;
      }
    } catch (_) {
      // Fall through to the text and shape heuristic below.
    }

    return badgeShape && BADGE_TEXT_PATTERN.test(text);
  }
  function isViewerNode(node) {
    if (!viewer || !node) return false;
    if (node === viewer.root) return true;
    if (node instanceof Node && viewer.root.contains(node)) return true;
    return false;
  }

  function onDocumentClick(event) {
    const target = event.target instanceof Element ? event.target : null;
    const img = target ? target.closest('img') : null;

    if (!img || !isInsideMarkdown(img)) return;
    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;

    scanImages();
    const index = imageItems.findIndex((item) => item.img === img);
    if (index < 0) return;

    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    openViewer(index);
  }

  function ensureViewer() {
    if (viewer) return viewer;

    const root = document.createElement('div');
    root.className = 'ghiv-overlay';
    root.setAttribute('role', 'dialog');
    root.setAttribute('aria-modal', 'true');
    root.setAttribute('aria-label', 'GitHub 图片预览');
    root.tabIndex = -1;

    root.innerHTML = `
      <div class="ghiv-toolbar">
        <div class="ghiv-counter">0 / 0</div>
        <button class="ghiv-btn" type="button" data-action="zoom-out" aria-label="缩小">−</button>
        <button class="ghiv-btn" type="button" data-action="fit" aria-label="适应窗口">适应</button>
        <button class="ghiv-btn" type="button" data-action="zoom-in" aria-label="放大">＋</button>
        <a class="ghiv-link" target="_blank" rel="noopener noreferrer" data-role="open-original">原图</a>
        <button class="ghiv-btn" type="button" data-action="close" aria-label="关闭">×</button>
      </div>
      <button class="ghiv-nav-btn ghiv-nav-prev" type="button" data-action="prev" aria-label="上一张">‹</button>
      <button class="ghiv-nav-btn ghiv-nav-next" type="button" data-action="next" aria-label="下一张">›</button>
      <div class="ghiv-stage" data-role="stage">
        <img class="ghiv-image" alt="" draggable="false" data-role="image">
      </div>
      <div class="ghiv-caption" data-role="caption"></div>
      <div class="ghiv-strip" data-role="strip" aria-label="当前页面图片列表"></div>
      <div class="ghiv-hint">滚轮缩放，拖动平移，←/→ 切换，Esc 关闭，双击还原</div>
    `;

    document.body.appendChild(root);

    viewer = {
      root,
      stage: root.querySelector('[data-role="stage"]'),
      image: root.querySelector('[data-role="image"]'),
      caption: root.querySelector('[data-role="caption"]'),
      counter: root.querySelector('.ghiv-counter'),
      strip: root.querySelector('[data-role="strip"]'),
      originalLink: root.querySelector('[data-role="open-original"]')
    };

    root.addEventListener('click', onViewerClick);
    viewer.stage.addEventListener('wheel', onWheel, { passive: false });
    viewer.image.addEventListener('pointerdown', onPointerDown);
    viewer.image.addEventListener('dblclick', resetTransform);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);
    window.addEventListener('resize', resetTransform);

    return viewer;
  }

  function openViewer(index) {
    const ui = ensureViewer();
    previousBodyOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    ui.root.classList.add('ghiv-open');
    ui.root.focus({ preventScroll: true });
    renderThumbs();
    showImage(index);
  }

  function closeViewer() {
    if (!viewer || !viewer.root.classList.contains('ghiv-open')) return;
    viewer.root.classList.remove('ghiv-open', 'ghiv-dragging');
    document.body.style.overflow = previousBodyOverflow;
    state.dragging = false;
  }

  function showImage(index) {
    if (!imageItems.length || !viewer) return;

    currentIndex = (index + imageItems.length) % imageItems.length;
    const item = imageItems[currentIndex];

    viewer.image.src = item.src;
    viewer.image.alt = item.alt || 'GitHub 图片预览';
    viewer.caption.textContent = item.alt || item.original || item.src;
    viewer.originalLink.href = item.original || item.src;

    resetTransform();
    updateCounter();
    syncActiveThumb();
  }

  function renderThumbs() {
    if (!viewer) return;

    viewer.strip.textContent = '';
    imageItems.forEach((item, index) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'ghiv-thumb';
      button.dataset.index = String(index);
      button.setAttribute('aria-label', `查看第 ${index + 1} 张图片`);

      const thumb = document.createElement('img');
      thumb.src = item.src;
      thumb.alt = item.alt || '';
      thumb.loading = 'lazy';

      button.appendChild(thumb);
      viewer.strip.appendChild(button);
    });

    syncActiveThumb();
  }

  function syncActiveThumb() {
    if (!viewer) return;

    viewer.strip.querySelectorAll('.ghiv-thumb').forEach((button) => {
      const active = Number(button.dataset.index) === currentIndex;
      button.setAttribute('aria-current', active ? 'true' : 'false');
      if (active) button.scrollIntoView({ block: 'nearest', inline: 'center' });
    });
  }

  function updateCounter() {
    if (!viewer) return;
    viewer.counter.textContent = `${currentIndex + 1} / ${imageItems.length}`;
  }

  function onViewerClick(event) {
    const target = event.target instanceof Element ? event.target : null;
    if (!target || !viewer) return;

    const actionButton = target.closest('[data-action]');
    if (actionButton) {
      const action = actionButton.dataset.action;
      if (action === 'prev') showImage(currentIndex - 1);
      if (action === 'next') showImage(currentIndex + 1);
      if (action === 'zoom-in') zoomBy(ZOOM_STEP);
      if (action === 'zoom-out') zoomBy(1 / ZOOM_STEP);
      if (action === 'fit') resetTransform();
      if (action === 'close') closeViewer();
      return;
    }

    const thumbButton = target.closest('.ghiv-thumb');
    if (thumbButton) {
      showImage(Number(thumbButton.dataset.index));
      return;
    }

    if (target === viewer.root || target === viewer.stage) {
      closeViewer();
    }
  }

  function onKeyDown(event) {
    if (!viewer || !viewer.root.classList.contains('ghiv-open')) return;

    if (event.key === 'Escape') {
      event.preventDefault();
      closeViewer();
    } else if (event.key === 'ArrowLeft') {
      event.preventDefault();
      showImage(currentIndex - 1);
    } else if (event.key === 'ArrowRight') {
      event.preventDefault();
      showImage(currentIndex + 1);
    } else if (event.key === '+' || event.key === '=') {
      event.preventDefault();
      zoomBy(ZOOM_STEP);
    } else if (event.key === '-' || event.key === '_') {
      event.preventDefault();
      zoomBy(1 / ZOOM_STEP);
    } else if (event.key === '0') {
      event.preventDefault();
      resetTransform();
    }
  }

  function onWheel(event) {
    if (!viewer || !viewer.root.classList.contains('ghiv-open')) return;

    event.preventDefault();
    const factor = event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
    zoomBy(factor);
  }

  function zoomBy(factor) {
    state.scale = clamp(state.scale * factor, MIN_SCALE, MAX_SCALE);
    applyTransform();
  }

  function resetTransform() {
    state.scale = 1;
    state.x = 0;
    state.y = 0;
    applyTransform();
  }

  function applyTransform() {
    if (!viewer) return;
    viewer.image.style.transform = `translate3d(${state.x}px, ${state.y}px, 0) scale(${state.scale})`;
  }

  function onPointerDown(event) {
    if (!viewer || event.button !== 0) return;

    state.dragging = true;
    state.dragStartX = event.clientX;
    state.dragStartY = event.clientY;
    state.startX = state.x;
    state.startY = state.y;
    viewer.root.classList.add('ghiv-dragging');
    viewer.image.setPointerCapture?.(event.pointerId);
  }

  function onPointerMove(event) {
    if (!state.dragging || !viewer) return;

    state.x = state.startX + event.clientX - state.dragStartX;
    state.y = state.startY + event.clientY - state.dragStartY;
    applyTransform();
  }

  function onPointerUp(event) {
    if (!state.dragging || !viewer) return;

    state.dragging = false;
    viewer.root.classList.remove('ghiv-dragging');
    viewer.image.releasePointerCapture?.(event.pointerId);
  }

  function clamp(value, min, max) {
    return Math.min(max, Math.max(min, value));
  }
})();