Gemini Conversation Timeline: Jump to Any Message Instantly

10月16日 Published inGoogle Gemini

Gemini Conversation Timeline is an unofficial browser extension that adds a clickable sidebar navigation to your Gemini chats. If you have ever wasted time scrolling through a 200-message thread to find a specific answer, this tool solves that problem.

Click, Jump, Done. Each dot on the timeline represents a user message. Clicking a dot takes you instantly to that point in the conversation, eliminating the need to manually hunt through the scrollbar.

Star What Matters Long-press any message to bookmark it. Starred items appear as gold markers on the timeline. When you need to find that specific code snippet or statistic later, you can locate it in a glance.

Theme Integration The timeline automatically adapts to Gemini's native interface. It stays clean in light mode and switches to a high-contrast dark mode when the site does, ensuring the gold markers pop against the deeper background.

Smart Clustering for Long Chats As messages pile up and markers begin to overlap, the timeline groups nearby points into tidy clusters. This keeps the interface readable even in dense conversations; simply click a cluster to zoom in.

Feature Visual Behavior
Light Theme Integrates naturally with Gemini's default white interface.
Dark Theme & Stars High-contrast gold highlights against dark mode.
Smart Clustering Keeps dense conversations organized and navigable.

How to Install Gemini Conversation Timeline

Standard Installation

  1. Visit the project's Releases page.
  2. Download the latest gemini-timeline-extension.zip.
  3. Unzip the file on your computer.
  4. Open your browser's extensions page: chrome://extensions/ or edge://extensions/.
  5. Enable Developer mode using the toggle in the top right.
  6. Drag the unzipped extension folder directly into the browser window.
  7. Open any Gemini chat, and the timeline will appear on the right side of the screen.

For Developers

You can clone the repository to customize the extension.

  1. Clone the repo: git clone https://github.com/Cologler/gemini-conversation-timeline.git
  2. Load the extension: Go to your browser's extensions page, enable Developer mode, click Load unpacked, and select the extension folder within the cloned repository.
  3. Develop and reload: After editing content.js or styles.css, click the refresh icon on the extension card to apply your changes.

Under the Hood

The TimelineManager Class

This class manages the core logic of the extension, handling four primary tasks:

UI Injection: It builds the timeline DOM elements and renders markers based on the current conversation state via injectTimelineUI and recalculateAndRenderMarkers.

User Interaction: Through setupEventListeners, it handles clicks for instant jumping, long presses for starring messages, and hover actions for message previews.

Position Tracking: An IntersectionObserver tracks which message is currently in the viewport and automatically highlights the corresponding marker in the sidebar.

Persistent Storage: Starred message IDs are saved to localStorage. Your bookmarks remain intact even if you close the tab or return to the chat a week later.

The guardianProcess Function

This function acts as a sentry loop using setInterval. It monitors the browser's URL to determine if you are on a Gemini chat page (isChatRoute). When a conversation is detected, it initializes a TimelineManager instance; when you navigate away, it triggers a cleanup. This prevents memory leaks within Gemini’s single-page application (SPA) environment.

All functions and classes follow JSDoc conventions. Console logs use emoji prefixes (✨ init, ✅ success, ⚠️ warning, 🔥 cleanup) to make debugging and status monitoring easier at a glance.