Lens

June 7, 2026 ยท View on GitHub

Lens is a browser extension for developers using the Cratis Stack (Cratis Arc + Cratis Chronicle). It streamlines development and testing by letting you manage tenants, users, and test commands and queries directly from your browser โ€” while automatically injecting the correct HTTP headers into your requests.

What It Does

Lens bridges the gap between your Cratis Arc application and your development workflow. Instead of manually crafting headers, switching contexts, or rebuilding code to test different tenant/user scenarios, Lens lets you:

๐Ÿข Tenant Selector

Switch between different tenants on the fly. Lens automatically injects the correct tenancy header into all requests, making it simple to test multi-tenant behavior without restarting your application.

๐Ÿ‘ค User Selector

Simulate requests from different users by selecting them from the extension UI. Your identity headers are automatically set, so your application routes requests with the correct user context.

๐Ÿงช Command & Query Explorer

Navigate, inspect, and execute commands and queries directly from the extension:

  • Browse all available commands and queries in your Cratis Arc application
  • Test commands by filling in parameters and seeing results in real-time
  • Execute queries and inspect response payloads
  • Validate your backend logic without writing test code

๐Ÿ”ง Development Context Management

View and manage the current context (tenant, user, and other identity information) at a glance.

How It Works

HTTP Header Injection

Lens injects HTTP headers into requests made by your web application when the extension is active. This happens transparently โ€” your frontend code doesn't need to change.

Identity Headers

When you select a user, Lens injects headers following the Cratis Arc Authentication specification:

  • Identity context headers that identify the current user
  • Claims and permissions that your backend uses for authorization

Tenancy Headers

When you select a tenant, Lens injects the tenancy header according to the Cratis Arc Tenancy Resolvers specification:

  • Tenant identifier headers that route requests to the correct tenant partition
  • Multi-tenant context information for your application

Automatic Context Propagation

All headers are injected automatically into:

  • Command execution requests
  • Query requests
  • Any HTTP calls made by your application

Your backend receives properly authenticated and tenant-scoped requests, so you can test complex scenarios without manual header manipulation.

Features at a Glance

FeaturePurpose
Tenant SelectorSwitch tenants instantly; header auto-injected
User SelectorSimulate different users; identity headers
Arc Development SourcesConfigure local or remote Cratis Arc
Command ExplorerBrowse and execute backend commands
Query ExplorerRun queries and inspect payloads
Context ViewSee tenant, user, and identity context

Getting Started

Installation

  1. Clone or download the Lens repository
  2. Navigate to the Source/ directory
  3. Build the extension (see Development below)
  4. Load the built extension into Chrome:
    • Open chrome://extensions/
    • Enable "Developer mode"
    • Click "Load unpacked"
    • Select the built output directory

Configuration

Once installed, configure Lens to connect to your Cratis Arc backend:

  1. Open the Lens extension popup
  2. Go to Settings
  3. Add your Arc Development Sources (local or remote endpoints)
  4. Set up users and tenants for your testing scenarios

Development

Build

cd Source
yarn install
yarn build

This builds the extension into a directory that can be loaded into Chrome.

Development Server

For active development with hot reload:

cd Source
yarn dev

Run Tests

cd Source
yarn test

Project Structure

Source/
โ”œโ”€โ”€ manifest.json           # Extension manifest
โ”œโ”€โ”€ main.tsx / LensPopup.tsx # Main UI entry point
โ”œโ”€โ”€ background/             # Service worker for header injection
โ”œโ”€โ”€ commands/               # Command explorer functionality
โ”œโ”€โ”€ queries/                # Query explorer functionality
โ”œโ”€โ”€ settings/               # Configuration and tenant/user management
โ”œโ”€โ”€ context/                # Identity and tenancy context
โ”œโ”€โ”€ shared/                 # Shared utilities and types
โ””โ”€โ”€ arc/                    # Cratis Arc integration

Why Lens?

Working with Cratis Arc during development often means:

  • Manually setting authentication headers to test different users
  • Rebuilding your app to change tenants
  • Writing inline tests for every command/query
  • Struggling to understand what data your backend returns

Lens eliminates this friction. By bringing tenant/user management and command/query testing into your browser, you can focus on building features instead of setting up test harnesses.

License

See LICENSE file for details.