Chrome扩展querySelector返回null，MutationObserver报错求助

核心问题分析 #

1. 目标元素动态加载：你要跟踪的.items_9ujCP是页面通过JS动态渲染生成的，DOMContentLoaded触发时该元素还未被添加到DOM中，因此querySelector返回null，进而导致MutationObserver.observe抛出参数类型错误。
2. run_at: document_end无日志的原因：你设置了all_frames: true，content script会注入到页面所有iframe中，可能主页面的脚本日志被iframe的日志覆盖，或者部分iframe未匹配matches规则，导致脚本未在主页面正常执行。

修复步骤 #

步骤1：调整监听逻辑，等待目标元素出现 #

不要直接在DOMContentLoaded中尝试获取元素，改为先监听整个文档的变化，直到目标元素存在后再启动MutationObserver：

修改content.js如下：

console.log('content script start');

function startObserver(target) {
  const observer = new MutationObserver(mutationRecords => {
    console.log(mutationRecords);
  });
  observer.observe(target, {
    childList: true, 
    subtree: true,
    characterDataOldValue: true
  });
  console.log('已开始观察目标元素:', target);
}

function waitForElement(selector, callback) {
  // 先检查元素是否已存在
  const element = document.querySelector(selector);
  if (element) {
    callback(element);
    return;
  }
  // 元素不存在则监听文档变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        const element = document.querySelector(selector);
        if (element) {
          observer.disconnect();
          callback(element);
        }
      }
    });
  });
  observer.observe(document.documentElement, {
    childList: true,
    subtree: true
  });
}

// 等待目标元素出现后启动观察
waitForElement('.items_9ujCP', startObserver);

步骤2：优化manifest配置 #

• 若不需要在所有iframe中注入脚本，将all_frames改为false，避免脚本注入到无关iframe导致日志混乱：

  "content_scripts": [
    {
      "matches": ["*://*.site.ru/*"],
      "js": ["./content.js"],
      "run_at": "document_end",
      "all_frames": false
    }
  ]
  

• 保持run_at: document_end即可，此时DOM已基本构建完成，能更早开始监听元素变化。

额外验证点 #

• 确认matches规则正确匹配目标网站，避免脚本未注入到目标页面。
• 在浏览器控制台执行document.querySelector('.items_9ujCP')时，确保是在主页面上下文（而非iframe）中执行，避免误判元素存在性。

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