# Kimai Time Tracker > Track time with Kimai directly from any web page Canonical page: [https://chrome-stats.com/d/kimai-time-tracker](https://chrome-stats.com/d/kimai-time-tracker) ## Overview - **ID:** `kimai-time-tracker` - **Platform:** Firefox - **Type:** Firefox add-on - **Status:** Available - **Publisher:** Jürgen Haas - **Category:** other - **Daily users:** 15 - **Weekly downloads:** 2 - **Version:** 0.1.22 - **Last updated:** 2026-05-21 - **First published:** 2026-02-16 - **Size:** 88 KB - **Data as of:** 2026-09-09 - **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/kimai-time-tracker/) - **Website:** [https://gitlab.lakedrops.com/jurgenhaas/kimai-bp](https://gitlab.lakedrops.com/jurgenhaas/kimai-bp) ## Description Kimai Browser Plugin (kimai-bp) Cross-browser extension for Kimai time-tracking. Injects widgets into web pages so you can start and stop timesheets without leaving your browser tab. Features

Start/stop timers from any web page via a floating widget or the extension popup
Platform profiles — automatic detection of tasks and issues on supported platforms:
GitLab (18.0+)
GitHub (2024.1+)
Jira (9.0+)
Drupal.org (7.0–11.x)
Inline track buttons injected next to detected issues/tasks on supported platforms
Cascading task picker — Customer > Project > Activity dropdowns with data fetched from your Kimai instance
Tag autocomplete — search and add tags from your Kimai instance
URL pattern memory — remembers which customer/project/activity you used for a given URL scope and pre-fills settings on future visits
Profile auto-updates — installed platform profiles are checked for updates every 6 hours
Debug mode — YAML profile editor with live validation and color-coded DOM overlays for profile development
Cross-browser — Chrome (Manifest V3) and Firefox (Manifest V3, 145.0+)

How It Works The extension has two modes depending on the page you visit:

Profile matched — When the current page matches an installed platform profile (e.g. a GitLab issue page), compact "Track" buttons are injected next to each detected issue. Clicking a button opens a dialog to select or confirm customer/project/activity settings and starts a Kimai timer with the issue ID and title as the description.
No profile matched — A floating widget overlay appears in the corner of the page with a full timer interface: task picker, description field, tag input, and start/stop controls.

The extension popup provides the same timer controls accessible from the toolbar icon on any page. All Kimai API communication is handled by the background service worker. Content scripts and the popup never call the API directly — they send typed messages to the background, which centralizes authentication and state management. Installation From Source

pnpm install
pnpm build:chrome    # Production build for Chrome
pnpm build:firefox   # Production build for Firefox

Chrome: Open chrome://extensions, enable Developer mode, click "Load unpacked", select .output/chrome-mv3. Firefox: Open about:debugging#/runtime/this-firefox, click "Load Temporary Add-on", select .output/firefox-mv3/manifest.json. Configuration

