Asana Task Overdue Flagger

WHAT IT DOES

This script highlights Asana tasks based on their due date status, making it easy to see which tasks need immediate attention. When you open an Asana project, board, or list, the script scans each task, extracts its due date, and compares it to the current date. Tasks are color-coded and tagged with a status badge: red for overdue (with the number of days overdue), orange for due today, yellow for due tomorrow, green for due in 3 or more days, and gray for tasks with no due date. The color scheme is fully customizable in the settings panel. The script updates dynamically as you add, move, or modify tasks, so the highlights are always up to date.

WHERE IT RUNS

The script runs on all Asana pages (*.asana.com). It works on project views, boards, lists, calendars, and task detail pages. It supports 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 "Enable overdue flagger" toggle enables or disables the script.

- The "Colors" section lets you customize the color for each due date status: Overdue, Due Today, Due Tomorrow, Due in 3+ days, and No due date. Click the color picker to change a color.

- Click "Refresh tasks" to manually re-scan the current view.

- Click "Reset colors" to restore the default color scheme.

The script works automatically—just browse your Asana tasks and they will be highlighted with status badges.

TECHNICAL SECTION — REAL MECHANISM

The script detects Asana pages by checking the URL for asana.com and determines if it's a task page by looking for /project/, /board/, /list/, /calendar/, or /task/. It finds tasks using selectors like .TaskRow, .TaskGridRow, .BoardCard, .ListItem, and .TaskItem. For each task, it extracts the due date by searching for elements with selectors like .DueDate, .due-date, .TaskDueDate, and .DueDateLabel, and by checking data attributes like data-due-date. The due date is parsed using date pattern matching for "MMM DD, YYYY," "DD MMM YYYY," and "YYYY-MM-DD" formats. The due date status is determined by comparing the parsed date to the current date (using normalized dates to ignore time). The status label is generated with the number of days overdue or days until due. A colored left border and a badge are applied to the task using style properties (never innerHTML). A WeakSet tracks processed tasks to avoid duplicate work. A MutationObserver watches for new tasks and updates highlights dynamically.

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. Asana frequently updates its interface and class names, which may affect the selectors used to find tasks and due dates. If the script stops working, please check for updates. The date extraction relies on Asana's date display format—if Asana changes the date format, the script may not detect dates correctly. 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.