如何通过编程提取页面中JS动态插入的全部样式？

针对你遇到的WebChat动态样式无法提取的问题，这里有几个可行的解决思路：

1. 抓取页面中所有动态插入的<style>标签 #

WebChat的样式通常是通过JavaScript动态注入到页面的<style>标签中，而非外部CSS文件。你可以直接获取页面上所有<style>元素的内容，合并到保存的HTML里：

// 获取所有<style>标签的样式内容
const dynamicStyles = Array.from(document.querySelectorAll('style'))
  .map(style => style.textContent)
  .join('\n');

// 把动态样式合并到你已提取的HTML头部
const savedHTML = `
<!DOCTYPE html>
<html>
<head>
  <style>${dynamicStyles}</style>
  <!-- 这里插入你已提取的外部CSS内容 -->
</head>
<body>
  <!-- 这里插入你已提取的页面HTML内容 -->
</body>
</html>
`;

2. 遍历Shadow DOM提取样式 #

如果WebChat使用了Shadow DOM封装组件，常规的document查询无法获取内部样式，需要递归遍历Shadow DOM节点：

function extractAllStyles(element = document) {
  let styles = '';
  // 提取当前节点的<style>
  styles += Array.from(element.querySelectorAll('style'))
    .map(s => s.textContent)
    .join('\n');
  // 遍历Shadow DOM
  Array.from(element.querySelectorAll('*')).forEach(el => {
    if (el.shadowRoot) {
      styles += extractAllStyles(el.shadowRoot);
    }
  });
  return styles;
}

// 调用函数获取所有样式（包括Shadow DOM内的）
const allStyles = extractAllStyles();

3. 给元素内联计算样式（兜底方案） #

如果前两种方法都无法覆盖所有样式，可以使用getComputedStyle获取每个元素的最终计算样式，直接内联到元素的style属性中，确保保存的HTML能完全复现渲染效果：

function inlineAllStyles(element = document.body) {
  Array.from(element.querySelectorAll('*')).forEach(el => {
    const computed = window.getComputedStyle(el);
    // 把计算样式转换为内联样式字符串
    const styleStr = Array.from(computed).map(prop => `${prop}:${computed[prop]}`).join(';');
    el.style.cssText = styleStr;
  });
}

// 先给所有元素内联样式，再提取HTML
inlineAllStyles();
const savedHTML = document.documentElement.outerHTML;

注意：第三种方法会生成大量内联样式，HTML体积会变大，但能确保所有生效的样式都被保留。

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