document.querySelector('#CS_quickMenuIframe') it doesn't work for the event 'mouseover'

[boromyr]

Hello, I am trying to apply a CSS style when the mouse hovers over the context search popup menu, but document.querySelector('#CS_quickMenuIframe') seems to find nothing, and it also returns null in the console.

(function () {
    'use strict';

    // const elementoB = document.querySelector('.DKV0Md');
    let popup = document.querySelector('#CS_quickMenuIframe');

    // Funzione per gestire l'evento mouseover
    function handleMouseOver() {
        addStyle('#prevue--wrapper { width: 1100px !important; }');
        // elementoB.style.setProperty('background-color', 'red', 'important');
    }

    // Funzione per gestire l'evento mouseout
    function handleMouseOut() {
        if (window.location.href.includes("google.com/search?q") && !window.location.href.includes("tbm=")) {
            addStyle('#prevue--wrapper { width: 610px !important; }');
        } else {
            addStyle('#prevue--wrapper { width: 50% !important; }');
        }
        // elementoB.style.setProperty('background-color', 'unset', 'important');
    }

    // Funzione per aggiungere gli eventi mouseover e mouseout all'elemento #prevue--wrapper
    function addEventsToElement() {
        popup.addEventListener('mouseover', handleMouseOver);
        popup.addEventListener('mouseout', handleMouseOut);
    }

    // Funzione per creare un MutationObserver e monitorare la creazione dell'elemento #prevue--wrapper
    function observeElementCreation() {
        const observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                    popup = document.querySelector('#CS_quickMenuIframe');
                    if (popup) {
                        if (window.location.href.includes("google.com/search?q") && !window.location.href.includes("tbm=")) {
                            addStyle('#prevue--wrapper { width: 610px !important; }');
                        }
                        addEventsToElement();
                        observer.disconnect();
                    }
                }
            });
        });

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

    // Avvia l'osservazione della creazione dell'elemento #prevue--wrapper
    observeElementCreation();

    function addStyle(styleString) {
        const style = document.createElement('style');
        style.textContent = styleString;
        document.head.appendChild(style);
    }

})();

The original script works perfectly with popup = document.querySelector('#prevue--wrapper');, but I would like to make it work with CS as well, could you give me some advice?

[ssborbis]

Is this a script for greasemonkey or something? If you weren't aware, CS has it's own internal custom CSS injection through CS Options -> General -> User Styles if you need to apply custom styles.

All CS frames have been moved to the shadow DOM as of a few major release ago. The following code is what CS uses to find elements in the shadow DOM, You should be able to use similar code to find the iframe. That may depend on how your script is being injected though.

function getShadowRoot() {

    let div = document.querySelector('contextsearch-widgets');

    if ( div && div.shadowRoot ) return div.shadowRoot;
    else return document.body || null;
}

getShadowRoot().getElementById('CS_quickMenuIframe');

[boromyr]

It is a Tampermonkey script. I am familiar with custom CSS and use it, but I don't think it can be used to modify the CSS style of another element from a different extension. Thank you, I will try your function in the script!

[ssborbis]

Doing some housekeeping. Feel free to reopen this thread if the script I provided didn't fix your issues.