Chrome extensionManifest V3Gmail workflowThird-party UI

Make response age visible inside Gmail, even though you do not control Gmail

This is a smaller-scope tool than the other projects: a focused Chrome extension that shows how long unread email has been waiting. Its value is in building dependable workflow tooling on top of a third-party web application that can redraw itself at any time.

It does not claim a live Chrome Web Store release. It is a working, locally installable extension with an honest path toward future distribution.

See the workflow Discuss a project like this

At a glance

A small enhancement with real operating constraints

The visible cue is compact. The work behind it manages Gmail's changing page structure, user settings, and a clear release boundary.

watchers

One follows Gmail content changes; another notices Gmail-style URL navigation.

400 ms

update pause

Rapid Gmail changes are grouped before the extension rechecks visible rows.

synced settings

Two time thresholds and two colors follow the user through Chrome sync.

24 / 48

default thresholds

Unread messages become stale at 24 hours and very stale at 48 until changed.

The problem

Useful Gmail improvements are hard when Gmail controls the page.

Gmail can redraw the inbox, change its internal page structure, and display dates in several formats. A fragile add-on is worse than no add-on because it gives people false confidence.

The approach

Add one cue, but treat the host page as unreliable.

The extension uses alternate ways to find rows and unread state, carefully reads date text, redraws after Gmail changes, and lets the user set the urgency rule.

How it works

A reliable browser layer around a fast-changing inbox

The workflow remains local to the browser, but it needs the same care around state, performance, and maintenance as a larger automation.

Run only where the tool is useful

Starts when

Chrome loads the extension while Gmail is open.

What happens

The extension limits itself to Gmail and adds a small layer to the page the user already works in.

You get

A focused tool that adds inbox age without asking people to move their email process into a new application.

If it fails

The popup checks that the active tab is Gmail and reports a Chrome error when the page or extension code is unavailable.

Find unread messages in a moving inbox

Starts when

Gmail finishes drawing an inbox view or changes the visible rows.

What happens

The extension looks for several Gmail row shapes and checks whether a message is unread before adding any label.

You get

Only visible unread messages become candidates for an age cue, and a row that becomes read loses its old label.

If it fails

A missing date or unstable part of the page removes an old label instead of leaving misleading information behind.

Read the date carefully before calling something urgent

Starts when

An unread row has a date label that could describe when the message arrived.

What happens

The extension turns Gmail's many date formats into a safe timestamp, then calculates the message age.

You get

The person sees minutes, hours, or days in a compact label beside the message date.

If it fails

A date that cannot be understood is skipped and any prior label is removed rather than presented as a false urgency signal.

Show a small cue where the decision already happens

Starts when

A usable message timestamp is available.

What happens

The extension applies a normal, stale, or very-stale state based on the user's chosen thresholds and colors.

You get

Response age becomes visible in Gmail itself, without asking the team to open a separate dashboard.

If it fails

Each redraw clears old state before applying current settings, so an old urgency color cannot cling to a changed row.

Follow Gmail as it redraws and navigates

Starts when

Gmail loads rows, changes attributes, switches views, or performs internal navigation.

What happens

Two lightweight watchers schedule a clean recheck after the page has settled, rather than trusting a page-load-only enhancement.

You get

The cue follows the inbox as a single-page web app changes around it.

If it fails

The extension treats every Gmail element as temporary and redraws from the rows currently on screen.

Let the user set the rule without a redeploy

Starts when

The extension is installed, settings change, or someone asks for a refresh from the popup.

What happens

The options page saves two thresholds and two colors, while the open inbox listens for the change and redraws itself.

You get

A team can make its own definition of stale without waiting for a new extension version or restarting Chrome.

If it fails

Storage, tab, and message errors are checked and shown rather than being mistaken for a successful update.

What this means for the people using Gmail

Instead of mentally calculating whether an unread message has been waiting too long, your team sees a quiet, configurable cue at the exact point where it decides what to do next.

How the extension recognizes the right Gmail rowsshow

The Manifest V3 extension is scoped only to mail.google.com. The content script checks Gmail-specific table and role-based row selectors, then detects unread state through classes, ARIA labels, and computed font-weight fallbacks.

A per-pass Set deduplicates elements when selectors overlap. Individually guarded DOM queries prevent an unstable Gmail subtree from crashing a full pass, and rows with no usable date have any existing timer removed.

How timestamp parsing avoids bad urgency signalsshow

The timestamp parser handles detailed dates, month/day forms, time-only labels, slashed dates, Yesterday, expected-by text, and relative timestamps such as days or weeks ago.

It corrects AM/PM boundaries, accounts for dates that would otherwise fall in the future, and returns no timestamp when it cannot safely interpret a value. Invalid or future dates are represented explicitly; parser diagnostics preserve the exact path when Gmail changes a format.

How the pieces fit together

Purpose-built for a web app outside your control

This is not a Gmail replacement. It is a maintainable enhancement layer that keeps people in the environment they already know.

Runtime and packaging

Chrome Extension Manifest V3 and service worker

The extension model separates lifecycle defaults from code that runs inside Gmail.

