Claudeの左サイドバーウザすぎ.js

hide-left-side-bar.js

// ==UserScript==
// @name         Hide Left-side bar
// @namespace    http://tampermonkey.net/
// @version      2024-11-18
// @description  Claudeのウザすぎる左サイドバーを消す
// @author       sweshelo
// @match        https://claude.ai/chat/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=claude.ai
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const status = {
        hiddenNav: false,
    };

    // スタイルの追加
    const style = document.createElement('style');
    style.textContent = `
        .nav-toggle-button {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 10000;
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .nav-toggle-button:hover {
            background-color: #45a049;
        }
        .hidden-nav {
            display: none !important;
        }
    `;
    document.head.appendChild(style);

    // トグルボタンの作成と追加
    const toggleButton = document.createElement('button');
    toggleButton.textContent = 'Toggle Nav';
    toggleButton.className = 'nav-toggle-button';
    document.body.appendChild(toggleButton);

    // 表示/非表示を切り替える関数
    function toggleNav() {
        const nav = document.querySelector('nav > div').nextElementSibling;
        console.log(nav)
        nav.style.display = status.hiddenNav ? 'none' : 'block';
        status.hiddenNav = !status.hiddenNav;
        toggleButton.textContent = status.hiddenNav ? 'Hide Nav' : 'Show Nav';
    }

    // ボタンにクリックイベントを追加
    toggleButton.addEventListener('click', toggleNav);

    // nav要素が追加されたときの処理
    function handleNavElement(nav) {
        console.log('Bye, nav-bar.');
        toggleNav()
    }

    // DOMの変更を監視する設定
    const observerConfig = {
        childList: true, // 子要素の変更を監視
        subtree: true, // すべての子孫要素も監視
    };

    // MutationObserverのコールバック
    const callback = function(mutationsList, observer) {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // 追加されたノードをチェック
                mutation.addedNodes.forEach(node => {
                    // nav要素かどうかをチェック
                    if (node.nodeName === 'NAV') {
                        handleNavElement(node);
                    }

                    // 追加されたノードの中にnav要素がないかチェック
                    if (node.nodeType === 1) { // 要素ノードの場合
                        const navElements = node.getElementsByTagName('nav');
                        Array.from(navElements).forEach(nav => {
                            handleNavElement(nav);
                        });
                    }
                });
            }
        }
    };

    // オブザーバーのインスタンス作成
    const observer = new MutationObserver(callback);

    // 監視の開始
    observer.observe(document.documentElement, observerConfig);

    // 既存のnav要素をチェック
    document.querySelectorAll('nav').forEach(nav => {
        handleNavElement(nav);
    });
})();