☰

Display Real R18 Product Images on PChome

Ensures R18 product images are displayed correctly.

  1. // ==UserScript==
  2. // @name        Display Real R18 Product Images on PChome
  3. // @name:zh-TW  PChome正確顯示R18商品圖片
  4. // @description Ensures R18 product images are displayed correctly.
  5. // @description:zh-TW  確保R18商品圖片正確顯示。
  6. // @namespace   https://github.com/jmsch23280866
  7. // @author      特務E04
  8. // @license     MIT
  9. // @version     1.0
  10. // @match       https://*.pchome.com.tw/*
  11. // @grant       none
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // 定義處理被覆蓋圖片的函數
  18.     const removeOverlayFromImages = () => {
  19.         const coveredImages = document.querySelectorAll('.c-prodInfoV2__img--notR18');
  20.         coveredImages.forEach(container => {
  21.             container.classList.remove('c-prodInfoV2__img--notR18');
  22.             const img = container.querySelector('img');
  23.             if (img) {
  24.                 img.style.opacity = '1';
  25.                 img.style.zIndex = 'auto';
  26.             }
  27.         });
  28.     };
  29.  
  30.     // 初始加載時處理已有的覆蓋物
  31.     removeOverlayFromImages();
  32.  
  33.     // 使用 MutationObserver 監測動態加載的內容
  34.     const observer = new MutationObserver(() => {
  35.         removeOverlayFromImages();  // 每當 DOM 變動時，重新檢查圖片是否被覆蓋
  36.     });
  37.  
  38.     // 監控主要商品列表區域，監聽其子節點變動
  39.     const targetNode = document.querySelector('body');
  40.     if (targetNode) {
  41.         observer.observe(targetNode, { childList: true, subtree: true });
  42.     }
  43.  
  44. })();