Firefox扩展Mutation Observer仅开控制台生效问题咨询

问题原因 #

• Mutation Observer逻辑漏洞：原代码仅在mutation.target匹配#docs-insert-menu时触发隐藏操作，但Google Docs插入菜单展开时，子菜单项是动态添加到#docs-insert-menu的子节点中，此时mutation的目标是子元素而非父容器本身，导致回调从未执行隐藏函数。
• 控制台触发生效的原因：打开开发者工具时，浏览器会触发DOM重绘/重新计算，中断了Google Docs的异步渲染流程，给目标元素留出了足够的加载时间，此时隐藏逻辑能成功定位到元素。

setTimeout的可行性与作用机制 #

完全可行，作用机制是延迟执行隐藏逻辑，给Google Docs的动态菜单渲染留出缓冲时间。菜单展开是异步操作，Mutation Observer触发时（子节点开始变化），目标菜单项可能还未插入DOM，直接查询会返回null；延迟100-300毫秒后，菜单元素已完全渲染，就能成功定位并隐藏。

优化后的代码 #

// 简化元素定位：直接找包含目标label的菜单项容器
function hideUploadOption() {
  // 用closest直接定位父级菜单项，比parentNode更可靠
  const uploadMenuItem = document.querySelector('.goog-menuitem-label[aria-label="Upload from computer u"]')?.closest('.goog-menuitem');
  if (uploadMenuItem) {
    uploadMenuItem.style.display = 'none';
    console.log('Upload option hidden');
  }
}

const observerConfig = {
  childList: true,
  subtree: true
};

const observer = new MutationObserver(() => {
  // 只要插入菜单子树有变化就尝试执行隐藏，结合setTimeout确保元素已渲染
  setTimeout(hideUploadOption, 150);
});

const insertMenuItem = document.querySelector('#docs-insert-menu');
if (insertMenuItem) {
  observer.observe(insertMenuItem, observerConfig);
  // 初始加载时也尝试一次
  hideUploadOption();
}

优化点说明 #

• 用closest('.goog-menuitem')替代parentNode.parentNode：避免DOM结构变化导致定位失效，逻辑更健壮。
• 取消mutation.target判断：只要插入菜单的子树有变化，就尝试执行隐藏逻辑，覆盖所有菜单更新场景。
• 加入setTimeout延迟：解决菜单异步渲染导致的元素未加载问题，延迟时间可根据实际情况调整（100-300ms均适用）。

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