对 MutationObservers 进行深入研究

当 Google 从搜索结果中删除专用的地图标签时,我决定自己动手,创建一个 Chrome 扩展程序来恢复这个备受喜爱的功能。有时最好的解决方案可能来自于解决你自己的痛点!

该扩展程序证明了网络技术的强大功能以及开发人员如何快速适应用户体验的变化。得益于 Chrome 的扩展程序架构(特别是内容脚本),我们可以动态修改网页以满足用户需求。

此扩展的一个很酷的部分是使用“MutationObserver”。MutationObserver 是一个强大的 API,它允许我们实时观察 DOM 变化!

const observer = new MutationObserver((mutations, obs) => {
    const tabsContainer = document.querySelector('div[role="navigation"] div[role="list"]');
    if (tabsContainer) {
        createMapsTab(); 
        obs.disconnect(); 
        makeImageClickable(); 
    }
});

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

这里发生了什么事?

  • MutationObserver 监视 DOM 中的变化
  • 我们专门寻找导航标签容器
  • 找到后,我们将创建自定义“地图”标签
  • obs.disconnect() 停止观察以防止不必要的处理
  • 这种方法确保我们动态注入标签,无论页面如何加载