Skip to main content
Browser Extension / Manifest V3•2024Open Source

Work Tracker for Jibble

Browser extension tracking daily work hours, break times, and schedule targets at a glance.

Interactive Preview
Work Tracker for Jibble
Jibble Session Synced
Badge: 8.2h
Today's Logged Time
8h 12m+12m vs Target
Monthly Target160h 00m
Tracked Total162h 45m
Break Allowance: 45mTarget Reached Alert: ON
Auto Session Token Detection

Extracts OIDC bearer tokens and personId directly from active Jibble browser tabs using chrome.scripting.executeScript without requiring manual credential input.

Live Badge & Desktop Alerts

Updates the browser action icon badge with formatted daily duration in real time and sends optional desktop notifications when the daily target is reached.

Context

Overview

A lightweight browser extension designed to eliminate repetitive timesheet lookups. It automatically detects active session tokens from open Jibble tabs via chrome.scripting, queries daily timesheet REST endpoints, parses ISO 8601 duration intervals, and updates the browser toolbar badge in real time.

Key Features

  • Manifest V3 compatibility for Chrome and Firefox browsers
  • Automatic token detection from active Jibble web tabs without asking for credentials
  • Live toolbar badge displaying elapsed work duration for the current day
  • ISO 8601 duration parser for calculating variance against daily targets
  • Clean popup breakdown of work intervals and break periods
Impact

Outcomes

Daily Admin Time Saved~5 min
Browser SupportChrome + Firefox
Badge UpdatesReal-time
Process

How It Works

1

Active Tab Scripting

Uses chrome.scripting to read session credentials from the active Jibble web application tab.

2

Timesheet API Polling

Fetches today's logged time entries from Jibble API endpoints and parses ISO 8601 duration strings.

3

Toolbar Badge Display

Calculates total worked time minus breaks and updates the extension icon badge in real time.

Screenshots & Interface

Visual Captures

[Screenshot Placeholder]
Alt: "Work Tracker for Jibble extension popup"
Suggested capture: Extension popup open in browser showing today's logged hours, break durations, and target variance.
Decisions

Technical Choices & Trade-offs

Session reuse over credential handling

Decision: Read the existing Jibble session from an already-open tab via chrome.scripting instead of ever collecting credentials.
Why: Asking users to hand a timesheet password to a third-party extension would be a trust dealbreaker. Reusing the session already present on the tab meant zero credential surface and nothing sensitive stored.

Badge-first interface

Decision: Display live worked hours directly on the toolbar badge, updated on data events, instead of relying on popups or notifications.
Why: The goal was removing a daily chore, not adding another app to open - an always-visible passive indicator changed behavior without creating notification fatigue.
Stack

Technologies Used

Languages & Core
JavaScript (ESNext)Manifest V3
Frontend & UI
HTML5CSS3Chrome Extension APIFirefox WebExtensions API