Chrome扩展中Mutation Observer在页面完全加载后部分网站失效的问题排查

嗨，我来帮你捋捋这个问题哈！你遇到的情况在Angular这类单页应用（SPA）网站上特别常见——它们靠history.pushState这类方式做路由切换，全程不刷新页面，这就给咱们的Mutation Observer挖了不少坑。

先说说为啥加载状态下好用，之后就不行了：

• 初始化时机踩坑了：你的initiateObserverListener函数应该只在页面首次加载时执行了一次对吧？但SPA切换路由时，页面不会整体刷新，甚至可能把你一开始添加的#extension-dataHolder元素给移除或者替换掉（毕竟Angular的组件销毁机制会清理DOM），那绑定在这个元素上的Observer自然就“失联”了，怎么触发回调嘛！

接下来给你几个具体的排查和解决方向：

• 先确认你的目标元素还活着不：按F12打开开发者工具的Elements面板，操作页面切换路由或者做你之前触发问题的操作，看看你创建的#extension-dataHolder还在不在body里。要是它没了，那Observer肯定歇菜，得想办法让这个元素能在路由切换后保留，或者重新创建绑定。
• 检查Observer的监听配置对不对：你现在的代码里没明确写Observer的配置参数吧？默认情况下Mutation Observer的监听范围很有限，要是你想监听属性变化，得明确把attributes设为true，比如：

const observerConfig = {
  attributes: true, // 开启属性变化监听
  attributeFilter: ['data-test'] // 可选，只监听特定属性，减少不必要的触发
};
const observer = new MutationObserver(function(mutations) {
  console.log("Here");
  mutations.forEach(function(mutation) {
    console.log("属性变化了：", mutation.attributeName);
  });
});
observer.observe(dataHolder, observerConfig);

• 跟着SPA的路由节奏走：既然网站用了不刷新页面的路由，那咱们就得监听这类导航事件。可以用Chrome扩展的chrome.webNavigation.onHistoryStateUpdated API，每次路由变化后重新初始化你的Observer；或者在页面里监听popstate事件，触发后重新执行initiateObserverListener函数，确保Observer始终绑定在有效的元素上。
• 别只盯着自己创建的元素：如果你其实是想监听页面上其他元素的属性变化，那得把Observer的目标改成那个页面元素，而且要确保在那个元素存在之后再绑定Observer——可以先用一个临时的MutationObserver监听body的子节点变化，等目标元素出现了再绑定具体的监听逻辑。

备注：内容来源于stack exchange，提问作者Frosty