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
  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) cambridgeDictionary();
  32.  
  33. // Google Classroom
  34. if (currentDomain.match(/classroom\.google\.com/) !== null) googleClassroom();
  35.  
  36. // Google Search
  37. if (fullPath.match(/www\.google\..*\/search/) !== null) googleSearch();
  38.  
  39. // UK Royal Family
  40. if (currentDomain.match(/www\.royal\.uk/) !== null) ukRoyalFamily();
  41.  
  42. // W3Schools
  43. if (currentDomain.match(/www\.w3schools\.com/) !== null) wThreeSchools();
  44.  
  45.  
  46.  
  47. // applies styles
  48. // Define functions for applying styles for your sites
  49. function cambridgeDictionary() {
  50. let navBar = document.querySelector('#header');
  51. navBar.style.background = 'rgba(29, 42, 87, 0.7)';
  52. navBar.style.backdropFilter = commonStyles.backdropFilters;
  53.  
  54. // Remove sub item style override
  55. let navChildren = navBar.querySelectorAll(':scope > div')
  56. for (let i = 0; i < navChildren.length; i++) {
  57. let subElement = navChildren[i];
  58. subElement.classList.remove('bh');
  59. subElement.classList.remove('bs');
  60. }
  61.  
  62. // Fix navbar text colour
  63. let navLinks = document.querySelectorAll('li.hdib');
  64. for (let i = 0; i < navLinks.length - 1; i++) {
  65. navLinks[i].childNodes[0].style.color = 'white';
  66. }
  67. }
  68.  
  69. async function googleClassroom() {
  70. let navbar = document.querySelector('nav.joJglb');
  71. applyStyleToNavBar(navbar);
  72.  
  73. // wait until page is loaded
  74. await sleep(5000)
  75.  
  76. // side menu
  77. let sidemenu = document.querySelector('div.ETRkCe');
  78. applyStyleToNavBar(sidemenu);
  79. }
  80.  
  81. function googleSearch() {
  82. // Finds the navigation bar
  83. let navBar = document.querySelector('div.sfbg'); // Google search
  84. if (navBar === null) navBar = document.querySelector('#kO001e'); // Google image search
  85.  
  86. applyStyleToNavBar(navBar, true);
  87. }
  88.  
  89. function ukRoyalFamily() {
  90. let navBar = document.querySelector('#nav-main');
  91.  
  92. applyStyleToNavBar(navBar, true);
  93. }
  94.  
  95. function wThreeSchools() {
  96. let navBar = document.querySelector('#topnav');
  97. navBar.style.background = 'rgba(95, 95, 95, 0.7)';
  98. navBar.style.backdropFilter = commonStyles.backdropFilters;
  99. }
  100.  
  101.  
  102. // commonly used functions
  103. function applyStyleToNavBar(navBar, applyWhiteBg = true) {
  104. navBar.style.background = applyWhiteBg ? commonStyles.whiteBackgroundColor : commonStyles.blackBackgroundColor;
  105. navBar.style.backdropFilter = commonStyles.backdropFilters;
  106. }
  107.  
  108. function sleep(ms) {
  109. return new Promise(resolve => setTimeout(resolve, ms));
  110. }
  111. })();