SparkFun Web Project Guide Organizer

WHAT IT DOES

SparkFun Web Project Guide Organizer transforms lengthy SparkFun tutorial pages into a structured, easy-to-navigate learning experience. When you open any SparkFun project guide or tutorial, the tool automatically scans the page and identifies all major sections including introductions, parts lists, wiring diagrams, programming sections, and conclusions. It builds a collapsible table of contents that appears in a panel, showing every section with a descriptive icon and clickable link. As you scroll through the guide, the panel highlights your current reading position and tracks your progress with a visual progress bar showing exactly how much of the tutorial you have completed. The tool also extracts bill of materials and parts lists into a separate checklist, where you can check off components as you gather them. This eliminates the frustration of scrolling back and forth through long guides, losing your place, or forgetting which parts you have on hand.

WHERE IT RUNS

This extension operates exclusively on sparkfun.com domain pages that contain tutorial or project guide content—specifically pages with tutorial sections, guides, or educational content. It works alongside the free BotGentz companion extension, which provides the necessary DOM access and page interaction capabilities. The guide organizer runs entirely within your local browser instance and does not communicate with any external servers or APIs. All section detection, progress tracking, and parts checklist management occurs on your machine, ensuring your reading habits and project data remain private. It supports all modern Chromium-based browsers (Chrome, Edge, Brave, Opera) and Firefox when paired with the BotGentz bridge. The tool works on both text-based tutorials and image-rich guides.

HOW TO USE

After installing both BotGentz and this guide organizer, simply navigate to any SparkFun tutorial page. Within 1-2 seconds of the page loading, a panel appears in the bottom-right corner displaying "Table of Contents" with all detected sections. Click any section title in the panel to smoothly scroll directly to that part of the guide. As you read and scroll down the page, the panel automatically highlights the section you are currently viewing, and a progress bar fills to show your completion percentage. The "Parts Checklist" section extracts the bill of materials from the tutorial and displays each component with a checkbox. Check off parts as you gather them for your project—your selections are saved and persist even after you close the page. Use the toggles in the panel to show or hide the table of contents or disable progress tracking if you prefer a cleaner interface.

SECTION DETECTION AND CONTENT EXTRACTION

The guide organizer employs a semantic heading-based extraction system that analyzes the document structure to identify logical sections. It traverses the page content container and locates all heading elements (H1 through H4), then determines the hierarchical relationship between sections based on heading levels. Each section's content is captured by collecting all subsequent elements until the next heading of equal or higher level is encountered. The tool intelligently categorizes each section based on heading text keywords—detecting "Parts" or "Materials" sections, "Wiring" or "Circuit" sections, "Code" or "Sketch" sections, and introductions or conclusions. This heading-level parsing provides reliable section detection even when SparkFun changes page layouts, as it relies on semantic HTML structure rather than specific class names. The progress tracking calculates position based on scroll depth relative to total document height, with section highlighting determined by the first section whose top position passes the viewport threshold.

THE PANEL

The guide organizer panel is a compact, lightweight overlay that integrates into the SparkFun page. It can be dragged by clicking and holding the title bar, positioning the panel anywhere on the screen for optimal visibility while you read the tutorial. The panel includes a built-in snap feature that automatically aligns to the nearest screen edge when released within 48 pixels, keeping your workspace organized. Click the collapse arrow in the top-right corner to minimize the panel to a small icon bubble showing a gear emoji, preserving screen space while keeping the tool accessible. The panel is not resizable in this version, maintaining a consistent compact size that works on all screen resolutions. Press the Escape key to instantly hide the panel; press Escape again to restore it. All position, collapse state, toggle preferences, and parts checklist selections are saved locally using GM_setValue and persist across browsing sessions.

PLEASE NOTE

This extension requires the free BotGentz extension to function—the guide organizer does not work standalone. SparkFun occasionally updates its page layouts and tutorial structures, which may temporarily affect section detection accuracy. The tool extracts content based on document structure and may not detect sections in dynamically loaded content. Parts lists are extracted from bullet points and lists; unusual formatting may cause incomplete extraction. The guide organizer does not store or transmit any data; all processing, progress tracking, and checklist state is performed entirely within your browser. Parts checklist selections are saved per URL and persisted across sessions. This tool is designed for personal use while reading SparkFun tutorials. Always refer to the official tutorial text for authoritative instructions.