OpenWebUI 强制 HTML 图片渲染, 识别 <img> 标签，基于 OpenWebUI v0.6.10 开发。使用前请更改 @match 后面的 URL 以使脚本在你的 OpenWebUI URL中工作。
当前为
// ==UserScript==
// @name OpenWebUI Force HTML Image Renderer
// @version 1.1.0
// @description OpenWebUI 强制 HTML 图片渲染, 识别 <img> 标签，基于 OpenWebUI v0.6.10 开发。使用前请更改 @match 后面的 URL 以使脚本在你的 OpenWebUI URL中工作。
// @author B3000Kcn
// @match https://your.openwebui.url/*
// @run-at document-idle
// @license MIT
// @namespace https://greasyfork.org/users/1474401
// ==/UserScript==
(function() {
'use strict';
const SCRIPT_VERSION = '1.0.0-dom-hybrid.2';
const TARGET_DIV_DEPTH = 22;
const PROCESSED_CLASS = `html-img-rendered-v1-0-0`; // 与原v1.0.0保持一致，方便升级或识别
const ALLOWED_CONTAINER_TAGS = ['P', 'SPAN', 'PRE', 'CODE', 'LI', 'BLOCKQUOTE', 'FIGCAPTION', 'LABEL', 'SMALL', 'STRONG', 'EM', 'B', 'I', 'U', 'SUB', 'SUP', 'MARK', 'DEL', 'INS', 'TD', 'TH', 'DT', 'DD']; // v1.0.0中的 ALLOWED_INNERHTML_MOD_TAGS
const TAGS_TO_SKIP_PROCESSING = ['SCRIPT', 'STYLE', 'HEAD', 'META', 'LINK', 'TITLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'BUTTON', 'SELECT', 'FORM', 'IFRAME', 'VIDEO', 'AUDIO', 'CANVAS', 'SVG', 'IMG'];
const escapedImgTagRegex = /<img\s+(.*?)>/gi;
const directImgTagRegex = /<img\s+([^>]*)>/gi;
function getElementDepth(element) {
let depth = 0; let el = element;
while (el) { depth++; el = el.parentElement; }
return depth;
}
// 稍微增强的 getAttributeValue，尝试处理有无引号的属性值
function getAttributeValue(attributesString, attributeName) {
if (!attributesString || !attributeName) return null;
try {
// 1. 尝试匹配带引号的: name="value" or name='value'
let regex = new RegExp(`${attributeName}\\s*=\\s*(["'])(.*?)\\1`, 'i');
let match = attributesString.match(regex);
if (match && match[2] !== undefined) return match[2];
// 2. 尝试匹配不带引号的简单值 (例如 width=100)
// 这个正则假设值不包含空格、引号、> 等，适用于简单的数字或标识符
regex = new RegExp(`${attributeName}\\s*=\\s*([^\\s"'<>]+)`, 'i');
match = attributesString.match(regex);
if (match && match[1] !== undefined) return match[1];
return null;
} catch (e) {
console.error(`${SCRIPT_VERSION} Error in getAttributeValue for ${attributeName}:`, e);
return null;
}
}
// 增强版的 processImageTag，能从 style 属性提取 width/height
function processImageTag(match, attributesStringOriginal, isEscaped) {
if (typeof match !== 'string' || match.length === 0) {
return match;
}
// 避免重复处理已由本脚本渲染的图片（检查原始匹配串中是否包含标记）
if (!isEscaped && match.startsWith("<img") && match.includes('data-force-rendered="true"')) {
return match;
}
// (可以考虑添加对 <p class="userscript-image-paragraph"... 的检查，如果需要更严格避免嵌套)
const attributesString = attributesStringOriginal.trim();
const src = getAttributeValue(attributesString, 'src');
if (!src || (typeof src === 'string' && src.toLowerCase().startsWith('javascript:'))) {
// console.warn(`${SCRIPT_VERSION} Warning: Invalid or blocked src: ${src}`);
return match; // 返回原始匹配，不处理
}
let width = getAttributeValue(attributesString, 'width');
let height = getAttributeValue(attributesString, 'height');
const styleString = getAttributeValue(attributesString, 'style');
const alt = getAttributeValue(attributesString, 'alt');
// 如果无法从 width/height 属性获取，尝试从 style 属性解析
if ((!width || String(width).trim() === '') && styleString) {
const styleWidthMatch = styleString.match(/width\s*:\s*([^;!]+)/i); // !important 可能会干扰，简单排除;
if (styleWidthMatch && styleWidthMatch[1]) {
width = styleWidthMatch[1].trim();
}
}
if ((!height || String(height).trim() === '') && styleString) {
const styleHeightMatch = styleString.match(/height\s*:\s*([^;!]+)/i);
if (styleHeightMatch && styleHeightMatch[1]) {
height = styleHeightMatch[1].trim();
}
}
const img = document.createElement('img'); // 临时创建以构建HTML字符串
img.src = src;
img.alt = alt ? alt : `用户HTML图片 (${isEscaped ? '转义' : '直接'}) v${SCRIPT_VERSION}`;
img.setAttribute('data-force-rendered', 'true'); // 标记为已处理
if (width && String(width).trim() !== '') {
const wStr = String(width).trim();
if (wStr.includes('%') || wStr.match(/^[0-9.]+(em|rem|px|vw|vh|pt|cm|mm|in|auto)$/i)) {
img.style.width = wStr;
} else { // 假设是纯数字，视为像素 (HTML width attribute)
img.setAttribute('width', wStr.replace(/px$/i, ''));
}
}
if (height && String(height).trim() !== '') {
const hStr = String(height).trim();
if (hStr.includes('%') || hStr.match(/^[0-9.]+(em|rem|px|vw|vh|pt|cm|mm|in|auto)$/i)) {
img.style.height = hStr;
} else {
img.setAttribute('height', hStr.replace(/px$/i, ''));
}
}
img.style.maxWidth = '100%';
img.style.display = 'block';
// img.onerror an actual DOM element needs this, not the temp one for outerHTML.
// If needed, the final DOM element should have this attached. For now, this script doesn't do it.
const imgHTML = img.outerHTML;
const pWrappedHTML = `<p class="userscript-image-paragraph" style="margin: 0.5em 0; line-height: normal;">${imgHTML}</p>`;
return pWrappedHTML;
}
// 改造后的 renderImagesInElement 函数
function renderImagesInElement(element, forcedByObserver = false) {
if (!element || typeof element.classList === 'undefined' || TAGS_TO_SKIP_PROCESSING.includes(element.tagName.toUpperCase()) || element.isContentEditable) {
return;
}
const currentDepth = getElementDepth(element);
if (currentDepth !== TARGET_DIV_DEPTH) {
return;
}
const isAllowedTypeAtTargetDepth = (element.tagName.toUpperCase() === 'DIV') || ALLOWED_CONTAINER_TAGS.includes(element.tagName.toUpperCase());
if (!isAllowedTypeAtTargetDepth) {
return;
}
if (element.classList.contains(PROCESSED_CLASS)) {
if (forcedByObserver) {
element.classList.remove(PROCESSED_CLASS);
} else {
return;
}
}
let madeChangeOverall = false;
const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
const textNodesToModify = [];
let textNodeWalkerCurrentNode;
while (textNodeWalkerCurrentNode = walker.nextNode()) {
let parentCheck = textNodeWalkerCurrentNode.parentElement;
let inSkippedSubtree = false;
while (parentCheck && parentCheck !== element.parentElement) {
if (parentCheck.tagName && TAGS_TO_SKIP_PROCESSING.includes(parentCheck.tagName.toUpperCase())) {
inSkippedSubtree = true;
break;
}
if (parentCheck === element) break;
parentCheck = parentCheck.parentElement;
}
if (!inSkippedSubtree && textNodeWalkerCurrentNode.nodeValue &&
(textNodeWalkerCurrentNode.nodeValue.includes('<img') || textNodeWalkerCurrentNode.nodeValue.includes('<img'))) {
textNodesToModify.push(textNodeWalkerCurrentNode);
}
}
for (const textNode of textNodesToModify) {
if (!textNode.parentNode) continue;
const originalNodeValue = textNode.nodeValue;
let newTextContent = originalNodeValue;
let currentTextNodeMadeChange = false;
const createReplacer = (isEscaped) => (match, attrs) => {
const replacement = processImageTag(match, attrs, isEscaped);
if (replacement !== match) {
currentTextNodeMadeChange = true;
}
return replacement;
};
if (newTextContent.includes('<img')) {
newTextContent = newTextContent.replace(escapedImgTagRegex, createReplacer(true));
}
if (newTextContent.includes('<img')) { // Check again in case escaped replacement introduced <img
newTextContent = newTextContent.replace(directImgTagRegex, createReplacer(false));
}
if (currentTextNodeMadeChange) {
madeChangeOverall = true;
const fragment = document.createDocumentFragment();
const tempDiv = document.createElement('div');
tempDiv.innerHTML = newTextContent;
while (tempDiv.firstChild) {
fragment.appendChild(tempDiv.firstChild);
}
try {
textNode.parentNode.replaceChild(fragment, textNode);
} catch (e) {
console.error(`${SCRIPT_VERSION} Error replacing text node:`, e, textNode.parentNode);
}
}
}
if (madeChangeOverall) {
if (!element.classList.contains(PROCESSED_CLASS)) {
element.classList.add(PROCESSED_CLASS);
}
} else if (!element.classList.contains(PROCESSED_CLASS) && textNodesToModify.length > 0) {
element.classList.add(PROCESSED_CLASS);
}
}
// MutationObserver 和初始化逻辑 (与v1.0.0结构一致, 调用新的renderImagesInElement)
const observerCallback = (mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
renderImagesInElement(node, true);
if (typeof node.querySelectorAll === 'function') {
// 选择器应与 initialScan 一致或更通用地覆盖可能包含目标元素的子元素
// DIV 本身会通过直接调用 renderImagesInElement(node, true) 检查深度
// 其他允许的容器类型也需要被检查
const relevantChildSelectors = ALLOWED_CONTAINER_TAGS.join(',') + ',DIV';
node.querySelectorAll(relevantChildSelectors).forEach(child => {
if (child.nodeType === Node.ELEMENT_NODE) renderImagesInElement(child, true);
});
}
} else if (node.nodeType === Node.TEXT_NODE && node.parentElement) {
renderImagesInElement(node.parentElement, true);
}
});
} else if (mutation.type === 'characterData') {
if (mutation.target && mutation.target.parentElement) {
renderImagesInElement(mutation.target.parentElement, true);
}
}
}
};
const observer = new MutationObserver(observerCallback);
const observerConfig = { childList: true, subtree: true, characterData: true };
function initialScan() {
// 初始扫描时，选择所有可能是目标深度容器的元素类型
const allRelevantSelectors = ALLOWED_CONTAINER_TAGS.join(',') + ',DIV';
document.querySelectorAll(allRelevantSelectors).forEach(el => {
// 确保元素在DOM中并且可见 (offsetParent !== null 是一个简单的检查)
if (el.offsetParent !== null || document.body.contains(el)) {
renderImagesInElement(el, false);
}
});
}
function activateScript() {
// console.log(`OpenWebUI 图片强制渲染脚本 v${SCRIPT_VERSION} (DOM混合模式) 准备启动...`);
setTimeout(() => {
initialScan();
observer.observe(document.body, observerConfig);
// console.log(`OpenWebUI 图片强制渲染脚本 v${SCRIPT_VERSION} (DOM混合模式) 已启动。`);
}, 1500); // 延迟时间可根据页面加载情况调整
}
if (document.readyState === 'complete' || document.readyState === 'interactive') {
activateScript();
} else {
document.addEventListener('DOMContentLoaded', activateScript, { once: true });
}
})();