通过Chrome自定义JS扩展修改指定data属性元素类名失败求助

• 先处理元素加载时机问题：很多网站用框架异步渲染内容，window.onload仅等待静态资源加载完成，动态生成的元素可能还未出现，用MutationObserver监听DOM变化更稳妥

  // 创建DOM变化观察者
  const observer = new MutationObserver(() => {
    const targetEl = document.querySelector('div[data-node-key="holders"]');
    if (targetEl) {
      // 给目标元素添加激活状态类
      targetEl.classList.add('ant-tabs-tab-active');
      // 找到元素后停止监听，避免重复执行
      observer.disconnect();
    }
  });
  
  // 监听body下所有层级的DOM变化
  observer.observe(document.body, { childList: true, subtree: true });
  

• 验证选择器正确性：打开Chrome控制台，直接执行document.querySelector('div[data-node-key="holders"]')，查看是否能返回目标元素。如果返回null，说明选择器有误（比如标签不是div、属性值大小写不匹配）

• 调整扩展注入时机：如果使用Chrome自定义JS扩展，检查注入时机是否设置为document_idle，这个时机更晚，能确保大部分动态渲染的元素已生成

• 备选操作方式：如果classList操作有异常，可直接赋值className（注意保留原有类名）

  // 找到元素后执行
  targetEl.className = 'ant-tabs-tab ant-tabs-tab-active';
  

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