Adjust size of Google Chat sidebar

adjust-google-sidebar-width.user.js

// ==UserScript==
// @name         Adjust size of Google Chat sidebar
// @namespace    none
// @version      0.1
// @description  This script tries to adjust necessary CSS Rules to increase size of Google Chat sidebar
// @author       Thomas Schlage
// @match        https://mail.google.com/mail/u/0/
// @match        https://mail.google.com/chat/u/0/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const TARGET_WIDTH = '400px';

    function queryIframes() {
        return document.querySelectorAll('iframe[title=Chat], iframe[title=Spaces]');
    }

    function getCssClasses(element) {
        const sheets = document.styleSheets;
        const cssClasses = [];

        const matches = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.msMatchesSelector || element.oMatchesSelector;

        for (const sheet of Array.from(sheets)) {
            try {
                for (const rule of Array.from(sheet.rules || sheet.cssRule)) {
                    if (matches.call(element, rule.selectorText)) {
                        cssClasses.push(rule);
                    }
                }
            } catch (e) {} // Make error about inaccessible CORS css files
        }
        return cssClasses;
    }

    function adjustStyles() {
        queryIframes().forEach(iframe => {
            const widthParents = [];
            let element = iframe;
            while (element) {
                const cssClasses = getCssClasses(element);
                const cssClassesLimitingWidth = cssClasses.filter(cssClass => cssClass.style.minWidth || cssClass.style.maxWidth);
                if (cssClassesLimitingWidth.length) {
                    for (const cssClass of cssClassesLimitingWidth) {
                        if (parseInt(cssClass.style.minWidth)) {
                            cssClass.style.minWidth = TARGET_WIDTH;
                        }
                        if (parseInt(cssClass.style.maxWidth)) {
                            cssClass.style.maxWidth = TARGET_WIDTH;
                        }
                    }
                }
                element = element.parentElement;
            }
            iframe.style.width = TARGET_WIDTH;
        });
    }

    const interval = setInterval(() => {
        if (queryIframes().length > 0) {
            adjustStyles();
            clearInterval(interval);
        }
    }, 100);
})();