开发Chrome扩展时无法访问纽约时报填字游戏页面HTML集合元素

问题原因 #

你遇到的document.getElementsByClassName('xwd__toolbar--tools')[0]返回undefined，核心原因有两个：

1. DOM未完全加载：代码执行时机过早，目标元素还没被渲染到页面中。
2. 动态生成的DOM：纽约时报填字游戏的工具栏是通过JavaScript动态渲染的（比如依赖前端框架生成），初始HTML中并没有这个元素，直接获取自然找不到。

解决方案 #

1. 确保代码在DOM就绪后执行 #

通过DOMContentLoaded事件包裹代码，保证仅在页面DOM加载完成后执行元素获取逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const toolbar = document.querySelector('.xwd__toolbar--tools');
  if (toolbar) {
    // 插入自定义按钮
    const prevItem = document.createElement('li');
    prevItem.innerHTML = '<button style="margin: 0 4px;">上一题</button>';
    const nextItem = document.createElement('li');
    nextItem.innerHTML = '<button style="margin: 0 4px;">下一题</button>';
    
    toolbar.appendChild(prevItem);
    toolbar.appendChild(nextItem);
  }
});

2. 用MutationObserver监听动态元素 #

如果DOMContentLoaded仍找不到元素，说明元素是异步渲染的，此时用MutationObserver监听DOM变化，直到目标元素出现：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      const toolbar = document.querySelector('.xwd__toolbar--tools');
      if (toolbar) {
        // 添加自定义按钮
        const prevItem = document.createElement('li');
        prevItem.innerHTML = '<button style="margin: 0 4px;">上一题</button>';
        const nextItem = document.createElement('li');
        nextItem.innerHTML = '<button style="margin: 0 4px;">下一题</button>';
        
        toolbar.appendChild(prevItem);
        toolbar.appendChild(nextItem);
        
        observer.disconnect(); // 找到元素后停止监听，避免重复执行
      }
    }
  });
});

// 监听body及其所有子元素的DOM变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

3. 调整扩展的运行时机 #

在manifest.json的content_scripts中指定run_at: "document_end"，确保脚本在DOM加载完成后再运行：

{
  "manifest_version": 3,
  "name": "填字游戏导航按钮",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://www.nytimes.com/crosswords/game/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
}

额外提示 #

• 优先使用document.querySelector('.xwd__toolbar--tools')代替getElementsByClassName，前者返回单个匹配元素，更简洁直观。
• 给自定义按钮添加基础样式（比如margin），避免和现有按钮挤在一起，提升体验。

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