Chrome扩展Content Script无法找元素且DOMContentLoaded事件不触发

核心可能原因：目标元素存在于Shadow DOM中 #

你遇到的现象（手动Ctrl+F定位后控制台能找到元素，但脚本/轮询找不到），大概率是因为.board-btns元素被包裹在Shadow DOM里。Chrome控制台在手动选中Shadow DOM内元素后，会自动切换上下文到该Shadow DOM，此时执行getElementsByClassName能拿到结果，但默认情况下脚本无法直接访问Shadow DOM内部元素。

解决方案1：递归遍历Shadow DOM查找目标元素 #

先实现一个能穿透Shadow DOM的元素查找函数：

function querySelectorAllShadow(selector, root = document) {
  let elements = Array.from(root.querySelectorAll(selector));
  // 遍历所有带Shadow DOM的元素
  root.querySelectorAll('*').forEach(el => {
    if (el.shadowRoot) {
      elements = elements.concat(querySelectorAllShadow(selector, el.shadowRoot));
    }
  });
  return elements;
}

// 修改你的检查函数
function checkForElement() {
  const buttondivs = querySelectorAllShadow('.board-btns');
  if (buttondivs.length > 0) {
    const buttondiv = buttondivs[0];
    buttondiv.appendChild(buttondiv.firstElementChild.cloneNode(true));
    return true;
  }
  return false;
}

// 继续使用轮询
var intervalId = setInterval(function() {
  console.log("Checking for element");
  if(checkForElement()) {
    clearInterval(intervalId); 
  }
}, 500);

解决方案2：检查Chrome扩展Manifest配置 #

确保你的manifest.json中content script的配置能覆盖目标页面的加载时机和框架：

{
  "content_scripts": [
    {
      "matches": ["https://目标国际象棋网站域名/*"],
      "js": ["contentScript.js"],
      "run_at": "document_idle", // 确保DOM基本加载完成后再注入
      "all_frames": true // 如果元素在iframe中，开启这个选项
    }
  ]
}

• run_at: document_idle是Chrome推荐的注入时机，会在DOM加载完成后、页面资源加载前注入，比document_start更适合操作DOM。
• 如果目标页面使用iframe加载课程内容，all_frames: true能让content script注入到所有子框架中。

解决方案3：优化Mutation Observer监听Shadow DOM #

修改Mutation Observer，让它能监听Shadow DOM内部的变化：

function observeShadowDOM(root, callback) {
  const observer = new MutationObserver((mutations) => {
    callback(mutations);
    // 遍历新增节点，检查是否有带Shadow DOM的元素
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          if (node.shadowRoot) {
            observeShadowDOM(node.shadowRoot, callback);
          }
          // 检查子节点
          node.querySelectorAll('*').forEach(child => {
            if (child.shadowRoot) {
              observeShadowDOM(child.shadowRoot, callback);
            }
          });
        }
      });
    });
  });

  observer.observe(root, { childList: true, subtree: true });
  return observer;
}

// 初始化监听
const callback = function() {
  const buttondivs = querySelectorAllShadow('.board-btns');
  if(buttondivs.length > 0) {
    const buttondiv = buttondivs[0];
    buttondiv.appendChild(buttondiv.firstElementChild.cloneNode(true));
    observer.disconnect();
    return;
  }
};

const observer = observeShadowDOM(document, callback);

额外验证步骤 #

1. 在Chrome控制台执行querySelectorAllShadow('.board-btns')（用上面的函数），确认是否能找到目标元素。
2. 打开Chrome开发者工具的Elements面板，查看.board-btns元素是否被包裹在带有#shadow-root标记的节点下。

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