JavDB Preview Image Viewer のソースコード

JavDB Preview Image Viewer

优化 JavDB 预览图显示，将 a 标签替换为 img 标签，支持横向滚动并统一高度
右端で折り返す
// ==UserScript==
// @name         JavDB Preview Image Viewer
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  优化 JavDB 预览图显示，将 a 标签替换为 img 标签，支持横向滚动并统一高度
// @author       You
// @match        https://javdb.com/v/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    function injectStyles() {
      const style = document.createElement('style');
      style.textContent = `
        /* 设置容器为 Flex 布局，实现横向滚动，并强制子元素不换行 */
        .preview-images {
          display: flex !important;
          overflow-x: auto !important;
          flex-wrap: nowrap !important;
          white-space: nowrap !important;
          align-items: center;
          gap: 10px; /* 添加一点间距让视觉更美观 */
          padding-bottom: 10px; /* 留出滚动条空间 */
        }

        /* 统一设置替换后的 img 元素高度为 400px */
        .preview-images img.tile-item {
          height: 400px;
          width: auto;
          flex-shrink: 0; /* 防止在 Flex 容器中被压缩 */
          object-fit: cover;
          display: block;
        }

        /* 确保容器内的其他直接子元素（如预告片部分）也不会被压缩 */
        .preview-images > * {
          flex-shrink: 0;
        }
      `;
      document.head.appendChild(style);
    }

    function replaceAnchorWithImage() {
      const container = document.querySelector('.preview-images');
      if (!container) return;

      const links = container.querySelectorAll('a.tile-item');
      links.forEach(link => {
        const img = document.createElement('img');

        // 获取 href 属性，去掉 HTML 字符串中可能存在的反引号和首尾空格
        let hrefVal = link.getAttribute('href');
        if (hrefVal) {
            hrefVal = hrefVal.replace(/[`]/g, '').trim();
            img.src = hrefVal;
        }

        // 保留原有的 class，以便样式不丢失
        img.className = 'tile-item';

        // 尝试将原 a 标签内 img 的 alt 属性也转移过来
        const innerImg = link.querySelector('img');
        if (innerImg && innerImg.alt) {
            img.alt = innerImg.alt;
        }

        // 将父节点中的 a 标签替换为新创建的 img 标签
        link.parentNode.replaceChild(img, link);
      });
    }

    // 注入 CSS 样式
    injectStyles();

    replaceAnchorWithImage();
})();