A lightweight monolithic browser extension that adds a Table of Contents (TOC), Bookmarks and Cross Tab navigation to Perplexity AI thread pages Built using Complexity's Toc plugin logic, this extension enhances the original functionality by adding Bookmarks and Cross-Tab navigation.
##Demo
demo.mp4
- Automatic TOC Generation: Automatically detects message blocks and creates a navigable table of contents (for >=2 messages)
- Bookmark: Remembers bookmarks across sessions and auto scrolls there
- Cross tab Nav: Genrates an Overlay of Tocs of synced tabs (Max 5) for easy cross thread navigation.
- Download or clone this repository
- Open Chrome/Edge and navigate to
chrome://extensions/(oredge://extensions/) - Enable "Developer mode" in the top right corner
- Click "Load unpacked" and select the
simple-toc-extensionfolder - The extension should now be installed and active
The extension follows the same architecture as the original thread-toc plugin but implemented in vanilla JavaScript:
┌─────────────────────────────────────────────────────────────────┐
│ Extension Initialization │
├─────────────────────────────────────────────────────────────────┤
│ 1. Check if on Perplexity thread page │
│ 2. Initialize Zustand store for state management │
│ 3. Set up DOM observers and intersection observers │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ DOM Observation & Detection │
├─────────────────────────────────────────────────────────────────┤
│ • MutationObserver watches for new message blocks │
│ • IntersectionObserver tracks active/visible messages │
│ • Extracts titles from message content │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ State Management (Zustand) │
├─────────────────────────────────────────────────────────────────┤
│ • items: Array of TOC items with titles and elements │
│ • activeId: Currently highlighted message │
│ • topMostId: Top-most visible message │
│ • isFloating: Whether TOC is in floating mode │
│ • position: Calculated position for TOC placement │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ UI Rendering & Interaction │
├─────────────────────────────────────────────────────────────────┤
│ • Renders TOC container with message list │
│ • Handles click events for navigation │
│ • Manages floating toggle button │
│ • Responsive positioning and styling │
└─────────────────────────────────────────────────────────────────┘
- State Management: Utilizes Zustand for managing the extension's state, including TOC items, active states, UI configurations, bookmarks, and cross-tab data.
- DOM Observers: Employs
MutationObserverfor detecting changes in thread content andIntersectionObserverfor tracking message visibility, enabling dynamic TOC updates. - Bookmark Feature: Manages saving, retrieving, and navigating to bookmarked messages within a thread, persisting across sessions.
- Cross-Tab Navigation: Facilitates navigation between synced Perplexity AI tabs by generating an overlay of TOCs from active synced tabs.
- Chrome API Handling: Includes mechanisms to manage and mitigate potential delays and rate limits associated with Chrome API interactions for smooth performance.
- Navigate to any Perplexity AI search result page (e.g.,
https://www.perplexity.ai/search/...) - The TOC will automatically appear when there are 2 or more messages in the thread.
- TOC Navigation: Click any item in the Table of Contents to automatically scroll to the corresponding message in the thread.
- Bookmark: Click the bookmark icon next to a message in the TOC to save its position. The extension will remember your bookmark across sessions and automatically scroll to it when you revisit the thread.
- Sync Specific Tab: A sync button will appear for each tab in the cross-tab view. Click this button to highlight the specific tab in blue, indicating it's the active tab you're navigating from.
- Cross-Tab Navigation: Click the cross-tab button to reveal an overlay displaying TOCs from other synced Perplexity AI tabs, allowing for easy navigation between different threads.
- Zustand: Lightweight state management library (included via CDN)
- Vanilla JavaScript: No framework dependencies
To modify or extend the extension: Make changes to necessary functions or add
- Make changes to the source files
- Reload the extension in your browser's extension management page
- Refresh any Perplexity pages to see changes
simple-toc-extension/
├── manifest.json # Extension configuration
├── content.js # Main extension logic - Monolith code
├── styles.css # Styling and animations
├── zustand.min.js # State management library
└── README.md # This file
This extension, including its added features (Bookmarks, Cross Tab navigation), is provided under the MIT License. It is supplied "as-is" without any warranties, and the author is not responsible for any damages arising from its use. Please refer to the original Complexity project for its licensing terms regarding the core TOC logic.
Feel free to improve the extension as your own , I'll try my best to fix the bugs when free.
https://github.com/pnd280/complexity https://uiverse.io/JulanDeAlb/tall-swan-6 (cross tab button) https://uiverse.io/PriyanshuGupta28/chilly-lion-59 (sync button)