How to add a custom Noe app that highlights emails from a specific sender

A Noe app is a small script you can inject into any Intum page. Here’s how to create one that highlights emails from a specific sender.

First - enable the Noe module

1. Open Account -> Modules
2. Find Noe and switch to Active
3. Refresh the page

Where to add the app

Noe -> Noe Apps -> +Add

Form fields

• Name - e.g. Highlight email from [email protected]
• URL code - e.g. highlight_system_emails
• App engine - JS
• CSS engine - none
• Show in module - mail/emails/index
• Active - checked

Source code

(function() {
  console.log('[Noe] Email highlighting app for [email protected] launched');
  const TARGET = '[email protected]';
  const RED_BG = '#fee2e2';
  const RED_BORDER = '#dc2626';

  function highlight() {
    const frames = document.querySelectorAll('turbo-frame[id^="index_email_"]');
    frames.forEach(frame => {
      const titles = Array.from(frame.querySelectorAll('[title]'))
        .map(e => e.getAttribute('title') \|\| '').join(' ');
      const text = frame.textContent \|\| '';
      const haystack = (text + ' ' + titles).toLowerCase();
      if (haystack.includes(TARGET)) {
        const li = frame.querySelector('li');
        if (li && !li.dataset.noeHighlighted) {
          li.style.backgroundColor = RED_BG;
          li.style.borderLeft = '4px solid ' + RED_BORDER;
          li.dataset.noeHighlighted = '1';
        }
      }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', highlight);
  } else {
    highlight();
  }
  document.addEventListener('turbo:frame-load', highlight);
  document.addEventListener('turbo:render', highlight);
  document.addEventListener('turbo:load', highlight);

  const list = document.querySelector('ul[data-id="mail_email"]');
  if (list) {
    new MutationObserver(highlight).observe(list, { childList: true, subtree: true });
  }
})();

How to change the target address

Change const TARGET = '[email protected]'; to any address or domain fragment like '@company.com'.

Full list of Show in module values: Internal Noe Apps.