Twitch VOD Chapter Jump Bar

WHAT IT DOES

This script adds a floating chapter jump bar to Twitch VODs (videos on demand). When you watch a VOD, the script detects chapters from the video metadata, progress bar markers, or the video description, and displays them as clickable buttons on the video player. Click any chapter button to instantly jump to that timestamp in the video. The jump bar can be positioned at the bottom (horizontal) or on the side (vertical) of the video player. Previous/next chapter buttons let you navigate through chapters without clicking the bar. The current chapter is highlighted as the video plays, so you always know which chapter you're watching. The jump bar updates dynamically as the VOD loads or as chapters are added.

WHERE IT RUNS

The script runs on Twitch VOD pages (twitch.tv/videos/* and twitch.tv/*/v/*). It works on both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Show chapter jump bar" toggle enables or disables the jump bar.

- Choose the position from the dropdown: "Bottom (horizontal)" or "Side (vertical)."

- Click "Refresh chapters" to manually re-scan for chapters.

- Click "Jump to previous chapter" or "Jump to next chapter" to navigate.

The jump bar appears on the video player automatically. Click any chapter button to jump to that timestamp. The current chapter is highlighted in purple.

TECHNICAL SECTION — REAL MECHANISM

The script detects Twitch VOD pages by checking the URL for /videos/ or /v/. It extracts chapters from three sources: progress bar chapter markers (looking for .video-chapter-marker, .chapter-marker, or .tw-chapter-marker), VOD metadata elements (looking for .vod-metadata, .vod-chapter, or .chapter-item), and the video description (scanning for timestamp patterns like "1:23" or "1:23:45" followed by a title). Timestamps are parsed from strings like "1:23" (minutes:seconds) or "1:23:45" (hours:minutes:seconds) and converted to seconds. The jump bar is created as a floating overlay on the video container, positioned either at the bottom (horizontal) or on the side (vertical). Each chapter is rendered as a button with the timestamp and title. When a chapter is clicked, the video's currentTime is set to the chapter's timestamp and the video is played. The script uses a setInterval to update the current chapter highlight every second. A MutationObserver watches for DOM changes and re-scans for chapters when the page updates.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. Twitch frequently updates its VOD interface, which may affect the selectors used to find chapters and the video player. If the jump bar stops working, please check for updates. The script relies on the presence of chapter information—if a VOD has no chapters, the jump bar will display "No chapters found." The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.