Claude Code Block Collapser v24

Collapse code blocks with symmetrical dual controls, download functionality, double-click toggle, and typing animation - Auto-copy disabled - Fixed event handler error

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

作者
carrot4522
今日安裝
0
安裝總數
4
評價
0 0 0
版本
24
建立日期
2025-11-08
更新日期
2025-11-08
尺寸
26.7 KB
授權條款
GNU General Public License v3.0
腳本執行於

📦 Code Block Collapser for Claude.ai v24

Tampermonkey Userscript for Code Management


📋 Overview

Claude Code Block Collapser enhances code management on Claude.ai by transforming cluttered code blocks into clean, collapsible sections with dual symmetrical controls, ensuring a streamlined workspace while preserving full access to all code.

Transform messy code blocks into clean, manageable sections.


✨ Key Features

📦 Collapsible Code Blocks
→ Minimize code blocks to save screen space and reduce visual clutter

⚖️ Symmetrical Dual Controls
→ Copy, download, expand, and collapse buttons on both left and right sides

📋 One-Click Copy & Download
→ Copy to clipboard or save as .txt files with visual feedback

🖱️ Double-Click Toggle
→ Quickly expand/collapse by double-clicking headers or content

⌨️ Typing Animation
→ Visual gradient shows when Claude is actively generating code


🎯 Perfect Use Cases

📜 Long Conversations
→ Focus on current responses while keeping earlier code accessible

👀 Code Reviews
→ Systematically manage multiple code blocks from Claude

📁 Multi-File Projects
→ Handle multiple files efficiently in one conversation

🎓 Learning Sessions
→ Keep code organized while learning from Claude

📊 Data Analysis
→ Manage code snippets and results cleanly


🚀 How It Works

Typing Detection System

🟡 Active Phase (Generating)

  • Animated gradient header
  • Buttons disabled until complete
  • Visual indicator shows progress

🔴 Complete Phase (Ready)

  • Gray static header
  • All controls active and ready to use
  • Safe to copy, download, or collapse

Smart Recognition

Automatic Detection:

  • ✓ Detects code blocks 20+ characters
  • ✓ Extracts language labels automatically
  • ✓ Finds script titles from code comments
  • ✓ Supports all major programming languages
  • ✓ Works with inline and multi-line code

Workflow

Step-by-step process:

  1. 🔍 Auto-detects new code
    → Script monitors for new code blocks

  2. ⌨️ Watches typing status
    → Waits for Claude to finish generating

  3. 📦 Auto-collapses when complete
    → Minimizes block to save space

  4. 🎛️ Dual controls appear
    → Buttons ready on both sides

  5. ✅ One-click actions
    → Copy/download/expand instantly

  6. 💫 Visual feedback
    → Confirms successful actions


💡 Benefits

📏 Reduced Scrolling
→ Save 60-80% vertical space in long conversations

🎯 Improved Focus
→ Keep attention on current discussion, not past code

⚡ Faster Workflow
→ Symmetrical controls accessible from either side

🛡️ Safe Operations
→ Typing detection prevents premature actions

📁 Better Organization
→ Clean, manageable code sections

💾 Quick Saving
→ Download code with one click


🔧 Installation

  1. Install Tampermonkey browser extension
  2. Add Code Block Collapser for Claude.ai v24 userscript
  3. Visit claude.ai - script activates automatically
  4. Code blocks auto-collapse when Claude finishes typing
  5. Start chatting - code management automatic!

📝 Usage Tips

Quick Actions

⚡ Fastest Toggle:

  • Double-click any header to expand/collapse
  • Works on collapsed or expanded blocks
  • Instant response

📋 Copy Code:

  • Click "Copy" button on either side
  • Visual confirmation appears
  • Code copied to clipboard instantly

💾 Download Code:

  • Click "Download" button
  • Saves as .txt file automatically
  • Filename includes language and timestamp

⏸️ Wait for Completion:

  • Watch for gray header (not animated)
  • Ensures complete code before downloading
  • Prevents partial code saves

Pro Tips

🎨 Use Dual Controls:
Access buttons from whichever side is convenient

⏱️ Monitor Animation:
Wait for gradient to stop before critical actions

💾 Save Immediately:
Download important code right away

🖱️ Double-Click Power:
Fastest way to expand/collapse blocks

📂 Organize Downloads:
Files auto-named with language and timestamp


⚙️ Customization

Configurable Settings

📏 Minimum Code Length
→ Default: 20 characters (adjustable)

⏱️ Typing Check Interval
→ Default: 300ms (customizable)

📦 Auto-Collapse Delay
→ Default: 500ms (modifiable)

🖱️ Double-Click Timing
→ Default: 300ms (adjustable)

🎨 Animation Speed
→ Gradient timing configurable


How to Customize

  1. Open Tampermonkey dashboard
  2. Find Code Block Collapser for Claude.ai v24
  3. Click Edit
  4. Modify configuration values at top
  5. Save and refresh Claude.ai

🎓 Why This Matters

❌ Problem

