使用MutationObserver等待按钮出现实现StackExchange站点Cookie按钮自动点击

• 初始执行时机问题：CustomizeCookies 会在脚本加载完成后立即执行，此时页面的Cookie横幅可能还没完成动态渲染，会直接命中else分支打印undefined，后续不会再尝试查找Cookie设置按钮。
• 选择器过于脆弱：当前匹配按钮用了全量类名组合，站点只要微调前端类名规则就会导致匹配失效，优先用业务属性或者核心功能类名更稳定。
• 观察者未释放：匹配到接受按钮完成点击后，没有终止MutationObserver的监听，会一直占用内存重复执行逻辑。
• 匹配逻辑有遗漏：仅监听新增节点内部的元素，若接受按钮是现有节点修改属性渲染出来的，会触发不了匹配逻辑。

优化后可直接运行的代码 #

// 工具函数：等待指定选择器的元素出现
function waitForElement(selector, timeout = 30000) {
  return new Promise((resolve, reject) => {
    // 先检查现有DOM是否存在目标元素
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    // 开启观察者监听DOM变化
    const observer = new MutationObserver(mutations => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
    // 超时兜底，避免无限占用内存
    setTimeout(() => {
      observer.disconnect();
      reject(new Error(`等待元素${selector}超时`));
    }, timeout);
  });
}

// 主执行逻辑
async function handleStackExchangeCookie() {
  try {
    // 等待Cookie设置按钮加载完成后点击
    const settingBtn = await waitForElement('.js-cookie-settings');
    settingBtn.click();
    // 等待自定义设置弹窗的保存按钮加载完成后点击
    const saveBtn = await waitForElement('.js-consent-save');
    saveBtn.click();
  } catch (err) {
    console.log('Cookie自动处理失败:', err.message);
  }
}

handleStackExchangeCookie();

优化后的代码用通用的元素等待逻辑替代了重复的观察者代码，简化了选择器仅保留核心功能类名，自带超时兜底机制，不会出现内存泄漏问题，完全适配StackExchange全站的Cookie弹窗规则。

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