☰

Transparent Navigation Bar

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

当前为 2021-04-22 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Transparent Navigation Bar
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.0.1
  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.  
  61.  
  62.     // applies styles
  63.     // Define functions for applying styles for your sites
  64.     function cambridgeDictionary() {
  65.         let navBar = document.querySelector('#header');
  66.         navBar.style.background = 'rgba(29, 42, 87, 0.7)';
  67.         navBar.style.backdropFilter = commonStyles.backdropFilters;
  68.  
  69.         // Remove sub item style override
  70.         let navChildren = navBar.querySelectorAll(':scope > div')
  71.         for (let i = 0; i < navChildren.length; i++) {
  72.             let subElement = navChildren[i];
  73.             subElement.classList.remove('bh');
  74.             subElement.classList.remove('bs');
  75.         }
  76.  
  77.         // Fix navbar text colour
  78.         let navLinks = document.querySelectorAll('li.hdib');
  79.         for (let i = 0; i < navLinks.length - 1; i++) {
  80.             navLinks[i].childNodes[0].style.color = 'white';
  81.         }
  82.     }
  83.  
  84.     async function googleClassroom() {
  85.         let navbar = document.querySelector('nav.joJglb');
  86.         applyStyleToNavBar(navbar);
  87.  
  88.         // wait until page is loaded
  89.         await sleep(5000)
  90.  
  91.         // side menu
  92.         let sidemenu = document.querySelector('div.ETRkCe');
  93.         applyStyleToNavBar(sidemenu);
  94.     }
  95.  
  96.     function googleSearch() {
  97.         // Finds the navigation bar
  98.         let navBar = document.querySelector('div.sfbg'); // Google search
  99.         if (navBar === null) navBar = document.querySelector('#kO001e'); // Google image search
  100.  
  101.         applyStyleToNavBar(navBar, true);
  102.     }
  103.  
  104.     function ukRoyalFamily() {
  105.         let navBar = document.querySelector('#nav-main');
  106.  
  107.         applyStyleToNavBar(navBar, true);
  108.     }
  109.  
  110.     function wThreeSchools() {
  111.         let navBar = document.querySelector('#topnav');
  112.         navBar.style.background = 'rgba(95, 95, 95, 0.7)';
  113.         navBar.style.backdropFilter = commonStyles.backdropFilters;
  114.     }
  115.  
  116.  
  117.     // commonly used functions
  118.     function applyStyleToNavBar(navBar, applyWhiteBg = true) {
  119.         navBar.style.background = applyWhiteBg ? commonStyles.whiteBackgroundColor : commonStyles.blackBackgroundColor;
  120.         navBar.style.backdropFilter = commonStyles.backdropFilters;
  121.     }
  122.  
  123.     function sleep(ms) {
  124.         return new Promise(resolve => setTimeout(resolve, ms));
  125.     }
  126. })();