☰

Greasy Fork is available in English.

Transparent Navigation Bar

Transform supported site's navigation bar into an acrylic nav bar.

  1. // ==UserScript==
  2. // @name         Transparent Navigation Bar
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.0.3
  5. // @description  Transform supported site's navigation bar into an acrylic nav bar.
  6. // @author       Z.H. Shing
  7. // @match        https://*/*
  8. // @match        http://*/*
  9. // @grant        none
  10. // @run-at       document-end
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     const currentDomain = window.location.hostname;
  15.     const path = window.location.pathname;
  16.     const fullPath = currentDomain + path;
  17.  
  18.  
  19.     // commonly used styles
  20.     const commonStyles = {
  21.         whiteBackgroundColor: 'rgba(255, 255, 255, 0.7)',
  22.         blackBackgroundColor: 'rgba(0, 0, 0, 0.7)',
  23.         backdropFilters: 'blur(50px) saturate(180%)'
  24.     };
  25.  
  26.  
  27.     // matching
  28.     // You should add supported sites here. All items shall be sorted alphabetically.
  29.  
  30.     // Cambridge Dictionary
  31.     if (currentDomain.match(/dictionary\.cambridge\.org/) !== null) {
  32.         cambridgeDictionary();
  33.         return;
  34.     }
  35.  
  36.     // Google Classroom
  37.     if (currentDomain.match(/classroom\.google\.com/) !== null) {
  38.         googleClassroom();
  39.         return;
  40.     }
  41.  
  42.     // Google Search
  43.     if (fullPath.match(/www\.google\..*\/search/) !== null) {
  44.         googleSearch();
  45.         return;
  46.     }
  47.  
  48.     // UK Royal Family
  49.     if (currentDomain.match(/www\.royal\.uk/) !== null) {
  50.         ukRoyalFamily();
  51.         return;
  52.     }
  53.  
  54.     // W3Schools
  55.     if (currentDomain.match(/www\.w3schools\.com/) !== null) {
  56.         wThreeSchools();
  57.         return;
  58.     }
  59.  
  60.     // YouTube
  61.     if (currentDomain.match(/www\.youtube\.com/) !== null) {
  62.         youTube();
  63.         return;
  64.     }
  65.  
  66.  
  67.     // applies styles
  68.     // Define functions for applying styles for your sites
  69.     function cambridgeDictionary() {
  70.         let navBar = document.querySelector('#header');
  71.         navBar.style.background = 'rgba(29, 42, 87, 0.7)';
  72.         navBar.style.backdropFilter = commonStyles.backdropFilters;
  73.  
  74.         // Remove sub item style override
  75.         let navChildren = navBar.querySelectorAll(':scope > div')
  76.         for (let i = 0; i < navChildren.length; i++) {
  77.             let subElement = navChildren[i];
  78.             subElement.classList.remove('bh');
  79.             subElement.classList.remove('bs');
  80.         }
  81.  
  82.         // Fix navbar text colour
  83.         let navLinks = document.querySelectorAll('li.hdib');
  84.         for (let i = 0; i < navLinks.length - 1; i++) {
  85.             navLinks[i].childNodes[0].style.color = 'white';
  86.         }
  87.     }
  88.  
  89.     async function googleClassroom() {
  90.         let navbar = document.querySelector('nav.joJglb');
  91.         applyStyleToNavBar(navbar);
  92.  
  93.         // wait until page is loaded
  94.         await sleep(5000)
  95.  
  96.         // side menu
  97.         let sidemenu = document.querySelector('div.ETRkCe');
  98.         applyStyleToNavBar(sidemenu);
  99.     }
  100.  
  101.     function googleSearch() {
  102.         // Finds the navigation bar
  103.         let navBar = document.querySelector('div.sfbg'); // Google search
  104.         if (navBar === null) navBar = document.querySelector('#kO001e'); // Google image search
  105.  
  106.         applyStyleToNavBar(navBar, true);
  107.     }
  108.  
  109.     function ukRoyalFamily() {
  110.         let navBar = document.querySelector('#nav-main');
  111.  
  112.         applyStyleToNavBar(navBar, true);
  113.     }
  114.  
  115.     function wThreeSchools() {
  116.         let navBar = document.querySelector('#topnav');
  117.         navBar.style.background = 'rgba(95, 95, 95, 0.7)';
  118.         navBar.style.backdropFilter = commonStyles.backdropFilters;
  119.     }
  120.  
  121.     function youTube() {
  122.         let navBar = document.querySelector('ytd-masthead#masthead');
  123.         applyStyleToNavBar(navBar);
  124.         document.querySelector('#chips-wrapper').style.background = "rgba(200, 200, 200, 0.7)";
  125.         document.querySelector('#chips-wrapper').style.backdropFilter = commonStyles.backdropFilters;
  126.     }
  127.  
  128.  
  129.     // commonly used functions
  130.     function applyStyleToNavBar(navBar, applyWhiteBg = true) {
  131.         navBar.style.background = applyWhiteBg ? commonStyles.whiteBackgroundColor : commonStyles.blackBackgroundColor;
  132.         navBar.style.backdropFilter = commonStyles.backdropFilters;
  133.     }
  134.  
  135.     function sleep(ms) {
  136.         return new Promise(resolve => setTimeout(resolve, ms));
  137.     }
  138. })();