Chrome扩展调用MutationObserver的observe方法报参数非Node类型问题

报错根因 #

你遇到的报错和特殊表现是几个问题叠加导致的：

• 首次加载时脚本执行时机早于目标DOM渲染完成，同时你只在data-count != 0时才给elementToWatch赋值，首次加载默认值为0的情况下elementToWatch是undefined，传入observe方法自然触发「参数不是Node类型」的报错
• 切回标签页时页面已经完成渲染、data-count可能已经更新为非0值，所以此时elementToWatch有有效值，脚本正常运行
• 额外的错误：你要监听data-count的属性变化，但监听配置里的attributeFilter写的是data-update，完全不匹配你要监听的属性
• 冗余逻辑：manifest已经配置了content_scripts自动注入脚本，background里又做了一次重复注入，会导致脚本执行冲突

修正方案 #

1. 简化manifest.json #

删除多余的background注入逻辑，保留content_scripts配置即可：

{
  "manifest_version": 2,
  "name": "extension",
  "version": "1.69",
  "description": "Does things:)",
  "content_scripts": [
    {
      "matches": ["https://exampleweb.com/tickets/*"],
      "js": ["foreground.js"],
      "run_at": "document_idle"
    }
  ]
}

可以直接删除background.js整个文件。

2. 重写foreground.js #

增加等待目标元素出现的逻辑，正确配置监听规则：

// 等待目标元素出现的工具函数
function waitForElement(selector, testAttribute) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      const el = document.querySelector(selector);
      if(el.getAttribute(testAttribute) === "public-conversation") return resolve(el);
    }
    const observer = new MutationObserver(mutations => {
      const el = document.querySelector(selector);
      if (el && el.getAttribute(testAttribute) === "public-conversation") {
        observer.disconnect();
        resolve(el);
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

// 执行监听逻辑
waitForElement(".ember-view.c-tab__list__item.publicConversation", "data-test-id").then(targetEl => {
  // 先输出初始值
  console.log('初始data-count值：', targetEl.dataset.count);
  // 配置监听data-count属性变化
  const observerConfig = {
    attributes: true,
    attributeFilter: ['data-count']
  };
  const countObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      const newCount = mutation.target.dataset.count;
      console.log('data-count更新：', newCount);
    });
  });
  countObserver.observe(targetEl, observerConfig);
});

改动说明 #

• 新增元素等待逻辑，不管页面什么时候渲染出目标元素，都能正确捕获到再绑定监听，不会出现首次加载拿不到元素的问题
• 修正了监听属性的配置，只监听data-count的变化，符合你的需求
• 直接监听元素节点而非属性节点，是MutationObserver的标准使用方式，兼容性更好
• 删除了重复注入逻辑，避免脚本多次执行产生的冲突

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