☰

Greasy Fork is available in English.

GitHub Notifications Highlight

Highlight notifications pertaining to yourself on GitHub and place them at the top of the home feed.

  1. // ==UserScript==
  2. // @name         GitHub Notifications Highlight
  3. // @namespace    https://github.com/GooglyBlox
  4. // @version      1.4
  5. // @description  Highlight notifications pertaining to yourself on GitHub and place them at the top of the home feed.
  6. // @author       GooglyBlox
  7. // @match        https://github.com/
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function highlightNotifications() {
  16.         const notifications = document.querySelectorAll('.js-feed-item-component');
  17.  
  18.         let importantContainer = document.querySelector('#important-notifications');
  19.         if (!importantContainer) {
  20.             importantContainer = document.createElement('div');
  21.             importantContainer.id = 'important-notifications';
  22.             importantContainer.style.border = '2px solid #f39c12';
  23.             importantContainer.style.padding = '10px';
  24.             importantContainer.style.marginBottom = '20px';
  25.             importantContainer.style.backgroundColor = '#594b00';
  26.             importantContainer.style.marginTop = '20px';
  27.             const importantTitle = document.createElement('h3');
  28.             importantTitle.textContent = 'Important Notifications';
  29.             importantContainer.appendChild(importantTitle);
  30.  
  31.             const homeTitle = document.querySelector('h2[data-target="feed-container.feedTitle"]');
  32.             if (homeTitle) {
  33.                 const parentContainer = homeTitle.parentElement;
  34.                 parentContainer.insertAdjacentElement('afterend', importantContainer);
  35.             }
  36.         }
  37.  
  38.         const processedNotifications = new Set();
  39.  
  40.         notifications.forEach(notification => {
  41.             const notificationId = notification.id;
  42.             if (!notificationId || processedNotifications.has(notificationId)) {
  43.                 return;
  44.             }
  45.  
  46.             const header = notification.querySelector('header');
  47.             if (!header) return;
  48.  
  49.             const notificationText = header.textContent.toLowerCase();
  50.             const isImportant = (
  51.                 notificationText.includes('starred') && notificationText.includes('your repository') ||
  52.                 notificationText.includes('forked') && notificationText.includes('your repository') ||
  53.                 notificationText.includes('started following')
  54.             );
  55.  
  56.             if (isImportant && !notification.closest('#important-notifications')) {
  57.                 importantContainer.appendChild(notification);
  58.                 processedNotifications.add(notificationId);
  59.             }
  60.         });
  61.     }
  62.  
  63.     const feedContainer = document.querySelector('.news');
  64.     if (feedContainer) {
  65.         const observer = new MutationObserver(() => {
  66.             setTimeout(highlightNotifications, 500);
  67.         });
  68.         observer.observe(feedContainer, { childList: true, subtree: true });
  69.     }
  70.  
  71.     window.addEventListener('load', () => {
  72.         highlightNotifications()
  73.     });
  74. })();