Firefox下用JS修改Reddit评论区点赞数显示失败求助

先说说你之前代码的问题 #

• 第一次的代码没效果：因为现在Reddit用了Web Components，点赞数藏在shreddit-comment-action-row的Shadow DOM里，你直接选普通的span元素根本碰不到它；而且那些类名比如p-0.text-12是动态生成的，随时可能变，靠这个定位元素不靠谱。
• 第二次的代码时灵时不灵：
  • Reddit评论是滚动加载的，你只在页面刷新时跑一次代码，后面新加载的评论根本没处理到
  • 有时候你跑代码的时候，元素的Shadow DOM还没初始化好，自然找不到目标元素
  • 你的代码语法不完整（map后面缺闭合括号），而且Object.values(posts)完全多余，querySelectorAll返回的结果直接就能遍历

靠谱的解决方案（纯JS，不用jQuery） #

用MutationObserver监听DOM变化，不管是页面一开始就有的评论，还是后来滚动加载出来的，都能实时处理。代码如下：

// 单独处理一条评论的点赞数
function handleVoteCount(commentRow) {
  try {
    // 确保能拿到Shadow DOM
    const shadowRoot = commentRow.shadowRoot || commentRow.openOrClosedShadowRoot;
    if (!shadowRoot) return;
    
    const voteEl = shadowRoot.querySelector('faceplate-number');
    if (voteEl) {
      // 隐藏点赞数
      voteEl.style.display = 'none';
      // 要是想改成固定数值比如0，就换成下面这句：
      // voteEl.textContent = '0';
    }
  } catch (e) {
    // 出问题也不影响其他元素
  }
}

// 先处理页面上已经有的评论
document.querySelectorAll('shreddit-comment-action-row').forEach(handleVoteCount);

// 监听动态新增的评论
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // 判断是不是目标元素，或者包含目标元素的容器
      if (node.tagName === 'SHREDDIT-COMMENT-ACTION-ROW') {
        handleVoteCount(node);
      } else if (node.querySelectorAll) {
        node.querySelectorAll('shreddit-comment-action-row').forEach(handleVoteCount);
      }
    });
  });
});

// 启动监听，监听整个页面的DOM变化（也可以精准定位评论区的父容器）
observer.observe(document.body, {
  childList: true,
  subtree: true
});

关于jQuery的疑问 #

没必要用jQuery，它在处理Shadow DOM的时候没什么优势，还得多加载一个外部库。现在原生JS的API已经足够好用，轻量且不依赖外部资源。

额外提醒 #

Reddit的界面结构说不定哪天会更新，要是以后代码失效了，记得检查一下元素的标签名（比如shreddit-comment-action-row、faceplate-number是不是变了）。在Firefox里不用额外设置，默认就能访问Shadow DOM。

内容的提问来源于stack exchange，提问作者Defaced.Face