Page Checklist Overlay

WHAT IT DOES

Provides a universal checklist overlay that can be used for any page-related task management. The script displays a fully customizable checklist with the ability to create, edit, complete, and delete tasks. You can add custom task categories, set due dates, and add notes to each task. Progress is tracked with a percentage completion indicator and a visual progress bar. A timestamp log shows when each task was completed. The script includes multiple pre-built checklist templates for common use cases like "Daily Review", "Meeting Prep", "Project Launch", and "Content Review", which can be loaded with a single click. Per-page checklists are saved per URL or custom identifier, making it perfect for any website or workflow.

WHERE IT RUNS

Works on all websites (match pattern *://*/*), making it a universal tool for task management across any page. Whether you're managing projects, reviewing content, planning meetings, or tracking daily tasks, the overlay adapts to any context. Each page or project gets its own independent checklist, allowing you to manage multiple lists simultaneously. The checklist state is saved per URL or custom identifier, ensuring continuity across sessions and page reloads.

HOW TO USE

Install the script and the checklist overlay appears on any page. Enter a page identifier to associate the checklist with a specific page, project, or workflow. Add tasks with optional categories and due dates. Add notes to any task for additional context. Load pre-built templates for common use cases with a single click. The progress bar updates in real-time showing completion percentage. View timestamps to see when each task was completed. Use the actions buttons to reset the checklist, complete all tasks, or clear completed tasks. The script saves your progress automatically as you work.

REAL MECHANISM: TEMPLATE-BASED TASK MANAGEMENT WITH URL-KEYED PERSISTENCE

This script uses a URL-based storage architecture where each page or project gets its own isolated checklist state. The getPageId() function retrieves the current page identifier from GM_setValue or defaults to the current URL pathname. Data is stored using GM_setValue with a key format of "page_checklist_" plus the page ID, ensuring data isolation between pages. The data structure includes a tasks array where each task has an id, text, category, completed boolean, dueDate string, completedAt timestamp, and notes string. The template system stores pre-defined task arrays under named keys (e.g., "Daily Review", "Meeting Prep"), and the loadTemplate() function replaces the current tasks with a mapped version where each template item becomes a task object with generated IDs and default properties. The renderChecklist() function calculates progress using filter() and length, then renders each task as a flex row with a checkbox, text container with category badge and due date display, optional timestamp display, and delete button. Timestamps are formatted using toLocaleString() for human-readable display. Notes fields are rendered as input elements that persist notes on blur events. The celebration engine triggers when all tasks are completed and celebrationEnabled is true, creating 20 animated emoji elements with randomized positions, font sizes (16-36px), and animation durations (2-5 seconds) using CSS keyframes, with automatic cleanup after 4 seconds. All operations are reactive, with automatic persistence and UI updates through saveChecklistData() and re-render.

THE PANEL

Drag the panel anywhere on screen by clicking and holding the header. It snaps to screen edges when released. Collapse it to a small bubble by clicking the minimize button, and expand it back by clicking the bubble. Resize the panel from any corner. Press Escape to close the configuration panel. Your position and size preferences are saved automatically per site.

PLEASE NOTE

This script requires the free BotGentz browser extension which provides the BGPanel framework and storage APIs. All data (tasks, categories, due dates, notes, timestamps, and page identifiers) is stored locally in your browser using GM_setValue and never sent anywhere. No analytics, no tracking, no external calls. The script only reads the current page identifier to isolate checklists and never accesses user data, passwords, or sensitive information. Checklists are saved per page identifier, so ensure you enter a unique identifier for each page, project, or workflow you manage.