Personio Userscript: Open Teams-Chat with a person when clicking on their Email

personio-teams-links.js

"use strict";
// ==UserScript==
// @name         Personio: Open Teams-Chat with a person when clicking on their Email in Personio
// @namespace    https://github.com/yutamago
// @version      2025-05-10
// @description  Open Teams-Chat with a person when clicking on their Email in Personio
// @author       Yutamago
// @match        *://*.app.personio.com/*
// @icon         https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.personio.com&size=64
// @grant        none
// @noframes
// @run-at       document-idle
// ==/UserScript==
(async function () {
    'use strict';
    function replaceLinksInChildren(element) {
        const mailLinks = Array.from(element.getElementsByTagName('a')).filter(x => x.href.startsWith('mailto:'));
        for (const mailLink of mailLinks) {
            console.info('Replacing link: ', mailLink.href);
            mailLink.href = mailLink.href.replace('mailto:', 'msteams:/l/chat/0/0?users=');
            const span = mailLink.children.item(0);
            span.textContent = 'In Teams öffnen';
        }
    }
    const onMutation = function (record) {
        const addedElements = record.flatMap(x => Array.from(x.addedNodes).map(x => x.parentElement)).filter(x => !!x);
        for (const element of addedElements) {
            replaceLinksInChildren(element);
        }
    };
    function isUrlRelevant(url) {
        if (typeof url === 'string')
            url = new URL(url);
        return url.pathname.startsWith('/organization/org-chart');
    }
    const onNavigate = function (event) {
        if (isUrlRelevant(event.destination.url)) {
            observeChanges();
        }
        else {
            unobserveChanges();
        }
    };
    const mutationObserver = new MutationObserver(onMutation);
    let isObserved = false;
    function observeChanges() {
        if (isObserved)
            return;
        isObserved = true;
        mutationObserver.observe(document, { subtree: true, childList: true });
    }
    function unobserveChanges() {
        if (!isObserved)
            return;
        isObserved = false;
        mutationObserver.disconnect();
    }
    if (isUrlRelevant(window.location.href)) {
        observeChanges();
    }
    window['navigation']?.addEventListener('navigate', onNavigate);
})();

personio-teams-links.ts

// ==UserScript==
// @name         Personio: Open Teams-Chat with a person when clicking on their Email in Personio
// @namespace    https://github.com/yutamago
// @version      2025-05-10
// @description  Open Teams-Chat with a person when clicking on their Email in Personio
// @author       Yutamago
// @match        *://*.app.personio.com/*
// @icon         https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.personio.com&size=64
// @grant        none
// @noframes
// @run-at       document-idle
// ==/UserScript==

type EventName = keyof DocumentEventMap;
type NavigateEvent = {
  destination: NavigationDestination
};
type NavigationDestination = {
  url: string
}

(async function() {
  'use strict';


  function replaceLinksInChildren(element: HTMLElement | Document) {
    const mailLinks: HTMLAnchorElement[] = Array.from(element.getElementsByTagName('a')).filter(x => x.href.startsWith('mailto:'));

    for (const mailLink of mailLinks) {
      console.info('Replacing link: ', mailLink.href);
      mailLink.href = mailLink.href.replace('mailto:', 'msteams:/l/chat/0/0?users=');
      const span = mailLink.children.item(0);
      span.textContent = 'In Teams öffnen';
    }
  }

  const onMutation: MutationCallback = function(record) {
    const addedElements = record.flatMap(x => Array.from(x.addedNodes).map(x => x.parentElement)).filter(x => !!x);

    for (const element of addedElements) {
      replaceLinksInChildren(element);
    }
  };

  function isUrlRelevant(url: string | URL) {
    if (typeof url === 'string')
      url = new URL(url);

    return url.pathname.startsWith('/organization/org-chart');
  }
  const onNavigate = function(event: NavigateEvent) {
    if (isUrlRelevant(event.destination.url)) {
      observeChanges();
    } else {
      unobserveChanges();
    }
  };



  const mutationObserver = new MutationObserver(onMutation);
  let isObserved = false;

  function observeChanges() {
    if (isObserved) return;
    isObserved = true;
    mutationObserver.observe(document, { subtree: true, childList: true });
  }
  function unobserveChanges() {
    if (!isObserved) return;
    isObserved = false;
    mutationObserver.disconnect();
  }

  if (isUrlRelevant(window.location.href)) {
    observeChanges();
  }
  window['navigation']?.addEventListener('navigate', onNavigate);

})();