如何开发带标签筛选功能的WhatsApp网页版Chrome扩展？

一、克隆节点事件生效的临时处理 #

你遇到的克隆节点点击事件无效，核心原因是WhatsApp的事件监听器委托在#app元素上，但克隆节点不在#app的DOM子树中，导致委托事件无法捕获。要解决这个问题：

• 不要把克隆节点放在独立容器里，而是插入到#app的子树范围内（比如原聊天列表的同级容器），让#app的事件委托能覆盖到克隆节点。
• 示例代码：

const originalChat = document.querySelector('.your-chat-node-selector');
const clonedChat = originalChat.cloneNode(true);
// 插入到#app下的聊天列表容器中
document.querySelector('#app ._210SC').appendChild(clonedChat);

但这个方案绕不开WhatsApp的虚拟列表机制——滚动时原节点会被动态回收，克隆节点也可能被意外处理，因此不是长期可行的方案。

二、适配虚拟列表的最优实现方案 #

WhatsApp网页版的聊天列表是虚拟滚动实现，只会渲染可视区域内的节点，操作DOM节点（克隆/移动）都会破坏原有逻辑。更稳妥的思路是数据层存储标签+样式控制显示+监听列表动态更新：

1. 存储标签与聊天的映射关系 #

不要存储DOM节点，而是提取每个聊天的唯一标识（比如聊天节点的data-id属性、或从聊天链接中提取的手机号/会话ID），将标签与这些标识绑定，存在Chrome的本地存储中：

// 示例：存储某个聊天的标签
const chatId = document.querySelector('.chat-item').dataset.id; // 根据实际DOM结构调整
chrome.storage.local.set({
  [chatId]: ['工作', '项目']
});

2. 用MutationObserver监听列表动态渲染 #

WhatsApp会在滚动时动态加载/回收聊天节点，用MutationObserver监听聊天列表容器的变化，每当新节点加载时，自动应用标签筛选规则：

const chatListContainer = document.querySelector('#pane-side ._1jJLl'); // 聊天列表容器选择器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach(node => {
        if (node.classList.contains('chat-item')) { // 聊天节点类名
          const chatId = node.dataset.id;
          // 获取当前选中的标签
          chrome.storage.local.get('selectedTags', (result) => {
            const selectedTags = result.selectedTags || [];
            // 获取该聊天的标签
            chrome.storage.local.get(chatId, (tagsResult) => {
              const chatTags = tagsResult[chatId] || [];
              // 判断是否匹配，设置显示状态
              const isMatch = selectedTags.some(tag => chatTags.includes(tag));
              // 用height控制避免影响滚动计算
              node.style.height = isMatch ? 'auto' : '0';
              node.style.overflow = 'hidden';
              node.style.opacity = isMatch ? '1' : '0';
            });
          });
        }
      });
    }
  });
});
observer.observe(chatListContainer, { childList: true, subtree: true });

3. 实现筛选交互 #

当用户选择标签时，更新本地存储中的selectedTags，然后遍历当前DOM中的所有聊天节点，重新应用显示规则：

// 用户选择标签后的处理函数
function onTagSelect(selectedTags) {
  chrome.storage.local.set({ selectedTags }, () => {
    // 遍历当前所有聊天节点
    document.querySelectorAll('.chat-item').forEach(node => {
      const chatId = node.dataset.id;
      chrome.storage.local.get(chatId, (tagsResult) => {
        const chatTags = tagsResult[chatId] || [];
        const isMatch = selectedTags.some(tag => chatTags.includes(tag));
        node.style.height = isMatch ? 'auto' : '0';
        node.style.overflow = 'hidden';
        node.style.opacity = isMatch ? '1' : '0';
      });
    });
  });
}

4. 注意事项 #

• 选择器要根据WhatsApp网页版的实际DOM结构调整（WhatsApp可能会更新类名/属性），可以用开发者工具查看聊天节点的特征。
• 用height:0代替display:none能避免虚拟列表的滚动高度计算出错，保持滚动体验一致。
• 操作Chrome存储时要注意异步回调的顺序，避免逻辑混乱。

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