javascriptgoogle-searchtampermonkeygreasemonkey-4

Want to make Google-search page automatically show more definitions by setting attribute "aria-expanded" to "true" on page load


I always want to see the expanded section when searching for a definition, so I would like it to automatically expand upon loading the page.

Using Tampermonkey to create a userscript that applies to google.com/search?q=meaning+*

From inspecting page elements I have found line <div class="S8ee5 CwbYXd wHYlTd vk_arc" aria-controls="tsuid_46" aria-expanded="false" data-fbevent="fastbutton" role="button" tabindex="0">

"aria-expanded" changes value when clicking on the button.

Class "S8ee5 CwbYXd wHYlTd vk_arc" has spaces in it, which apparently means multiple classes, so should setAttribute() access by index?

I added window.onload to try to make it run after the page has finished loading in case it tries to access elements prematurely.

My ineffective attempt:

(window.onload = function() {
    'use strict';

    document.getElementsByClassName("S8ee5 CwbYXd wHYlTd vk_arc")[0].setAttribute("aria-expanded", "true");
})();

Solution

  • Here, this should do the trick.

    Note that I am using the old-tech setTimeout() instead of doing this properly with a MutationObserver. I haven't used MutationObserver enough to be able to do this quickly and a cursory initial attempt was not successful within the time available, so here is the Quick 'n Dirty setTimeout solution:

    Note that you might need to increase the _TIMEDELAY value (milliseconds) if it is not reliably dropping-down the extra info.

    // ==UserScript==
    // @name         Google Dictionary auto-expand
    // @namespace    http://cssyphus.com
    // @version      0.2
    // @match        https://www.google.com/search?q=meaning+*
    // @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
    // @grant        none
    // ==/UserScript==
    
    (async function() {
        'use strict';
        const _TIMEDELAY = 500;
        const $ = document.querySelector.bind(document);
        let csh = 0;
    
        while (csh < 500){
            await sleep(100);
            csh = getComputedStyle( $('#kp-wp-tab-overview > div') );
            if ( csh.getPropertyValue('height').replace('px','') > 400 ){
                break;
            }
        }
        await sleep(_TIMEDELAY);
        $('#kp-wp-tab-overview hr+div').click();
    
    })();
    function sleep(ms){
        return new Promise(function (resolve, reject) {
            setTimeout(()=>{
                resolve();
            },ms);
        })
    }