使用Chrome extension做Web scraping时如何无需滚动全量提取WhatsApp聊天div元素

WhatsApp网页端采用虚拟滚动+懒加载的会话加载逻辑，未进入可视区域的会话不会生成对应的DOM节点，因此如果你的需求必须获取真实渲染后的div元素，没有完全无需滚动的方案，但可以通过程序化方案替代手动滚动，效率更高；如果仅需要会话数据而非真实DOM，可以直接读取本地存储实现无滚动获取。

方案1：程序化自动滚动（获取真实DOM首选，稳定兼容） #

该方案完全模拟用户滚动行为，不需要手动操作，稳定不会触发平台反作弊检测，可拿到真实渲染后的div节点：

• 第一步：定位聊天列表滚动容器，优先使用aria属性定位避免动态类名失效：

// 兼容中英文界面
const chatListContainer = document.querySelector('div[aria-label="聊天列表"]') || document.querySelector('div[aria-label="Chat list"]');

• 第二步：编写自动滚动逻辑，滚动到底部后等待新DOM加载完成，再继续滚动直到没有新会话加载：

async function getAllChatDivs() {
  const chatDivs = new Set();
  let previousHeight = 0;
  let currentHeight = chatListContainer.scrollHeight;

  // 滚动直到容器高度不再变化，说明已经加载完全部会话
  while (previousHeight !== currentHeight) {
    // 收集当前已渲染的聊天div，去重避免重复收集
    document.querySelectorAll('div[aria-label^="聊天: "], div[aria-label^="Chat: "]').forEach(div => chatDivs.add(div));
    previousHeight = currentHeight;
    // 滚动到底部触发下一批会话加载
    chatListContainer.scrollTop = currentHeight;
    // 等待300ms让新会话DOM渲染完成，可根据网络情况调整时长
    await new Promise(resolve => setTimeout(resolve, 300));
    currentHeight = chatListContainer.scrollHeight;
  }
  // 最后收集一次底部剩余的会话节点
  document.querySelectorAll('div[aria-label^="聊天: "], div[aria-label^="Chat: "]').forEach(div => chatDivs.add(div));
  return Array.from(chatDivs);
}

// 调用后可拿到全量聊天div列表
getAllChatDivs().then(allChatDivs => {
  // 此处可处理你的业务逻辑
  console.log(allChatDivs)
});

• 注意：如果是Chrome扩展的content script运行，需要确保代码在页面加载完成后执行，避免找不到容器元素。

方案2：读取本地IndexedDB数据（无滚动，仅需要会话数据可选） #

如果不需要真实DOM节点，只需要会话的联系人信息、未读数、最新消息等数据，可以直接读取WhatsApp存在本地IndexedDB中的全量会话数据，完全不需要滚动：

• 可以通过Chrome扩展的content script直接访问页面的IndexedDB，读取wastore库中的会话表获取全量数据
• 该方案速度更快，不需要触发DOM渲染，适合仅需要数据的场景
• 缺点：无法获取未渲染的div节点，因为未加载的会话根本不存在对应的DOM元素

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