Click the extension icon and go to Settings (or right-click the icon > Options)
Enter your Kimai URL (e.g. https://kimai.example.com)
Enter your API token (generated in Kimai under Settings > API)
Click Save, then Test Connection to verify

Installing Platform Profiles

Open the extension settings page
Scroll to Platform Profiles
Click Browse Available to see profiles from the registry
Click Install next to the profiles for platforms you use
Add custom domains if your instance uses a self-hosted URL (e.g. gitlab.mycompany.com)

Development

pnpm install          # Install dependencies
pnpm dev              # Dev mode with HMR (Chrome)
pnpm dev:firefox      # Dev mode (Firefox)
pnpm build            # Production build (all browsers)

Testing

pnpm test             # Run all tests
pnpm test:unit        # Unit tests only (Vitest)
pnpm test:e2e         # E2E tests (Playwright)

Linting & Type Checking

pnpm lint             # ESLint check
pnpm lint:fix         # ESLint auto-fix
pnpm format           # Prettier format
pnpm format:check     # Prettier check
pnpm typecheck        # TypeScript type checking

Architecture

src/
├── entrypoints/
│   ├── background.ts       # Service worker — API calls, timer state, profile management
│   ├── content.ts          # Content script — profile detection, track buttons, floating widget
│   ├── popup/              # Extension popup — timer controls, task picker
│   └── options/            # Settings page — connection config, profile & pattern management
├── components/             # Vanilla web components (Shadow DOM)
│   ├── kimai-widget.ts     # Floating overlay (timer + task picker + tags)
│   ├── kimai-popup.ts      # Popup UI
│   ├── kimai-timer.ts      # Live elapsed-time display with start/stop
│   ├── kimai-task-picker.ts        # Customer > Project > Activity dropdowns
│   ├── kimai-tag-input.ts          # Tag autocomplete input
│   ├── kimai-options.ts            # Settings form
│   ├── kimai-profile-manager.ts    # Profile browse/install/update UI
│   ├── kimai-pattern-manager.ts    # URL pattern management UI
│   └── kimai-debug-profile-editor.ts  # YAML profile editor with live validation
├── lib/
│   ├── api/                # Typed Kimai REST API client
│   ├── storage/            # Cross-context state (WXT storage)
│   ├── messages.ts         # Typed message protocol (background <-> content/popup)
│   ├── profiles/           # Profile parsing, matching, and management
│   ├── patterns/           # URL pattern matching and storage
│   └── context/            # Page context analysis (stub)
└── assets/                 # Icons

Key Design Principles

Background owns all API calls — content scripts and popup communicate via typed messages; no direct API calls from page context.
Shadow DOM isolation — all web components use attachShadow({ mode: 'open' }) with inline <style> elements; the floating widget and track dialog are fully isolated from host page styles.
Zero innerHTML — all DOM is built with document.createElement(), textContent, and appendChild(). No innerHTML assignments anywhere in the build output, ensuring AMO validation compliance.
Profile-driven detection — platform support is defined in downloadable YAML profiles, not hard-coded. New platforms can be supported without a new extension release.
URL pattern memory — customer/project/activity settings are stored per URL prefix and looked up by walking up the URL path hierarchy.

Tech Stack | Layer | Technology | | ------------------- | --------------------------------------------------- | | Extension framework | WXT (Vite-based, Manifest V3) | | UI components | Vanilla web components (HTMLElement + Shadow DOM) | | Language | TypeScript (strict mode) | | Package manager | pnpm | | Testing | Vitest + Playwright | | Linting | ESLint + Prettier | | State | @wxt-dev/storage |

Note: The extension was originally built with Lit but migrated to vanilla HTMLElement-based web components to eliminate all innerHTML usage from the build output, which is required for Mozilla Add-ons (AMO) validation compliance.

Platform Profiles Profiles are YAML files that define CSS selectors for detecting trackable items on task/issue management platforms. Each profile specifies:

Domains — hostnames where the platform is deployed (supports subdomains)
Selector sets — one or more contexts (e.g. "detail view", "list view"), each with:
isSupported — gate selector that determines if the page has trackable items
issueId — extracts the issue/task identifier
issueTitle — extracts the issue/task title
itemContainer — (optional) wraps individual trackable items for multi-item pages
widgetAnchor — (optional) where to inject the track button

Profiles support multi-version platforms via multiple selector sets with different gate selectors. The matcher tries each context in order and uses the first one whose gate matches. Writing a Profile Enable Debug Mode in the extension settings to access the profile editor. Write YAML, set a target domain, and navigate to a page on that domain. Matched elements are highlighted with color-coded overlays: | Color | Selector | | ------ | -------------------- | | Green | isSupported (gate) | | Blue | issueId | | Purple | issueTitle | | Amber | itemContainer | | Red | widgetAnchor | Release Process

# 1. Bump version in package.json
# 2. Commit and tag
git add package.json
git commit -m "chore: bump version to X.Y.Z"
git tag vX.Y.Z
git push && git push --tags

# 3. CI pipeline runs: lint → test → build → package → release
# 4. Manually trigger publish jobs in GitLab CI for Chrome Web Store / Firefox AMO

License This project is licensed under the GNU General Public License v3.0 or later. ## Rankings - #28,085 — Overall - #30 — screentime tracker - #31 — screen time tracker - #138 — tracker - #191 — component - #247 — airtime ## Permissions and access ### Permissions - `storage` - `activeTab` - `alarms` ### Host permissions - `https://*/*` - `http://*/*` ### Content script matches - `` ## Safety - **Risk impact:** Moderate risk impact - **Risk likelihood:** Moderate risk likelihood ### Analysis details - Allows access to all websites, posing a significant security risk as it can monitor and modify data from any visited site. - This extension has low user count. Unpopular extensions may not be stable or safe. > Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing). ## Similar extensions and apps - [Time Tracker Addon for Kimai](https://chrome-stats.com/d/kimai-time-tracker-addon) — 4 users - [Time Tracker Addon for Kimai](https://chrome-stats.com/d/time-tracker-addon-kimai) — 4 users - [TrackMate – Jira Time Tracker](https://chrome-stats.com/d/trackmate) — 3 users - [Tracking Time Button](https://chrome-stats.com/d/time-tracking-button) — 377 users, 2.56 / 5 - [Awesome Time Tracker Pro](https://chrome-stats.com/d/awesome-time-tracker-pro) - [JSK Task Time Tracker](https://chrome-stats.com/d/jsk-task-time-tracker) — 1 users - [Timeneye widget](https://chrome-stats.com/d/timeneye-widget) — 133 users, 2.57 / 5 - [Toggl Track: Productivity & Time Tracker](https://chrome-stats.com/d/toggl-button-time-tracker) — 9,563 users, 3.94 / 5 - [Clockify Time Tracker](https://chrome-stats.com/d/clockify-time-tracker) — 7,337 users, 3.32 / 5 - [ChronoTrec](https://chrome-stats.com/d/chronotrec) - [Browser timer for Active Collab 5](https://chrome-stats.com/d/browser-timer-for-ac5) — 5 users, 3.67 / 5 - [Tracking Timer](https://chrome-stats.com/d/tracking-timer) — 20 users, 5.00 / 5 --- Source: [Chrome-Stats](https://chrome-stats.com/d/kimai-time-tracker)