Chrome扩展开发：如何按序执行dispatchEvent并等待每个完成

要解决这个问题，核心是等待目标元素freightServiceAddon被页面的onchange逻辑创建完成后，再执行后续操作。以下是两种可靠的实现方式：

方法一：使用MutationObserver监听DOM变化 #

MutationObserver可以实时监控DOM的创建、修改等变化，当目标元素出现时立即执行操作，是最精准的方式：

// 第一步：触发列表框的change事件
const selectElmt = document.getElementById('freightServiceSelect');
selectElmt.selectedIndex = 24;
selectElmt.dispatchEvent(new Event("change", { bubbles: true, cancelable: true }));

// 第二步：监听DOM，等待目标元素出现
const observer = new MutationObserver((mutations, obs) => {
  const addonElmt = document.getElementsByName("freightServiceAddon")[0];
  if (addonElmt) {
    // 找到元素后执行操作
    addonElmt.checked = true;
    addonElmt.dispatchEvent(new Event("click", { bubbles: true, cancelable: true }));
    // 停止监听
    obs.disconnect();
  }
});

// 配置监听：监听整个文档的子元素添加，也可以缩小监听范围到父容器提升性能
observer.observe(document.body, {
  childList: true,
  subtree: true
});

如果知道freightServiceAddon的父容器ID，可以把document.body换成对应的父元素，减少监听范围，提升效率。

方法二：使用轮询定期检查元素 #

如果场景简单，也可以用setInterval定期检查元素是否存在，找到后执行操作并清除定时器：

// 第一步：触发列表框的change事件
const selectElmt = document.getElementById('freightServiceSelect');
selectElmt.selectedIndex = 24;
selectElmt.dispatchEvent(new Event("change", { bubbles: true, cancelable: true }));

// 第二步：轮询检查元素
const checkInterval = setInterval(() => {
  const addonElmt = document.getElementsByName("freightServiceAddon")[0];
  if (addonElmt) {
    addonElmt.checked = true;
    addonElmt.dispatchEvent(new Event("click", { bubbles: true, cancelable: true }));
    clearInterval(checkInterval); // 清除定时器
  }
}, 100); // 每100ms检查一次，可根据页面响应速度调整间隔

额外注意点 #

• 触发事件时，建议加上{ bubbles: true, cancelable: true }参数，确保事件和用户手动操作的行为一致，避免页面的onchange逻辑不触发。
• 如果页面的onchange逻辑包含异步请求（比如Ajax），DOM监听的方式依然通用，无需额外处理请求状态。

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