☰

隐藏Claude.ai侧边栏

隐藏Claude.ai的侧边栏并添加首页按钮以获得更好的使用体验

  1. // ==UserScript==
  2. // @name                Hide Claude.ai Sidebar
  3. // @name:zh-CN          隐藏Claude.ai侧边栏
  4. // @name:zh-TW          隱藏Claude.ai側邊欄
  5. // @name:ja             Claude.aiサイドバーを非表示
  6. // @namespace           http://tampermonkey.net/
  7. // @version             241117
  8. // @description         Hide the sidebar of Claude.ai and add a home button for better user experience
  9. // @description:zh-CN   隐藏Claude.ai的侧边栏并添加首页按钮以获得更好的使用体验
  10. // @description:zh-TW   隱藏Claude.ai的側邊欄並添加首頁按鈕以獲得更好的使用體驗
  11. // @description:ja      Claude.aiのサイドバーを非表示にし、ホームボタンを追加して使いやすくします
  12. // @author              laocao
  13. // @match               https://claude.ai/*
  14. // @grant               none
  15. // @license MIT
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.     'use strict';
  20.  
  21.     // Add styles to hide sidebar and customize home button
  22.     // 添加样式以隐藏侧边栏和自定义首页按钮
  23.     const style = document.createElement('style');
  24.     style.textContent = `
  25.         /* Hide sidebar navigation
  26.            隐藏侧边栏导航 */
  27.         body > div:nth-child(3) > nav {
  28.             display: none !important;
  29.             width: 0 !important;
  30.             opacity: 0 !important;
  31.             pointer-events: none !important;
  32.         }
  33.  
  34.         /* Make main content area full width
  35.            让主内容区域占据全屏 */
  36.         body > div:nth-child(3) > main {
  37.             margin-left: 0 !important;
  38.             width: 100% !important;
  39.             max-width: 100% !important;
  40.         }
  41.  
  42.         /* Prevent sidebar-related animations and transitions
  43.            防止侧边栏相关动画和过渡效果 */
  44.         [class*="transition-"],
  45.         [class*="transform-"] {
  46.             transition: none !important;
  47.             transform: none !important;
  48.         }
  49.  
  50.         /* Home button styles
  51.            首页按钮样式 */
  52.         #homeButton {
  53.             padding: 8px 12px;
  54.             background-color: #2D3748;
  55.             color: white;
  56.             border: none;
  57.             border-radius: 6px;
  58.             cursor: pointer;
  59.             font-size: 14px;
  60.             display: inline-flex;
  61.             align-items: center;
  62.             gap: 6px;
  63.             transition: background-color 0.2s;
  64.             margin-right: 8px;
  65.             position: relative;
  66.             z-index: 1;
  67.         }
  68.  
  69.         #homeButton:hover {
  70.             background-color: #4A5568;
  71.         }
  72.     `;
  73.     document.head.appendChild(style);
  74.  
  75.     // Create home button with SVG icon
  76.     // 创建带SVG图标的首页按钮
  77.     const homeButton = document.createElement('button');
  78.     homeButton.id = 'homeButton';
  79.     homeButton.innerHTML = `
  80.         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
  81.             <path d="M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V160h32v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"/>
  82.         </svg>
  83.         ${
  84.             {
  85.                 'zh-CN': '首页',
  86.                 'zh-TW': '首頁',
  87.                 'ja': 'ホーム'
  88.             }[navigator.language] || 'Home'
  89.         }
  90.     `;
  91.     homeButton.onclick = () => window.location.href = '/';
  92.  
  93.     // Check and insert button periodically
  94.     // 定期检查并插入按钮
  95.     function insertButton() {
  96.         const targetDiv = document.querySelector('body > div:nth-child(3) > div > div > div:nth-child(1)');
  97.         if (targetDiv && !document.getElementById('homeButton')) {
  98.             targetDiv.insertBefore(homeButton, targetDiv.firstChild);
  99.         }
  100.     }
  101.  
  102.     // Execute after page load
  103.     // 页面加载完成后执行
  104.     window.addEventListener('load', () => {
  105.         insertButton();
  106.         // Check every 500ms for 10 seconds
  107.         // 每500ms检查一次，持续10秒
  108.         let attempts = 0;
  109.         const interval = setInterval(() => {
  110.             insertButton();
  111.             attempts++;
  112.             if (attempts >= 20) {
  113.                 clearInterval(interval);
  114.             }
  115.         }, 500);
  116.     });
  117.  
  118.     // Try to insert immediately
  119.     // 立即尝试插入一次
  120.     insertButton();
  121. })();