精简实现

Chaturbate/chaturbate-thumbnails-2x.user.js

@@ -12,17 +12,25 @@
 (function () {
   "use strict";
 
-  const SCALE = 2;
+  // ========== 配置项 ==========
+  // 放大倍数（宽度和高度都会按此倍数放大）
+  const SCALE = 1.5;
+  
+  // 调试开关（true: 输出调试信息，false: 静默运行）
+  const DEBUG = false;
+  // ===========================
+
+  // ========== 内部常量 ==========
   const SCALED_ATTR = "data-tm-scaled";
   const BASE_W_ATTR = "data-tm-base-w";
   const BASE_H_ATTR = "data-tm-base-h";
-  const DEBUG = true;
+  // ===========================
 
   // 提前注入 CSS，避免闪烁
   const injectCSS = () => {
     const style = document.createElement("style");
     style.id = "tm-thumb-scale-style";
-    style.textContent = `
+    const css = `
       img.room_thumbnail:not([${SCALED_ATTR}="1"]) {
         opacity: 0;
         transition: opacity 0.1s;
@@ -36,67 +44,29 @@
         flex-wrap: wrap !important;
         gap: 0 !important;
       }
-      ul.list li.roomCard,
-      ul.list.endless_page_template li.roomCard {
-        position: relative !important;
-        flex-shrink: 0 !important;
-        flex-grow: 0 !important;
-        margin: 0 !important;
-        padding: 0 !important;
-      }
     `;
-    if (document.head) {
+    
+    style.textContent = css;
+    const inject = () => {
       if (!document.getElementById("tm-thumb-scale-style")) {
-        document.head.appendChild(style);
+        (document.head || document.documentElement).appendChild(style);
       }
+    };
+    if (document.head) {
+      inject();
     } else {
-      document.addEventListener("DOMContentLoaded", () => {
+      document.addEventListener("DOMContentLoaded", inject);
-        if (!document.getElementById("tm-thumb-scale-style")) {
-          document.head.appendChild(style);
-        }
-      });
     }
   };
   injectCSS();
 
-  const relaxBox = (el) => {
-    if (!el) return;
-    el.style.overflow = "visible";
-    el.style.maxWidth = "none";
-  };
-
-  const relaxAncestors = (el, depth = 6) => {
-    let current = el?.parentElement;
-    let steps = 0;
-    while (current && steps < depth && current !== document.body) {
-      relaxBox(current);
-      current = current.parentElement;
-      steps += 1;
-    }
-  };
-
   const relaxKnownOuter = () => {
-    const selectors = [
+    // 确保列表容器能容纳更大的卡片
-      "#roomlist_content_wrapper",
+    document.querySelectorAll("ul.list, ul.list.endless_page_template").forEach((el) => {
-      "#roomlist_root",
+      el.style.width = "100%";
-      ".BaseRoomContents",
+      el.style.maxWidth = "none";
-      "[data-testid='room-list']",
+      el.style.boxSizing = "border-box";
-      "ul.list",
+      el.style.overflow = "visible";
-      "ul.list.endless_page_template",
-    ];
-    selectors.forEach((selector) => {
-      document.querySelectorAll(selector).forEach((el) => {
-        relaxBox(el);
-        // 如果是列表容器，确保布局能容纳更大的卡片
-        if (el.matches?.("ul.list, ul.list.endless_page_template")) {
-          el.style.width = "100%";
-          el.style.maxWidth = "none";
-          el.style.boxSizing = "border-box";
-          el.style.display = "flex";
-          el.style.flexWrap = "wrap";
-          el.style.gap = "0";
-        }
-      });
     });
   };
 
@@ -140,13 +110,10 @@
       container.style.minWidth = `${scaledW}px`;
       container.style.maxWidth = `${scaledW}px`;
       container.style.minHeight = `${scaledH}px`;
-      container.style.maxHeight = "none";
       container.style.overflow = "visible";
       container.style.display = "block";
-      container.style.position = "relative";
       container.style.boxSizing = "border-box";
       container.style.flexShrink = "0";
-      container.style.margin = "0";
 
       const card = container.closest("li.roomCard");
       if (card) {
@@ -156,16 +123,11 @@
         card.style.minHeight = `${scaledH}px`;
         card.style.height = "auto";
         card.style.overflow = "visible";
-        card.style.position = "relative";
         card.style.flexShrink = "0";
         card.style.flexGrow = "0";
         card.style.flexBasis = `${scaledW}px`;
         card.style.boxSizing = "border-box";
-        card.style.margin = "0";
-        card.style.padding = "0";
-        relaxAncestors(card);
       }
-      relaxAncestors(container);
     });
   };
 
@@ -193,23 +155,17 @@
 
   // MutationObserver 监听动态添加的内容
   const observer = new MutationObserver((mutations) => {
-    let shouldScale = false;
+    for (const mutation of mutations) {
-    mutations.forEach((mutation) => {
+      for (const node of mutation.addedNodes) {
-      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1 && (
-        if (node.nodeType === 1) {
+          node.matches?.("a.room_thumbnail_container, li.roomCard") ||
-          if (
+          node.querySelector?.("a.room_thumbnail_container")
-            node.matches?.("a.room_thumbnail_container") ||
+        )) {
-            node.matches?.("li.roomCard") ||
+          if (DEBUG) console.log("[tm] new content detected, scaling...");
-            node.querySelector?.("a.room_thumbnail_container")
+          scale();
-          ) {
+          return;
-            shouldScale = true;
-          }
         }
-      });
+      }
-    });
-    if (shouldScale) {
-      if (DEBUG) console.log("[tm] new content detected, scaling...");
-      scale();
     }
   });
 
@@ -217,14 +173,10 @@
   const startObserving = () => {
     const target = document.body || document.documentElement;
     if (target) {
-      observer.observe(target, {
+      observer.observe(target, { childList: true, subtree: true });
-        childList: true,
-        subtree: true,
-      });
       if (DEBUG) console.log("[tm] MutationObserver started");
     }
   };
-
   if (document.body) {
     startObserving();
   } else {