【脚本】论坛列表显示图片0.5

Makima · 发表于 2025-8-22 12:31:49

现在搜索页面也能预览图片了

@Name @Match

// ==UserScript==
// @name 显示图片
// @version 0.5
// @description 论坛列表显示图片（适配搜索页面
// @author M&U
// @match https://www.gamemale.com/*
// @exclude https://www.gamemale.com/forum.php
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_xmlhttpRequest
// ==/UserScript==
(function () {
'use strict';
const TYPE_HANDLERS = [
{
name: "discuz",
articleListSelector: 'tbody[id^="normalthread_"]:not([data-enhanced]',
articleLinkSelector: '.icn a',
postContentSelector: 'div[id^="post_"] .plc',
postImageLinkCallback: function (element) {
return element.getAttribute('file') || element.getAttribute('src');
}
},
{
name: "discuz_search",
articleListSelector: '.slst.mtw li.pbw:not([data-enhanced])',
articleLinkSelector: 'h3.xs3 a',
postContentSelector: 'div[id^="post_"] .plc',
postImageLinkCallback: function (element) {
return element.getAttribute('file') || element.getAttribute('src');
}
}
];
const IGNORE_IMAGES = [
/smile|avatar|icon|face|emoji|emoticon/i,
/uc_server|static\/image|data\/avatar/i,
/\.gif(\?|$)/i
];
let enabled = typeof GM_getValue !== 'undefined' ? GM_getValue('enabled', true) : true;
const toggleButton = document.createElement('button');
toggleButton.textContent = enabled ? '关闭预览' : '开启预览';
toggleButton.style.position = 'fixed';
toggleButton.style.bottom = '20px';
toggleButton.style.right = '20px';
toggleButton.style.zIndex = '9999';
toggleButton.style.padding = '5px 10px';
toggleButton.style.background = '#4CAF50';
toggleButton.style.color = 'white';
toggleButton.style.border = 'none';
toggleButton.style.borderRadius = '3px';
document.body.appendChild(toggleButton);
GM_addStyle(`
.image-row {
display: flex;
width: 100%;
margin: 10px 0;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 10px;
}
.image-item {
flex: 0 0 auto;
height: 150px;
}
.preview-image {
height: 100%;
width: auto;
max-width: 300px;
object-fit: contain;
cursor: pointer;
border: 1px solid #ddd;
background: #f5f5f5;
border-radius: 3px;
}
.preview-image.zoomed {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
z-index: 1000;
background: #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
`);
toggleButton.addEventListener('click', function() {
enabled = !enabled;
if (typeof GM_setValue !== 'undefined') {
GM_setValue('enabled', enabled);
}
window.location.reload(true); // 强制从服务器重新加载页面
});
function init() {
if (!enabled) return;
// 检查当前页面类型
if (location.href.includes('forum') && !location.href.includes('search')) {
handleForum('discuz');
} else if (location.href.includes('search')) {
handleForum('discuz_search');
}
}
function handleForum(type) {
const handler = TYPE_HANDLERS.find(h => h.name === type);
if (!handler) return;
document.querySelectorAll(handler.articleListSelector).forEach(post => {
if (post.hasAttribute('data-enhanced')) return;
post.setAttribute('data-enhanced', 'true');
const link = post.querySelector(handler.articleLinkSelector)?.href;
if (link) loadImages(link, handler, post);
});
}
function shouldIgnoreImage(src) {
return IGNORE_IMAGES.some(regex => regex.test(src));
}
async function loadImages(url, handler, post) {
try {
const html = await fetch(url).then(r => r.text());
const doc = new DOMParser().parseFromString(html, 'text/html');
const content = doc.querySelector(handler.postContentSelector);
if (!content) return;
const row = document.createElement('div');
row.className = 'image-row';
const images = Array.from(content.querySelectorAll('img'))
.map(img => handler.postImageLinkCallback(img))
.filter(src => src && !shouldIgnoreImage(src))
.slice(0, 3);
images.forEach(src => {
const item = document.createElement('div');
item.className = 'image-item';
const image = document.createElement('img');
image.className = 'preview-image';
image.src = src;
image.loading = 'lazy';
image.addEventListener('click', () => {
document.querySelectorAll('.preview-image.zoomed').forEach(el => el.classList.remove('zoomed'));
image.classList.add('zoomed');
});
item.appendChild(image);
row.appendChild(item);
});
if (row.children.length > 0) {
const description = post.querySelector('p.xg1');
if (description && description.nextSibling) {
description.parentNode.insertBefore(row, description.nextSibling);
} else {
post.appendChild(row);
}
}
} catch (error) {
console.log('加载图片失败:', error);
}
}
init();
new MutationObserver(function(mutations) {
if (!enabled) return;
init();
}).observe(document.body, { childList: true, subtree: true });
document.addEventListener('click', function(e) {
if (e.target.classList.contains('zoomed')) {
e.target.classList.remove('zoomed');
}
});
})();