使用Scripty Chrome扩展注入JS时DOM未加载导致查询失效问题

你的问题核心是页面表格属于动态加载内容（比如通过AJAX异步拉取数据、前端框架渲染生成），普通的window.onload只能等待静态DOM加载完成，此时动态表格还未生成，所以querySelectorAll("td")返回长度为0。下面是两种可行的修复方案：

方案1：用MutationObserver监听DOM变化（优雅方案） #

通过监听DOM树的变化，在目标<td>元素出现时立刻执行检测逻辑：

// 先请求通知权限
if (Notification.permission !== 'granted') {
  console.log("permission is not granted!")
  Notification.requestPermission()
}

// 创建DOM变化观察者
const observer = new MutationObserver((mutations) => {
  const available = document.querySelectorAll("td");
  if (available.length > 0) {
    // 找到目标元素后停止监听
    observer.disconnect();
    
    let availableCondition = true;
    for (let index = 0; index < available.length; index++) {
      console.log(available[index].innerText)
      if (available[index].innerText.toLowerCase().includes('la sede non offre')) {
        availableCondition = false;
        break;
      }
    }

    if (availableCondition) {
      new Notification("Appuntamento disponibile");
    } else {
      location.reload();
    }
  }
});

// 开始监听整个body的子节点变化（包含嵌套子元素）
observer.observe(document.body, {
  childList: true,
  subtree: true
});

方案2：用setInterval轮询（简单直接） #

如果觉得观察者模式复杂，定时查询DOM直到找到目标元素也是有效的方法：

// 先请求通知权限
if (Notification.permission !== 'granted') {
  console.log("permission is not granted!")
  Notification.requestPermission()
}

// 每1秒查询一次DOM，可根据页面加载速度调整间隔
const checkInterval = setInterval(() => {
  const available = document.querySelectorAll("td");
  if (available.length > 0) {
    // 找到元素后停止轮询
    clearInterval(checkInterval);
    
    let availableCondition = true;
    for (let index = 0; index < available.length; index++) {
      console.log(available[index].innerText)
      if (available[index].innerText.toLowerCase().includes('la sede non offre')) {
        availableCondition = false;
        break;
      }
    }

    if (availableCondition) {
      new Notification("Appuntamento disponibile");
    } else {
      location.reload();
    }
  }
}, 1000);

额外注意事项 #

• 调整Scripty的注入时机：选择**「页面完全加载后」**的选项，避免过早注入代码
• 确认扩展注入上下文：确保代码注入到页面全局上下文，而非隔离沙箱（部分扩展默认隔离会导致无法访问页面DOM）

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