如何在messenger.com页面完全加载后执行代码？

我正在使用Chrome扩展User JavaScript and CSS，希望在messenger.com页面完全加载后执行代码。先后尝试了window.onload、document.addEventListener('load',...)、document.addEventListener('DOMContentLoaded',...)、jQuery的$(window).on('load')方法，还使用了MutationObserver，但这些方式均无法正常工作，仅通过setTimeout延迟2秒执行的代码能够生效：

setTimeout(() => {
    let placeForButtons = document.body.querySelector('[class="bdao358l om3e55n1 g4tp4svg alzwoclg jg3vgc78 i15ihif8 aeinzg81 sl27f92c i85zmo3j sr926ui1 jl2a5g8c sn0e7ne5 f6rbj1fe l3ldwz01 srn514ro s9xz0pwp rl78xhln c4m0enpj c7y9u1f0 f5ap8yob"]');
    console.log("place", placeForButtons);
    document.querySelector('[class="alzwoclg jcxyg2ei i85zmo3j"]').remove();
    placeForButtons.appendChild(startButton);
    placeForButtons.appendChild(stopButton);
}, 2000);

以下jQuery写法无法生效：

$(window).on('load', function() {
    let placeForButtons = document.body.querySelector('[class="bdao358l om3e55n1 g4tp4svg alzwoclg jg3vgc78 i15ihif8 aeinzg81 sl27f92c i85zmo3j sr926ui1 jl2a5g8c sn0e7ne5 f6rbj1fe l3ldwz01 srn514ro s9xz0pwp rl78xhln c4m0enpj c7y9u1f0 f5ap8yob"]');
    console.log("place", placeForButtons);
    document.querySelector('[class="alzwoclg jcxyg2ei i85zmo3j"]').remove();
    placeForButtons.appendChild(startButton);
    placeForButtons.appendChild(stopButton);
});

尝试的MutationObserver代码也没有输出：

const observer = new MutationObserver(function() {
    console.log('start');
    if(document.querySelector('[class="alzwoclg jcxyg2ei i85zmo3j"]')) {
    let placeForButtons = document.body.querySelector('[class="bdao358l om3e55n1 g4tp4svg alzwoclg jg3vgc78 i15ihif8 aeinzg81 sl27f92c i85zmo3j sr926ui1 jl2a5g8c sn0e7ne5 f6rbj1fe l3ldwz01 srn514ro s9xz0pwp rl78xhln c4m0enpj c7y9u1f0 f5ap8yob"]');
    console.log("place", placeForButtons);
    document.querySelector('[class="alzwoclg jcxyg2ei i85zmo3j"]').remove();
    placeForButtons.appendChild(startButton);
    placeForButtons.appendChild(stopButton);
    observer.disconnect();
    }
});

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

可行解决方案 #

1. 修复MutationObserver配置问题 #

你的MutationObserver代码存在配置格式错误，正确的监听参数不需要嵌套，同时建议缩小监听范围以提升性能：

const observer = new MutationObserver((mutations) => {
  // 同时检查两个目标元素是否存在
  const targetElement = document.querySelector('[class="alzwoclg jcxyg2ei i85zmo3j"]');
  const placeElement = document.body.querySelector('[class="bdao358l om3e55n1 g4tp4svg alzwoclg jg3vgc78 i15ihif8 aeinzg81 sl27f92c i85zmo3j sr926ui1 jl2a5g8c sn0e7ne5 f6rbj1fe l3ldwz01 srn514ro s9xz0pwp rl78xhln c4m0enpj c7y9u1f0 f5ap8yob"]');
  
  if (targetElement && placeElement) {
    console.log("place", placeElement);
    targetElement.remove();
    placeElement.appendChild(startButton);
    placeElement.appendChild(stopButton);
    observer.disconnect(); // 完成操作后停止监听
  }
});

// 正确配置：监听body的子树及子元素变化
observer.observe(document.body, {
  subtree: true,
  childList: true
});

2. 使用requestAnimationFrame轮询（替代setTimeout的更可靠方案） #

如果MutationObserver仍有问题，用requestAnimationFrame轮询更贴合浏览器渲染周期，避免固定延迟的不确定性：

function checkAndExecute() {
  const targetElement = document.querySelector('[class="alzwoclg jcxyg2ei i85zmo3j"]');
  const placeElement = document.body.querySelector('[class="bdao358l om3e55n1 g4tp4svg alzwoclg jg3vgc78 i15ihif8 aeinzg81 sl27f92c i85zmo3j sr926ui1 jl2a5g8c sn0e7ne5 f6rbj1fe l3ldwz01 srn514ro s9xz0pwp rl78xhln c4m0enpj c7y9u1f0 f5ap8yob"]');
  
  if (targetElement && placeElement) {
    console.log("place", placeElement);
    targetElement.remove();
    placeElement.appendChild(startButton);
    placeElement.appendChild(stopButton);
  } else {
    requestAnimationFrame(checkAndExecute); // 未找到元素则继续轮询
  }
}

// 启动轮询
checkAndExecute();

3. 调整扩展脚本执行时机 #

在User JavaScript and CSS扩展中，找到messenger.com对应的脚本设置，将执行时机改为document_idle（Chrome扩展默认的晚执行时机，会等待页面核心内容加载完成），可能无需额外监听代码即可生效。

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