Claude.ai conversations with multiple code blocks become overwhelming:

  • Excessive scrolling through large code sections
  • No temporary hiding of completed code
  • No quick downloads for code snippets
  • Visual clutter makes conversations hard to follow
  • Lost context when reviewing earlier code

✅ Solution

Intelligent code management that provides:

  • 60-80% space savings through collapsible blocks
  • One-click downloads with proper filenames
  • Typing detection prevents interruptions
  • Dual controls accessible from both sides
  • Clean interface improves readability
  • Smart recognition handles all code types

🌟 Ideal For

👨‍💻 Software Developers
→ Managing multiple code snippets in Claude conversations

🎓 Students Learning to Code
→ Keeping lessons organized and accessible

✍️ Technical Writers
→ Documenting code examples from Claude

👀 Code Reviewers
→ Systematically reviewing generated code

📊 Data Scientists
→ Managing analysis code and results

🔧 DevOps Engineers
→ Working with configuration and script files


Transform your Claude.ai code management with intelligent collapsing, dual controls, and one-click downloads.


🔗 Additional Information

🌐 Compatible With: Chrome, Firefox, Edge, Safari, Opera, Brave
📺 Website Support: claude.ai and .claude.ai/
📦 Version: v24 - Event handler fixes, auto-copy disabled
📜 License: GNU GPL v3.0
⚡ Performance: Lightweight, real-time detection
🎨 Interface: Non-intrusive, symmetrical design


📊 Technical Details

Supported Languages

✓ Programming Languages:

  • JavaScript, Python, Java, C++, C#
  • Ruby, Go, Rust, Swift, Kotlin
  • PHP, TypeScript, Scala, R
  • And many more...

✓ Markup Languages:

  • HTML, XML, JSON, YAML
  • Markdown, CSS, SASS/SCSS

✓ Other Formats:

  • SQL, Shell scripts, Dockerfile
  • Configuration files
  • Plain text code blocks

Detection Capabilities

📏 Minimum Length: 20 characters (configurable)
⚡ Detection Speed: Real-time monitoring
🎯 Recognition: Language, titles, comments
🔄 Update Frequency: 300ms intervals


Control Features

🎛️ Dual Button Layout:

  • Left side controls
  • Right side controls (symmetrical)
  • Consistent placement
  • Always accessible

📋 Available Actions:

  • Copy to clipboard
  • Download as .txt file
  • Expand/collapse toggle
  • Double-click quick toggle

💫 Visual Feedback:

  • Copy confirmation
  • Download notification
  • Typing animation
  • State indicators

💪 Advanced Features

Typing Detection

🔍 Real-Time Monitoring:

  • Checks code completion status
  • Disables actions during generation
  • Prevents partial code operations
  • Visual progress indicator

⏱️ Smart Timing:

  • 300ms check intervals
  • 500ms auto-collapse delay
  • 300ms double-click window
  • Optimized for responsiveness

Auto-Collapse System

📦 Automatic Minimization:

  • Triggers after code completion
  • Saves screen space immediately
  • Preserves code accessibility
  • Configurable delay

🎯 Smart Behavior:

  • Only collapses completed code
  • Maintains expanded state during typing
  • Respects manual user actions
  • Remembers state across interactions

File Naming

📝 Automatic Filenames:

javascript_code_20241108-143000.txt
python_script_20241108-143015.txt
html_document_20241108-143030.txt

🎨 Naming Pattern:

  • Language identifier
  • "code" or "script" designation
  • Timestamp (YYYYMMDD-HHMMSS)
  • .txt extension

📞 Support & Feedback

Need Help?

🐛 Bug Reports:

  • Note the programming language
  • Describe the issue clearly
  • Check browser console for errors
  • Mention browser and version

💡 Feature Requests:

  • Suggest new control features
  • Request language support
  • Share workflow improvements
  • Describe desired behavior

⭐ Reviews:

  • Share your experience
  • Note which features you use most
  • Help others optimize their workflow
  • Suggest enhancements

💡 Pro Tips & Tricks

Maximize Efficiency

📦 Collapse Strategy:
Let blocks auto-collapse to maintain clean workspace

💾 Save Important Code:
Download critical code immediately after generation

🖱️ Master Double-Click:
Practice double-click toggle for fastest navigation

⚖️ Use Both Sides:
Access controls from whichever side is convenient

⏱️ Watch Animations:
Wait for static header before important actions

📂 Organize Downloads:
Create project folders for downloaded code


Workflow Integration

📋 For Reviews:

  1. Let all code auto-collapse
  2. Expand one block at a time
  3. Review systematically
  4. Download reviewed code

📚 For Learning:

  1. Keep current lesson expanded
  2. Collapse completed examples
  3. Reference earlier code as needed
  4. Download for practice

💻 For Development:

  1. Generate multiple solutions
  2. Keep blocks collapsed
  3. Expand to compare options
  4. Download chosen implementation

🎉 Thank You!

Thank you for using Code Block Collapser for Claude.ai!

Keep your Claude conversations clean and organized with intelligent code management.

Happy coding! 💻✨


Last Updated: November 2025
Version: 24
Compatible with: Tampermonkey on all major browsers
Works on: claude.ai and all subdomains