Recipe Video Timestamp-to-Step Linker

WHAT IT DOES This userscript transforms recipe pages with embedded videos into interactive learning experiences. It scans the page for numbered recipe steps or ordered lists, then detects any video timestamps—in MM:SS or HH:MM:SS format—that appear within or near those steps. For each timestamp found, it creates a clickable link attached to the step. When you click the link, the video jumps precisely to that moment, so you can watch exactly the technique or process described in that step. Alternatively, you can choose to display a floating navigation menu that lists all steps with their timestamps, letting you jump to any part of the video with a single click. WHERE IT RUNS The script works on every website you visit—food blogs, recipe aggregators, cooking video platforms, or any page that combines a written recipe with an instructional video. It runs entirely within your browser, reading only the visible text and DOM structure of the current page. It does not track your browsing history, access other tabs, or send any data externally. The video-seek functionality works through standard HTML5 Video API and postMessage communication for iframe-embedded players. HOW TO USE After installation, open the panel by clicking the tool's icon in the BotGentz sidebar. Choose your preferred display style: "Inline links" adds clickable timestamp links directly inside each recipe step, while "Floating navigation menu" creates a persistent sidebar-style menu at the bottom-right of the page listing every step with its timestamp. Toggle auto-scan on page load (enabled by default) to have the script run automatically. Click "Scan and link steps" to manually trigger a scan at any time. If you want to remove all links and return the page to its original state, click "Clear links". When you click a timestamp link, the video seeks to that position and begins playing. THE TECHNICAL MECHANISM This script employs a multi-stage parsing pipeline. First, it extracts recipe steps by traversing the DOM for ordered list items (

1. ) and fallback regex patterns that match numbered instructions like "1. Preheat oven" or "Step 2: Add flour". For each step, it captures the surrounding context—including the step's text and nearby text within a 100-character window—to detect timestamps. Timestamp detection uses four regex patterns that match MM:SS, HH:MM:SS, and natural language variants like "1h 30m" or "5min 30s". All matches are deduplicated and sorted by index for accurate text replacement. For inline linking, the script replaces the plain timestamp text with a styled element that retains the original text while adding a click handler. The click handler invokes the seek function, which checks for HTML5 video elements directly, or sends postMessage commands to YouTube and Vimeo iframes using their documented player APIs. For cross-origin iframes, the script attempts to access the iframe's contentDocument and find a video element, gracefully falling back if restricted by CORS policies. THE PANEL The panel is draggable anywhere on the screen and remembers its position between sessions. It can be collapsed to a small floating bubble to minimize distraction, and expanded again with a single click. The panel's width can be adjusted, and pressing the Escape key closes it instantly. All settings—your chosen display style and auto-scan preference—are persisted locally using GM_setValue, so your preferences remain intact across page reloads and browser restarts. PLEASE NOTE This userscript requires the free BotGentz extension to function. The script works with HTML5 video elements and popular video platforms (YouTube, Vimeo, Dailymotion) embedded via iframe. Some sites may use custom video players that do not support the standard seek methods; in such cases, the script will attempt to locate a native HTML5 video element within the player container. Websites change their structure over time, so the script's ability to detect steps and timestamps depends on how content is presented—it works best with clearly numbered lists and explicit timestamps. No data from your browsing is stored or transmitted anywhere; all processing occurs entirely in your browser.