UserScript: Replace giphy.com links with actual GIFs in Microsoft Teams

userscript-teams-giphy-gif.js

// ==UserScript==
// @name         Replace GIF links with actual GIFs in Microsoft Teams
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Replace GIF links with actual GIFs in Microsoft Teams
// @author       Heiko
// @match        https://teams.microsoft.com/*
// @icon         https://www.google.com/s2/favicons?domain=microsoft.com
// @grant        none
// ==/UserScript==

(function() {
    function replaceTeamsLinksWithGifs() {
        const links = document.querySelectorAll('a[href*="giphy.com"]');

        console.log('replaceTeamsLinksWithGifs', links);

        for(const link of links) {
            const giphy_id = link.href.split('/')[4];
            const image_url = 'https://i.giphy.com/media/' + giphy_id + '/giphy.webp';
            link.insertAdjacentHTML('afterend', '<img src="' + image_url + '"/>');
            link.remove();
        }
    }

    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

    const target = document.querySelector('body');

    const observer = new MutationObserver(debounce(replaceTeamsLinksWithGifs, 500));

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

    observer.observe(target, config);
})();