Recipe Jump-to-Recipe Button

WHAT IT DOES

Recipe Jump-to-Recipe Button adds a floating "Jump to Recipe" button to cooking and food websites, letting you skip past long introductory stories, photos, ads, and other non-essential content with a single click. The button automatically detects the recipe card or ingredient list on the page and scrolls smoothly directly to it. No more scrolling through paragraphs of backstory, life stories, and promotional content just to find the actual recipe. The button is positioned where it's always accessible—bottom-right by default—and can be customized to match your preferences. A small indicator dot shows exactly where the recipe is located on the page, and the button includes a smooth scroll animation with a brief highlight effect on the recipe card when you land.

WHERE IT RUNS

The extension works on every website with recipe content, including food blogs, cooking sites, recipe aggregators, and any page with structured recipe data. It runs locally in your browser, analyzing the page's DOM to find the recipe container without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension automatically adds a "Jump to Recipe" button to pages with recipe content. Click the button to scroll directly to the recipe card. The button also works in reverse—if you've scrolled down, it remains in place for quick navigation. To customize the experience, open the extension panel and choose the button position (Bottom-right, Top-right, or Floating middle-right). Select a custom button color using the color picker. Change the button text to your preference (e.g., "Get Recipe" or "Skip to Recipe"). Toggle "Show recipe indicator dot" to show or hide the pulsing indicator that marks the recipe location. Toggle "Auto-show on recipe detection" to enable or disable automatic button display. For per-site customization, enable or disable the extension on specific websites using the per-site controls.

THE ACTUAL MECHANISM — RECIPE CONTAINER DETECTION WITH SMOOTH SCROLL TARGETING

The extension uses a multi-strategy recipe detection pipeline. First, it queries the DOM for common recipe container selectors (.recipe, .recipe-card, .wprm-recipe, .tasty-recipe, [itemtype*="Recipe"], etc.). If no match is found, it falls back to heading-based detection, scanning for headings that contain recipe-related keywords (ingredients, instructions, directions, recipe, cook time, servings) and finding the parent container. As a third fallback, it uses a scoring algorithm that analyzes page elements for recipe keywords (ingredients, instructions, recipe, cup, tablespoon, cook, bake) and selects the highest-scoring container. The detected recipe target is stored and used for scroll navigation. The button is positioned using fixed positioning with z-index 2147482000 to remain above page content. On click, the extension calculates the target's position using getBoundingClientRect() and performs a smooth scroll using requestAnimationFrame with an easing function (ease-in-out over 600ms). After the scroll completes, the recipe target is briefly highlighted with a subtle blue background that fades after 1 second. The indicator dot is positioned relative to the recipe target and updated on scroll and resize events.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, jump to recipe button, refresh detection button, position selector, color picker, button text input, indicator toggle, auto-show toggle, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and storage engine. The recipe detection works on the majority of recipe sites but may not detect all custom implementations. If the button doesn't appear, use the "Refresh Recipe Detection" button in the panel to re-scan the page. The extension only adds a navigation button and does not modify recipe content. No personal data, browsing history, or recipe content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.