如何提取Discord消息的HTML及CSS样式 使其在浏览器中还原显示效果

原方案失效原因 #

• 仅提取了消息容器内部的元素，Discord大量基础样式（全局字体、页面背景、聊天区基础配色等）定义在body、根节点等上层父元素，未被纳入导出范围
• getComputedStyle默认无法获取::before、::after等伪元素的样式，而Discord的消息气泡尖角、头像装饰、标识图标等大量视觉元素都是通过伪元素实现的
• Discord所有主题色、间距都依赖:root节点定义的CSS变量，单独剥离消息容器后变量上下文丢失，所有依赖变量的样式直接失效
• 你在计算样式中找不到background-color是因为聊天区的背景属性定义在消息容器的上层父节点，而非消息容器自身

可用实现代码 #

你可以直接在Discord网页版的控制台运行以下代码，运行后会自动下载生成好的HTML文件：

// 第一步：导出全局CSS变量
const rootStyles = getComputedStyle(document.documentElement);
let cssVars = ':root {';
for (let i = 0; i < rootStyles.length; i++) {
  const prop = rootStyles[i];
  if (prop.startsWith('--')) {
    cssVars += `${prop}: ${rootStyles.getPropertyValue(prop)};`;
  }
}
cssVars += '}';

// 第二步：选中目标消息容器，替换为你实际的消息容器ID
const targetEl = document.querySelector('#chat-messages-123456');
// 连带上层必要父容器一起复制，保留样式继承上下文
const cloneEl = targetEl.parentElement.parentElement.cloneNode(true);

// 第三步：处理所有元素的内联样式
const allEls = cloneEl.getElementsByTagName('*');
for (let i = 0; i < allEls.length; i++) {
  const el = allEls[i];
  const computed = getComputedStyle(el);
  el.setAttribute('style', computed.cssText);
  
  // 补充处理伪元素样式
  ['::before', '::after'].forEach(pseudo => {
    const pseudoStyle = getComputedStyle(el, pseudo);
    if (pseudoStyle.cssText) {
      const style = document.createElement('style');
      style.textContent = `#${el.id || 'el-'+i}${pseudo} { ${pseudoStyle.cssText} }`;
      cloneEl.appendChild(style);
    }
  });
}

// 第四步：拼接为完整HTML文件
const fullHtml = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>${cssVars}</style>
</head>
<body style="margin:0;padding:20px;background:var(--background-primary);">
${cloneEl.outerHTML}
</body>
</html>
`;

// 自动下载文件
const blob = new Blob([fullHtml], {type: 'text/html'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'discord-messages.html';
a.click();
URL.revokeObjectURL(url);

效果参考 #

注意事项 #

• 如果需要完全离线使用，需要将HTML中所有Discord CDN的图片资源转存为本地文件或者base64格式，避免防盗链限制导致图片加载失败
• 默认导出的是当前静态状态下的样式，不会保留原Discord的 hover、点击等交互逻辑

内容的提问来源于stack exchange，提问作者parsecer