☰

Transparent Navigation Bar

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

// ==UserScript==
// @name         Transparent Navigation Bar
// @namespace    http://tampermonkey.net/
// @version      0.1.0.3
// @description  Transform supported site's navigation bar into an acrylic nav bar.
// @author       Z.H. Shing
// @match        https://*/*
// @match        http://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    const currentDomain = window.location.hostname;
    const path = window.location.pathname;
    const fullPath = currentDomain + path;


    // commonly used styles
    const commonStyles = {
        whiteBackgroundColor: 'rgba(255, 255, 255, 0.7)',
        blackBackgroundColor: 'rgba(0, 0, 0, 0.7)',
        backdropFilters: 'blur(50px) saturate(180%)'
    };


    // matching
    // You should add supported sites here. All items shall be sorted alphabetically.

    // Cambridge Dictionary
    if (currentDomain.match(/dictionary\.cambridge\.org/) !== null) {
        cambridgeDictionary();
        return;
    }

    // Google Classroom
    if (currentDomain.match(/classroom\.google\.com/) !== null) {
        googleClassroom();
        return;
    }

    // Google Search
    if (fullPath.match(/www\.google\..*\/search/) !== null) {
        googleSearch();
        return;
    }

    // UK Royal Family
    if (currentDomain.match(/www\.royal\.uk/) !== null) {
        ukRoyalFamily();
        return;
    }

    // W3Schools
    if (currentDomain.match(/www\.w3schools\.com/) !== null) {
        wThreeSchools();
        return;
    }

    // YouTube
    if (currentDomain.match(/www\.youtube\.com/) !== null) {
        youTube();
        return;
    }


    // applies styles
    // Define functions for applying styles for your sites
    function cambridgeDictionary() {
        let navBar = document.querySelector('#header');
        navBar.style.background = 'rgba(29, 42, 87, 0.7)';
        navBar.style.backdropFilter = commonStyles.backdropFilters;

        // Remove sub item style override
        let navChildren = navBar.querySelectorAll(':scope > div')
        for (let i = 0; i < navChildren.length; i++) {
            let subElement = navChildren[i];
            subElement.classList.remove('bh');
            subElement.classList.remove('bs');
        }

        // Fix navbar text colour
        let navLinks = document.querySelectorAll('li.hdib');
        for (let i = 0; i < navLinks.length - 1; i++) {
            navLinks[i].childNodes[0].style.color = 'white';
        }
    }

    async function googleClassroom() {
        let navbar = document.querySelector('nav.joJglb');
        applyStyleToNavBar(navbar);

        // wait until page is loaded
        await sleep(5000)

        // side menu
        let sidemenu = document.querySelector('div.ETRkCe');
        applyStyleToNavBar(sidemenu);
    }

    function googleSearch() {
        // Finds the navigation bar
        let navBar = document.querySelector('div.sfbg'); // Google search
        if (navBar === null) navBar = document.querySelector('#kO001e'); // Google image search

        applyStyleToNavBar(navBar, true);
    }

    function ukRoyalFamily() {
        let navBar = document.querySelector('#nav-main');

        applyStyleToNavBar(navBar, true);
    }

    function wThreeSchools() {
        let navBar = document.querySelector('#topnav');
        navBar.style.background = 'rgba(95, 95, 95, 0.7)';
        navBar.style.backdropFilter = commonStyles.backdropFilters;
    }

    function youTube() {
        let navBar = document.querySelector('ytd-masthead#masthead');
        applyStyleToNavBar(navBar);
        document.querySelector('#chips-wrapper').style.background = "rgba(200, 200, 200, 0.7)";
        document.querySelector('#chips-wrapper').style.backdropFilter = commonStyles.backdropFilters;
    }


    // commonly used functions
    function applyStyleToNavBar(navBar, applyWhiteBg = true) {
        navBar.style.background = applyWhiteBg ? commonStyles.whiteBackgroundColor : commonStyles.blackBackgroundColor;
        navBar.style.backdropFilter = commonStyles.backdropFilters;
    }

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
})();