Target application

Gmail content script and injected CSS

The tool improves a workflow inside a web application the client does not own or control.

UI resilience

DOM selectors, ARIA hints, computed-style fallback, MutationObserver

No one Gmail selector is treated as permanent, so the code has several ways to recognize a row and its unread state.

Preference storage

chrome.storage.sync and storage-change events

The urgency policy follows the user across Chrome sessions and updates the open inbox without a manual reload.

User controls

Popup messages and options page

Users get a manual refresh and a place to set urgency rules without cluttering Gmail.

Distribution status

Manifest, icons, unpacked-install guide, Chrome Web Store preparation

The project is ready for local installation and future review, but it is not represented as a live Chrome Web Store release.

Why the scope is intentionally narrow

A smaller tool can still solve a meaningful workflow problem when it is designed around the place people actually work. The engineering challenge is not the size of the label; it is keeping that label correct when the host product changes.

Safeguards

The hard part is keeping the enhancement well behaved

Browser tooling shares a rendering environment with the application it enhances. Every unnecessary scan, stale label, or broad permission can erode trust.

No repeated work during a busy inbox

A 400-millisecond pause groups rapid page changes, a processing guard blocks overlap, and a Set prevents duplicate work when selectors find the same row.

Labels behave predictably

The extension checks for an existing timer before adding one, removes it once a message is read, and clears labels before a full settings or route redraw.

Dates are not guessed

Invalid, future, and unknown Gmail dates are not silently converted into bad urgency signals. The row is skipped or clearly marked while diagnostics remain available.

The extension asks for a narrow scope

It targets mail.google.com, checks the active tab before sending a popup command, and checks Chrome error conditions on storage, tabs, and content-script messages.

Release status stays candid

There is Manifest V3 packaging, icons, and installation guidance, but no live Chrome Web Store release is claimed. The documented listing is a future step.

How the extension stays responsive during Gmail changesshow

The main MutationObserver debounces Gmail changes for 400 milliseconds. A non-reentrant isProcessing guard prevents scans from overlapping.

Separate URL-change detection notices Gmail navigation. When the route changes, it clears old labels and schedules a clean reprocess after Gmail has time to render the next view. Before each redraw, stale-state classes and inline background color are removed.

How preferences and on-demand refresh workshow

On installation, the service worker seeds defaults. The options UI validates numeric thresholds and saves the stale and very-stale thresholds plus two colors to chrome.storage.sync.

The content script listens for storage changes, removes prior labels, merges the new configuration, and redraws. The popup opens options or requests refresh from the active Gmail tab; storage reads, writes, tab queries, and messages check chrome.runtime.lastError.

What keeps a small extension trustworthy

The extension limits what it touches, does not claim a store release that does not exist, and rechecks its work whenever Gmail changes the ground beneath it. That is how a compact tool stays reliable enough to use every day.

What it replaced

From mental inbox arithmetic to a visible response-age cue

This project makes no invented time-saved or inbox-volume claim. The value is a small contextual tool that makes a team rule visible without requiring a process change.

Before

People scan a long inbox and mentally estimate whether unread messages have been waiting for minutes, hours, or days.

With this approach

A small inline age label makes the waiting time visible where the next action is chosen.

Before

A browser addition works only after refresh, then disappears as the host application redraws or navigates.

With this approach

Content and URL watchers reapply the cue as Gmail changes views while cleanup prevents old labels from accumulating.

Before

One fixed threshold suits one person but not every inbox routine.

With this approach

Two thresholds and two colors are saved in Chrome sync and applied to an open inbox when settings change.

Before

A local demo can be mistaken for a released browser product.

With this approach

The project clearly separates a working unpacked extension from a future Chrome Web Store listing.

What this means for your business

Reliable browser tools for the web apps your team already uses

The transferable value is knowing how to add a dependable operational cue to a third-party interface while respecting performance, user settings, platform constraints, and a practical shipping path.

Add a lightweight operational layer to CRM, ticketing, dispatch, scheduling, or portal software your team uses but does not control.
Turn an implicit rule such as response age, escalation window, or review priority into a clear cue in the existing workflow.
Deliver browser-based tooling without creating a parallel dashboard that people must remember to open.
Plan reliable extension work around host-page changes, navigation, performance, permissions, configuration, and a practical distribution path.

Plain-language glossary

Every technical term used on this page, explained without jargon.

ARIA: Accessible labels and roles that help assistive technology understand a web interface.
Chrome sync storage: Chrome-managed settings that can follow a signed-in user across browsers.
Content script: Extension code that runs inside a permitted web page such as Gmail.
DOM: The browser's live representation of the page elements currently on screen.
Manifest V3: Chrome's current extension packaging and permission model.
MutationObserver: A browser feature that notices changes to a web page's elements.
Non-reentrant guard: A check that prevents a new process from starting while the prior one is still running.
Selector: A rule used to locate matching elements in a web page.

Want the web apps your team uses to work more like your team works?

We can identify the workflow signals people are tracking by hand and build the right browser-based tool around them.

Discuss a project like this