Selam kecil dalam MutationObservers

Apabila Google mengalih keluar tab Peta khusus daripada hasil carian, saya memutuskan untuk mengambil tindakan sendiri dengan membuat sambungan Chrome yang memulihkan ciri yang digemari ini. Kadangkala penyelesaian terbaik boleh datang daripada menyelesaikan masalah kesakitan anda sendiri!

Pelanjutan ini adalah bukti kuasa teknologi web dan cara pembangun boleh menyesuaikan diri dengan cepat kepada perubahan dalam pengalaman pengguna. Terima kasih kepada seni bina sambungan Chrome - khususnya skrip kandungan - kami boleh mengubah suai halaman web secara dinamik untuk memenuhi keperluan pengguna.

Satu bahagian hebat sambungan ini ialah penggunaan MutationObserver. MutationObserver ialah API berkuasa yang membolehkan kami menonton perubahan DOM dalam masa nyata!

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

Apa yang berlaku di sini?

1. MutationObserver memerhatikan perubahan dalam DOM
2. Kami sedang mencari khusus untuk bekas tab navigasi
3. Setelah ditemui, kami mencipta tab "Peta" tersuai kami
4. obs.disconnect() berhenti memerhati untuk mengelakkan pemprosesan yang tidak perlu
5. Pendekatan ini memastikan kami menyuntik tab kami secara dinamik, tidak kira bagaimana halaman dimuatkan

Atas ialah kandungan terperinci Selam kecil dalam MutationObservers. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!