Greasy Fork is available in English.
拦截 /api/attachments/*/content 接口返回的 JSON 数据，解析并渲染 HTML，方便查看文本的真实效果
// ==UserScript==
// @name 语雀渲染HTML附件
// @namespace http://tampermonkey.net/
// @version 1.2
// @description 拦截 /api/attachments/*/content 接口返回的 JSON 数据，解析并渲染 HTML，方便查看文本的真实效果
// @author SayHeya
// @match https://www.yuque.com/raw?filekey=yuque*
// @grant none
// @run-at document-start
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// 定义标题前缀常量
const TITLE_PREFIX = '[渲染✅]';
/** 判断是否是目标接口 */
const isTargetURL = (url) =>
typeof url === 'string' &&
url.includes('/api/attachments/') &&
url.includes('/content');
/** 判断字符串是否是 HTML 内容 */
function isLikelyHTML(str) {
return typeof str === 'string' && /<[^>]+>/.test(str);
}
/** 设置页面标题前缀 */
function setCustomTitle(prefix) {
const observer = new MutationObserver(() => {
if (!document.title.startsWith(prefix)) {
document.title = prefix + ' ' + document.title.replace(new RegExp(`^${prefix}\\s*`), '');
}
});
observer.observe(document.querySelector('title') || document.head, {
childList: true,
subtree: true,
characterData: true
});
// 初始设置一次
if (document.title) {
document.title = prefix + ' ' + document.title.replace(new RegExp(`^${prefix}\\s*`), '');
} else {
const titleTag = document.createElement('title');
titleTag.textContent = prefix;
document.head.appendChild(titleTag);
}
}
/** 渲染 HTML 内容到页面 */
function renderHTML(htmlContent) {
// 设置标题前缀
setCustomTitle(TITLE_PREFIX);
// 清空页面和样式
document.head.innerHTML = '';
document.body.innerHTML = '';
document.documentElement.style.padding = '0';
document.documentElement.style.margin = '0';
document.documentElement.style.overflow = 'auto';
document.body.style.padding = '0';
document.body.style.margin = '0';
document.body.style.overflow = 'auto';
document.body.style.maxWidth = '100vw';
// 添加基础样式
const style = document.createElement('style');
style.textContent = `
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
#yuque-rendered-container {
padding: 40px;
max-width: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
`;
document.head.appendChild(style);
// 插入 HTML 内容
const container = document.createElement('div');
container.id = 'yuque-rendered-container';
container.innerHTML = htmlContent;
document.body.appendChild(container);
}
/** 尝试解析并渲染接口内容 */
function tryRenderContent(data) {
const content = data?.data?.content;
if (isLikelyHTML(content)) {
console.log('[✅ 语雀 HTML 内容捕获]');
renderHTML(content);
} else {
console.log('[⛔ 内容不是 HTML]', content);
}
}
/** 拦截 fetch 请求 */
function hookFetch() {
const originalFetch = window.fetch;
window.fetch = async function (...args) {
const [url] = args;
const response = await originalFetch.apply(this, args);
if (isTargetURL(url)) {
const cloned = response.clone();
cloned.json().then(data => {
console.log('[🎯 拦截 fetch]', url, data);
tryRenderContent(data);
}).catch(e => console.warn('❌ fetch JSON 解析失败:', e));
}
return response;
};
}
/** 拦截 XMLHttpRequest 请求 */
function hookXHR() {
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (method, url, ...rest) {
this._intercept_url = url;
return originalOpen.call(this, method, url, ...rest);
};
const originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function (...args) {
this.addEventListener('load', function () {
if (isTargetURL(this._intercept_url)) {
try {
const data = JSON.parse(this.responseText);
console.log('[🎯 拦截 XHR]', this._intercept_url, data);
tryRenderContent(data);
} catch (e) {
console.warn('❌ XHR JSON 解析失败:', e);
}
}
});
return originalSend.apply(this, args);
};
}
// 启动拦截器
hookFetch();
hookXHR();
})();