nxtcarson / Google Classroom Profile Picture Viewer

// ==UserScript==
// @name         Google Classroom Profile Picture Viewer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Press Z while hovering over a profile picture to view the full size version
// @author       Anonymous
// @license MIT
// @match        https://classroom.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Track which image is being hovered
    let hoveredImage = null;

    // Add hover listeners to all profile pictures
    function addHoverListeners() {
        const profilePics = document.querySelectorAll('img[src*="googleusercontent.com/a-/"]');

        profilePics.forEach(img => {
            // Add hover listeners if not already added
            if (!img.dataset.hasListener) {
                img.addEventListener('mouseenter', () => {
                    hoveredImage = img;
                });

                img.addEventListener('mouseleave', () => {
                    hoveredImage = null;
                });

                // Mark as having listeners
                img.dataset.hasListener = 'true';
            }
        });
    }

    // Listen for the Z key
    document.addEventListener('keydown', (e) => {
        if (e.key.toLowerCase() === 'z' && hoveredImage) {
            // Get the current src
            const currentSrc = hoveredImage.src;

            // Convert to full size URL by replacing size parameter
            const fullSizeUrl = currentSrc.replace(/=s\d+-c/, '=s2048-c');

            // Open in new tab
            window.open(fullSizeUrl, '_blank');
        }
    });

    // Initial setup
    addHoverListeners();

    // Set up a mutation observer to handle dynamically loaded images
    const observer = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            if (mutation.addedNodes.length) {
                addHoverListeners();
            }
        }
    });

    // Start observing the entire document for added nodes
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();