☰

Google Search Better Favicons

Replaces low-resolution favicons in Google search results with higher-quality versions.

// ==UserScript==
// @name               Google Search Better Favicons
// @namespace          https://greasyfork.org/en/users/1467948-stonedkhajiit
// @version            0.1.0
// @description        Replaces low-resolution favicons in Google search results with higher-quality versions.
// @author             StonedKhajiit
// @icon               https://www.google.com/s2/favicons?sz=64&domain=google.com
// @match              https://www.google.tld/search*
// @exclude            /^https?:\/\/([a-z0-9-]+\.)*google\.[a-z.]+\/search.*(udm=2|udm=7|udm=28|udm=36|udm=39)/
// @run-at             document-end
// @grant              GM_addStyle
// @grant              GM_getValue
// @grant              GM_setValue
// @grant              GM_registerMenuCommand
// @license            MIT
// ==/UserScript==

(function() {
    'use strict';

    // ---[ 1. CONFIGURATION & STATE ]---

    const GSBF_FAVICON_SHAPE_KEY = 'gsbf_favicon_shape';
    const GSBF_SQUARE_FILL_KEY = 'gsbf_square_fill';
    const GSBF_MENU_COMMAND_SHAPE_ID = 'gsbf_toggle_favicon_shape';
    const GSBF_MENU_COMMAND_FILL_ID = 'gsbf_toggle_square_fill';

    const SELECTORS = {
        // Selector for result items on the "News" tab, used for style exclusions.
        newsSearchResult: '.SoaBEf',
        // The primary selector for containers that are treated as a single search result.
        searchResultItem: '.MjjYud, .SoaBEf, .m7jPZ, .A6K0A',
        // Selects the element that directly contains the favicon image within a result.
        faviconContainer: 'span.DDKf1c, span.H9lube, g-img.QyR1Ze',
        // Selects the main link within various result item structures.
        linkElement: '.yuRUbf a[href], .xe8e1b a[href], a.WlydOe[href], .a-no-hover-decoration[href], .h4kbcd[href]'
    };

    // ---[ 2. STYLES ]---

    const STYLES = `
        /* gsbf-processed-favicon: Base class for all script-handled icons. */
        /* gsbf-upgraded-favicon: Added only after a successful HQ replacement to trigger the fill effect. */

        /* Style the image directly for .DDKf1c containers. */
        body.gsbf-square-favicons :is(.MjjYud, .m7jPZ, .A6K0A):not(:has(.SoaBEf)) .DDKf1c.gsbf-processed-favicon img {
            border-radius: 4px !important;
        }

        /* Style the container for .H9lube containers to create a mask. */
        body.gsbf-square-favicons :is(.MjjYud, .m7jPZ, .A6K0A):not(:has(.SoaBEf)) .H9lube.gsbf-processed-favicon {
            border-radius: 4px !important;
            overflow: hidden !important;
        }

        /* Ensure the image inside a styled .H9lube container remains a true square. */
        body.gsbf-square-favicons :is(.MjjYud, .m7jPZ, .A6K0A):not(:has(.SoaBEf)) .H9lube.gsbf-processed-favicon img {
            border-radius: 0 !important;
        }

        /* Enlarge the icon to fill its container if it was successfully upgraded. */
        body.gsbf-square-favicons.gsbf-square-fill-enabled :is(.MjjYud, .m7jPZ, .A6K0A):not(:has(.SoaBEf)) .H9lube.gsbf-upgraded-favicon img.XNo5Ab {
            width: 26px !important;
            height: 26px !important;
        }

        /* Add a transition effect for smoothness. */
        .gsbf-processed-favicon,
        .gsbf-processed-favicon img {
             transition: border-radius 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
        }
    `;

    // ---[ 3. CORE LOGIC ]---

    /**
     * Reads all stored preferences and applies the corresponding CSS classes to the document body.
     */
    function applyPreferences() {
        // Apply shape preference, with "square" as the new default.
        const shape = GM_getValue(GSBF_FAVICON_SHAPE_KEY, 'square');
        document.body.classList.toggle('gsbf-square-favicons', shape === 'square');

        // Apply square fill preference
        const fill = GM_getValue(GSBF_SQUARE_FILL_KEY, true); // Default to true (enabled)
        document.body.classList.toggle('gsbf-square-fill-enabled', fill);

        updateMenuCommands();
    }

    /**
     * Registers and updates the state of all toggleable menu commands.
     */
    function updateMenuCommands() {
        // Command 1: Toggle favicon shape
        const currentShape = GM_getValue(GSBF_FAVICON_SHAPE_KEY, 'square');
        const isSquare = currentShape === 'square';
        const shapeMenuText = `${isSquare ? '[✓]' : '[  ]'} Use Square Favicons`;

        GM_registerMenuCommand(shapeMenuText, () => {
            GM_setValue(GSBF_FAVICON_SHAPE_KEY, isSquare ? 'circle' : 'square');
            applyPreferences();
        }, { id: GSBF_MENU_COMMAND_SHAPE_ID });

        // Command 2: Toggle fill effect for square icons
        const currentFill = GM_getValue(GSBF_SQUARE_FILL_KEY, true);
        const fillMenuText = `  ${currentFill ? '[✓]' : '[  ]'} Enlarge HQ Square Icons to Fill`;

        GM_registerMenuCommand(fillMenuText, () => {
            GM_setValue(GSBF_SQUARE_FILL_KEY, !currentFill);
            applyPreferences();
        }, { id: GSBF_MENU_COMMAND_FILL_ID });
    }


    /**
     * Enhances a single favicon by replacing it with a high-quality version if available.
     * @param {HTMLElement} faviconContainer - The DOM element containing the favicon.
     * @param {string} domain - The domain of the search result.
     */
    function enhanceResultFavicon(faviconContainer, domain) {
        if (!faviconContainer || !domain) return;

        // Immediately add the 'processed' class to apply basic styles.
        faviconContainer.classList.add('gsbf-processed-favicon');

        const existingImg = faviconContainer.querySelector('img');
        const existingSvg = faviconContainer.querySelector('svg');

        // If Google shows a generic SVG placeholder, skip network request.
        if (existingSvg) {
            return;
        }

        // Proceed only if there is an actual image to potentially replace.
        if (!existingImg) {
            return;
        }

        const targetSize = 96;
        const highQualityUrl = `https://www.google.com/s2/favicons?sz=${targetSize}&domain=${domain}`;

        const newImg = new Image();
        newImg.onload = () => {
            // Replace the icon only if the new one is higher resolution.
            if (newImg.naturalWidth > (existingImg.naturalWidth || 16)) {
                existingImg.src = highQualityUrl;
                // Add the 'upgraded' class only AFTER successful replacement.
                faviconContainer.classList.add('gsbf-upgraded-favicon');
            }
        };
        newImg.onerror = () => { /* Graceful failure */ };
        newImg.src = highQualityUrl;
    }

    /**
     * Processes a single search result DOM node to find and enhance its favicon.
     * @param {HTMLElement} resultNode - The container element of a single search result.
     */
    function processResultItem(resultNode) {
        if (resultNode.dataset.gsbfProcessed) return;
        resultNode.dataset.gsbfProcessed = 'true';

        const faviconContainer = resultNode.querySelector(SELECTORS.faviconContainer);
        const linkElement = resultNode.querySelector(SELECTORS.linkElement);
        if (!faviconContainer || !linkElement) return;

        try {
            let targetUrl;
            const href = linkElement.href;

            // Handle Google's redirect links.
            if (href && href.startsWith(window.location.origin + '/url?q=')) {
                targetUrl = new URL(href).searchParams.get('q');
            } else {
                targetUrl = href;
            }

            const domain = new URL(targetUrl).hostname;

            enhanceResultFavicon(faviconContainer, domain);
        } catch(e) {
            // Ignore nodes that don't have a valid URL structure.
        }
    }

    /**
     * Sets up the MutationObserver and initializes the script.
     */
    function main() {
        GM_addStyle(STYLES);
        applyPreferences();

        const observer = new MutationObserver((mutations) => {
            for (const mutation of mutations) {
                for (const addedNode of mutation.addedNodes) {
                    if (addedNode.nodeType === 1) {
                        if (addedNode.matches(SELECTORS.searchResultItem)) {
                            processResultItem(addedNode);
                        }
                        addedNode.querySelectorAll(SELECTORS.searchResultItem).forEach(processResultItem);
                    }
                }
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });

        // Process results already on the page at script load.
        document.querySelectorAll(SELECTORS.searchResultItem).forEach(processResultItem);
    }

    main();

})();