☰

HackAPrompt - Focus Mode 🎯

Youtube Full Screen like Zooming for HackAPrompt Challenges

作者
KarthiDreamr
日安装量
0
总安装量
1
评分
0 0 0
版本
2.2
创建于
2025-08-18
更新于
2025-08-21
大小
8.9 KB
许可证
MIT
适用于

HackAPrompt - Focus Mode

An essential userscript for AI Red Teamers and prompt engineers. It strips away all UI noise from HackAPrompt, providing a clean, full-screen, adaptive workspace for deep concentration.

🎯 Core Features

  • Adaptive Full-Screen Layout: The interface intelligently expands to fill 100% of the viewport height. The prompt area, response panel, and input textarea fluidly resize to use all available space.
  • Minimalist Interface Toggle: A clean, animated button in the bottom-left provides seamless switching between Focus Mode and the standard view. It expands on hover to reveal its function, maintaining a minimal footprint.
  • Resilient to Site Updates: Instead of relying on fragile CSS selectors or IDs, the script programmatically identifies the target element by analyzing its unique flexbox layout structure, ensuring long-term compatibility.
  • SPA-Aware Initialization: Designed for HackAPrompt's Single-Page Application architecture. It intelligently waits for dynamic content to render before activating, guaranteeing reliability.
  • Zero Dependencies: A pure, lightweight JavaScript solution with no external libraries.

🚀 Installation

1. Prerequisites: A userscript manager is required. Tampermonkey is recommended.

2. Install the Script:

  • Click here to Install [Replace with your Greasy Fork install link]
  • A new browser tab will open in your userscript manager.
  • Confirm the installation.

📖 Usage

  1. Navigate to any challenge on HackAPrompt.
  2. The Focus Mode icon will appear in the bottom-left corner.
  3. Click the icon to enter Focus Mode. The UI will be cleared, and the challenge area will expand to fill the screen.
  4. Click the icon again to restore the default HackAPrompt view. The script safely returns all elements to their original state.

🛠️ Technical Details

  • Isolation Method: On activation, the script moves the target container to become a direct child of document.body and leaves a placeholder element. Deactivation precisely reverses this process, ensuring a clean restoration of the original DOM.
  • Styling: A single class (hap-isolated-view-active) is toggled on the `element. All focus mode styles are scoped to this class viaGM_addStyleand use modern CSS (flexbox,vh` units) to override default site styles and create the fluid layout.
  • Initialization: Employs a setInterval polling mechanism with a 20-second timeout to reliably initialize on the dynamic, client-side rendered platform.
  • Author: KarthiDreamr