Notion Presentation Mode Chrome Extension

Transform your Notion pages into presentation slides with keyboard navigation and customizable UI elements.

Please re-check the agent.md file for anything that might be missing. Most importantly, please check if the GRPO settings are set correctly in the training script.

Features

• Keyboard Navigation: Use arrow keys, space, enter, and backspace to navigate between slides
• Automatic Slide Detection: Automatically detects horizontal dividers as slide breaks
• Hidden Dividers: Horizontal lines are hidden in presentation mode for a cleaner look
• Slide Numbers: Optional slide counter in the bottom right corner
• Progress Bar: Optional minimal progress bar at the bottom of the screen
• Notes Management: Hide/show Notes blocks and open them in a separate window
• Keyboard Shortcuts: Quick toggle with Ctrl+Shift+P (Cmd+Shift+P on Mac)

Installation

1. Download the Extension

   • Clone or download this repository to your local machine

2. Load in Chrome

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" in the top right corner
   • Click "Load unpacked" and select the extension folder

3. Add Icons (Optional)

   • Add icon files (icon16.png, icon48.png, icon128.png) to the icons/ folder
   • Or remove the icons section from manifest.json if you don't want custom icons

Usage

Getting Started

1. Navigate to any Notion page
2. Click the extension icon in your browser toolbar
3. Toggle "Presentation Mode" on

Keyboard Shortcuts

• Ctrl+Shift+P (Cmd+Shift+P on Mac): Toggle presentation mode
• → / Space / Enter: Next slide
• ← / Backspace: Previous slide
• Home: Go to first slide
• Escape: Exit presentation mode

Notes Management

The extension provides special handling for Notes blocks (toggle blocks with "Notes:" specifically in the title):

• Hide/Show Button (👁️): Toggle visibility of Notes content while keeping the title visible
• Open in New Window Button (🗗): Open all Notes content in a separate window for reference on a second monitor
• Precise Detection: Only targets toggle blocks containing "Notes:" in the title (excludes "Example:", "Details:", etc.)
• Smart Expansion: Automatically expands collapsed Notes blocks when extracting content, then restores their original state
• State Preservation: Maintains the original collapsed/expanded state of Notes blocks after operations
• Non-Intrusive: Other collapsible blocks (Example:, Details:, etc.) are completely unaffected

Customization Options

Access these through the extension popup:

• Presentation Mode: Enable/disable the presentation functionality
• Show Slide Numbers: Display current slide number in bottom right
• Show Progress Bar: Display a progress bar at the bottom of the screen
• Show Navigation Buttons: Display previous/next navigation buttons
• Enable Editing in Presentation: Allow text editing while in presentation mode
• Show Horizontal Lines: Toggle visibility of horizontal dividers
• Hide Notes Content: Hide the content inside Notes toggle blocks
• Show Notes Controls: Display buttons to hide/show Notes and open them in new window

How It Works

The extension automatically detects horizontal dividers in your Notion page and treats the content between them as individual slides. If no dividers are found, it treats each top-level content block as a slide.

Supported Divider Types

• Notion's built-in divider blocks
• HTML <hr> elements
• Elements with border-top styling
• Custom divider classes

Development

File Structure

├── manifest.json       # Extension configuration
├── content.js         # Main presentation logic
├── popup.html         # Extension popup interface
├── popup.js           # Popup functionality
├── background.js      # Background script for shortcuts
├── styles.css         # Presentation mode styles
├── icons/             # Extension icons
└── README.md          # This file

Key Components

• Content Script: Handles slide detection, navigation, and UI updates
• Popup Interface: Provides user controls for customization
• Background Script: Manages keyboard shortcuts and settings
• CSS Styles: Hides dividers and styles presentation elements

Troubleshooting

Extension Not Working

• Ensure you're on a Notion page (*.notion.so)
• Check that the extension is enabled in Chrome
• Try refreshing the Notion page

No Slides Detected

• Add horizontal divider blocks in Notion to create slide breaks
• The extension will fall back to treating content blocks as slides

Keyboard Shortcuts Not Working

• Make sure presentation mode is enabled
• Check that no other extensions are conflicting with the shortcuts
• Try clicking on the page content to ensure focus

Contributing

Feel free to submit issues and enhancement requests!

License

This project is open source and available under the MIT License.