Developer

Engineering notes

Z TAB is built as a single product across three surfaces — web, Chrome and Firefox. The notes below are for anyone integrating, auditing or extending it.

Stack

Framework, language and runtime

TypeScript / React

The whole client — web app, mobile start page and extension UI — is written in TypeScript and React. Shared components and hooks keep the three surfaces in sync.

TanStack Start + Vite

The web app is a TanStack Start application on Vite with file-based routing, server functions for secure backend calls, and SSR for the marketing pages.

Edge runtime

Server functions and public API routes run in an edge Worker runtime. All backend calls are fetch-based; there is no long-running Node process.

Tailwind CSS v4

Styling is token-driven through Tailwind v4. The design system uses semantic variables so light, dark and product themes stay consistent.

Profiling

Performance and observability

First paint budget

The new tab must render before the user notices. The clock, search and shortcuts are rendered from local state; network-dependent widgets show placeholders immediately.

Runtime profiling

Long tasks, layout shifts and memory growth are tracked in development builds. Lists are virtualised, images are lazy-loaded, and animations stay on the compositor.

Sync telemetry

Every sync round reports duration, retry count and conflict rate. Back-off is exponential with a jittered cap so the browser never spins on a failing connection.

Bundle budgets

The extension popup and new tab entry points are split into separate chunks. Shared libraries are deduplicated so each surface ships only what it needs.

Database

Postgres schema and access model

Postgres on Lovable Cloud

The authoritative store is Postgres. User data, admin content, audit logs and feature flags live in the public schema with explicit grants and RLS on every user-facing table.

Row Level Security

Policies scope reads and writes to auth.uid(). Roles are stored in a separate user_roles table and checked through a security-definer has_role function to avoid recursion.

Revision-based sync

Each synced row carries a monotonically increasing revision. Clients pull deltas above their cursor and merge last-write-wins per row. Deletes travel as tombstones.

Local-first storage

The browser keeps its own copy in IndexedDB. Reads are local; writes queue to an outbox and reconcile with the server delta on a schedule.

Extension

Browser packaging

One source tree, two manifestsChrome ships as an MV3 build with a service worker; Firefox uses the WebExtensions API. Both compile from the same modules and talk to the same backend.
Session relayThe extension never handles its own OAuth. The user signs in on the web app and the session is handed over through a short-lived, origin-bound relay.
Build outputsWe produce an unpacked Chrome ZIP, a signed CRX3, and a Firefox ZIP. Version strings in the manifest match the release changelog.

Release cadence

Builds are date-versioned (YYYY.M) and cut from a single commit. The Chrome, CRX and Firefox artifacts share the same manifest version, changelog entry and delta-sync schema. There is no separate backend release for the extension.

All user data stays in the signed-in account. The extension is an application build: installing it does not copy your bookmarks or settings into the package.

Changelog

2026.8Widget dock and bubblesFloating dock with three densities, sticky bubble windows and per-widget scaling.
2026.6Notebook readerPlain-text extraction, highlights, marginalia notes and a 12-hour offline cache.
2026.4Bookmark explorer rewriteVirtualised grid and list, marquee selection, drag moves and duplicate cleanup.
2026.2Mobile start pageThe /mtab surface with snap scrolling for Android browsers.

Chrome · Edge · Brave · Arc · Opera

Install Z TAB in your browser

New tab override, one-click saving from the toolbar popup, right-click menus for pages and links, and background sync with the account you use here.

1Download and unzip the package.
2Open chrome://extensions in your browser.
3Turn on Developer mode (top right).
4Click Load unpacked and select the unzipped folder.
5Sign in here once — the extension picks up your account automatically.