无ID元素定位方案：Kahoot谷歌扩展昵称过滤开发求助

你当前用getElementsByClassName绑定固定类名的思路有问题——Kahoot的这类长串类名（比如controller-entry__ControllerName-sc-sqj4to-1 onogI）是动态生成的，页面更新或版本迭代后就会失效，不能作为稳定的定位依据。下面给你几个实用的解决办法：

方案1：基于元素结构+语义特征定位 #

Kahoot的玩家条目结构有固定的语义规律，你可以用模糊类名匹配+层级选择器来定位昵称元素，示例代码：

// 用MutationObserver监听页面DOM变化，替代死循环
const observer = new MutationObserver(() => {
  // 定位所有玩家昵称元素：父容器含controller-entry前缀，子元素含Name前缀
  const nameElements = document.querySelectorAll('[class*="controller-entry"] [class*="Name"]');
  nameElements.forEach(el => {
    const nickname = el.textContent.trim();
    // 替换成你的不良词汇检测逻辑
    if (nickname.includes('不良词汇')) {
      el.textContent = '[已过滤]';
      // 也可以直接隐藏整个玩家条目
      el.closest('[class*="controller-entry"]').style.display = 'none';
    }
  });
});

// 监听页面主体的DOM变化
observer.observe(document.body, { childList: true, subtree: true });

方案2：利用关联元素反向定位 #

如果结构定位还是不稳定，可结合玩家条目的关联元素（比如头像、分数块）反向找昵称：

// 找到所有玩家头像元素，取相邻的昵称节点
const avatars = document.querySelectorAll('[class*="Avatar"]');
avatars.forEach(avatar => {
  const nameEl = avatar.nextElementSibling;
  if (nameEl) {
    const nickname = nameEl.textContent.trim();
    // 执行过滤逻辑
  }
});

关键优化：替换死循环为MutationObserver #

你写的while(true)会直接卡死浏览器，必须换成MutationObserver——它只会在页面新增玩家条目时触发过滤逻辑，性能友好得多，上面的示例已经用到了这个方法。

额外实用提示 #

• 调试时可以在Chrome开发者工具的Elements面板，右键昵称元素选「Copy > Copy selector」，把生成的选择器里的动态类名改成[class*="xxx"]的模糊匹配格式
• 可以把不良词汇存进数组，用正则批量检测：

  const badWords = ['词1', '词2', '词3'];
  const badWordRegex = new RegExp(badWords.join('|'), 'i');
  if (badWordRegex.test(nickname)) {
    // 执行过滤操作
  }
  

内容的提问来源于stack exchange，提问作者Husky-boi