A small deep dive on MutationObservers

Lukas Karsch — Mon, 02 Dec 2024 19:22:06 +0000

When Google removed the dedicated Maps tab from search results, I decided to take matters into my own hands by creating a Chrome extension that restores this beloved feature. Sometimes the best solutions can come from solving your own pain points!

The extension is a testament to the power of web technologies and how developers can quickly adapt to changes in user experience. Thanks to Chrome's extension architecture - specifically content scripts - we can dynamically modify web pages to meet user needs.

A cool part of this extension is the use of a MutationObserver. MutationObserver is a powerful API that allows us to watch DOM changes in real-time!

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
});

What's going on here?

MutationObserver watches for changes in the DOM
We're looking specifically for the navigation tabs container
Once found, we create our custom "Maps" tab
obs.disconnect() stops observing to prevent unnecessary processing
This approach ensures we inject our tab dynamically, regardless of how the page loads

I Built a Chrome Extension to Bring Back the Google Maps Tab

Lukas Karsch — Tue, 26 Nov 2024 21:46:29 +0000

Remember when Google search results had that sweet, sweet Maps tab that made finding locations so easy? Yeah, me too.

The removal of that tab genuinely made my life a lot worse! So one day, I just decided to fix it.

Here we go: Bring Back Maps – a tiny Chrome extension that does exactly what it says in its name.

What does it do? Simple. When you do a location-related search, it magically restores the Maps tab to your search results. No fancy UI, no complicated settings. Just pure convenience and obviously 100% privacy.
🔗 Download the Extension
🌐 Read the detailed blog post at builtbylukas.dev

Took me an afternoon to build, and it solves this very specific (and honestly small) pain point I've been having for ages. Sometimes the best projects are the ones that solve a personal annoyance, right?

And developers, obviously: PRs welcome, feedback appreciated. Lmk in the comments if this saves you even a single click or if you find any problems! 👊

DEV Community: Lukas Karsch

A small deep dive on MutationObservers

I Built a Chrome Extension to Bring Back the Google Maps Tab