Permanently conceal Google Docs side panel toggle with Tampermonkey script

Other Questions Google docs
1

I’m trying to get rid of an annoying button in Google Docs using Tampermonkey. The button is for toggling the side panel and it’s pushing the document off-center. I can hide it temporarily by inspecting the element and setting display: none; for the companion-collapser-button-container div. But it comes back when I reload the page.

How can I make this change permanent with a Tampermonkey script? I want the button to stay hidden every time I open Google Docs.

Here’s a sample script I’ve tried, but it’s not working:

// ==UserScript==
// @name         Hide Google Docs Toggle
// @match        https://docs.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    function hideToggle() {
        let toggleButton = document.querySelector('.sidebar-toggle-button');
        if (toggleButton) {
            toggleButton.style.display = 'none';
        }
    }
    
    window.addEventListener('load', hideToggle);
})();

Any ideas on how to improve this script or a better way to achieve what I want?

2

I’ve been using a slightly different approach that’s been working well for me. Instead of relying on JavaScript, I’ve found that using a CSS-based solution with Stylus or a similar extension can be more robust. Here’s what I did:

  1. Install the Stylus browser extension.
  2. Create a new style for docs.google.com.
  3. Add this CSS:

.companion-collapser-button-container {
display: none !important;
}

This method persists across page reloads and doesn’t require any JavaScript execution. It’s also less likely to break with minor UI changes. The !important flag ensures it overrides any inline styles. Just remember to keep the style enabled in Stylus for it to work consistently.

3

As someone who’s wrestled with this exact issue, I can offer some insights. Your approach is on the right track, but Google Docs’ dynamic loading can be tricky. Here’s what worked for me:

Instead of using ‘load’ event, try a MutationObserver. It’ll catch changes even after the initial load. Also, target the specific class you mentioned earlier.

Here’s a modified script that should do the trick:

// ==UserScript==
// @name         Hide Google Docs Side Panel Toggle
// @match        https://docs.google.com/document/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    const observer = new MutationObserver(() => {
        const button = document.querySelector('.companion-collapser-button-container');
        if (button) {
            button.style.display = 'none';
            observer.disconnect();
        }
    });

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

This script waits for the button to appear, hides it, then stops observing. It’s been reliable for me across multiple sessions. Remember to adjust the @match URL if needed for other Google Docs types.

4

hey, i had the same problem! try using a mutation observer instead of the load event. it catches changes better. here’s wat worked for me:

const observer = new MutationObserver(() => {
  const btn = document.querySelector('.companion-collapser-button-container');
  if (btn) btn.style.display = 'none';
});
observer.observe(document.body, { childList: true, subtree: true });

hope this helps!