rebase

- Convert demo from vanilla HTML/JS to React + TypeScript + Vite
- Add modern UI with collapsible sections, status bar, and plugin cards
- Convert plugins (twitter, swissbank, spotify) to TypeScript
- Add plugin build script with environment variable injection at build time
- Create globals.d.ts in plugin-sdk for plugin runtime type definitions

.github/workflows/ci.yaml

@@ -15,27 +15,27 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
-          cache: 'npm'
+          node-version: 20
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Build
+      - name: Build extension and dependencies
         run: npm run build
 
-      - name: Lint
+      - name: Lint common, extension and plugin-sdk
         run: npm run lint
 
-      - name: Test Webpack Build
-        run: npm run build:webpack
+      - name: Test common, extension and plugin-sdk
+        run: npm run test
 
       - name: Save extension zip file for releases
         if: github.event_name == 'release'
         uses: actions/upload-artifact@v4
         with:
-          name: tlsn-extension-${{ github.ref_name }}.zip
-          path: ./zip/tlsn-extension-${{ github.ref_name }}.zip
+          name: extension-build
+          path: ./packages/extension/zip/*.zip
           if-no-files-found: error
 
   release:
@@ -45,28 +45,36 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
       - name: Download extension from build-lint-test job
         uses: actions/download-artifact@v4
         with:
-          name: tlsn-extension-${{ github.ref_name }}.zip
-          path: .
+          name: extension-build
+          path: ./dist
 
       - name: 📦 Add extension zip file to release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
+          # Find the extension zip file
+          EXTENSION_ZIP=$(find ./dist -name "extension-*.zip" -type f | head -n 1)
+          if [ -z "$EXTENSION_ZIP" ]; then
+            echo "Error: Extension zip file not found"
+            exit 1
+          fi
+          echo "Found extension zip: $EXTENSION_ZIP"
           gh release upload "${{ github.event.release.tag_name }}" \
-            ./tlsn-extension-${{ github.ref_name }}.zip \
+            "$EXTENSION_ZIP" \
             --clobber
 
-      # Get tokens as documented on 
+      # Get tokens as documented on
       # * https://developer.chrome.com/docs/webstore/using-api#beforeyoubegin
       # * https://github.com/fregante/chrome-webstore-upload-keys?tab=readme-ov-file
       - name: 💨 Publish to chrome store
         uses: browser-actions/release-chrome-extension@latest # https://github.com/browser-actions/release-chrome-extension/tree/latest/
         with:
           extension-id: "gcfkkledipjbgdbimfpijgbkhajiaaph"
-          extension-path: tlsn-extension-${{ github.ref_name }}.zip
+          extension-path: ./dist/extension-0.1.0.zip
           oauth-client-id: ${{ secrets.OAUTH_CLIENT_ID }}
           oauth-client-secret: ${{ secrets.OAUTH_CLIENT_SECRET }}
-          oauth-refresh-token: ${{ secrets.OAUTH_REFRESH_TOKEN }}
+          oauth-refresh-token: ${{ secrets.OAUTH_REFRESH_TOKEN }}

.github/workflows/demo.yml

@@ -0,0 +1,90 @@
+name: demo
+
+on:
+    push:
+        branches:
+            - main
+            - staging
+        tags:
+            - "[v]?[0-9]+.[0-9]+.[0-9]+*"
+    pull_request:
+
+permissions:
+    id-token: write
+    contents: read
+    attestations: write
+
+env:
+    CARGO_TERM_COLOR: always
+    CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
+    should_publish: ${{ github.ref == 'refs/heads/main' || (startsWith(github.ref, 'refs/tags/v') && contains(github.ref, '.')) || github.ref == 'refs/heads/staging' }}
+
+jobs:
+    build_and_publish_demo_verifier_server:
+        name: build and publish demo verifier server image
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: write
+        env:
+            CONTAINER_REGISTRY: ghcr.io
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+
+            - name: Log in to the Container registry
+              uses: docker/login-action@v2
+              with:
+                  registry: ${{ env.CONTAINER_REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Extract metadata (tags, labels) for Docker image
+              id: meta-prover-server
+              uses: docker/metadata-action@v4
+              with:
+                  images: ${{ env.CONTAINER_REGISTRY }}/${{ github.repository }}/demo-verifier-server
+
+            - name: Build and push Docker image
+              uses: docker/build-push-action@v4
+              with:
+                  context: packages/verifier
+                  push: ${{ env.should_publish == 'true' }}
+                  tags: ${{ steps.meta-prover-server.outputs.tags }}
+                  labels: ${{ steps.meta-prover-server.outputs.labels }}
+
+    build_and_publish_demo_frontend:
+        name: build and publish demo frontend image
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: write
+        env:
+            CONTAINER_REGISTRY: ghcr.io
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+
+            - name: Log in to the Container registry
+              uses: docker/login-action@v2
+              with:
+                  registry: ${{ env.CONTAINER_REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Extract metadata (tags, labels) for Docker image
+              id: meta-verifier-webapp
+              uses: docker/metadata-action@v4
+              with:
+                  images: ${{ env.CONTAINER_REGISTRY }}/${{ github.repository }}/demo-ui
+
+            - name: Build and push Docker image
+              uses: docker/build-push-action@v4
+              with:
+                  context: packages/demo
+                  push: ${{ env.should_publish == 'true' }}
+                  tags: ${{ steps.meta-verifier-webapp.outputs.tags }}
+                  labels: ${{ steps.meta-verifier-webapp.outputs.labels }}
+                  build-args: |
+                      VERIFIER_HOST=demo-staging.tlsnotary.org
+                      SSL=true

.gitignore

@@ -1,6 +1,5 @@
 /target
 **/*.rs.bk
-Cargo.lock
 bin/
 **/node_modules
 **/.DS_Store
@@ -9,3 +8,6 @@ build
 tlsn/
 zip
 .vscode
+.claude
+coverage
+packages/verifier/target/

CLAUDE.md

@@ -0,0 +1,708 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+### Monorepo Commands (from root)
+- `npm install` - Install all dependencies for all packages and set up workspace links
+- `npm run dev` - Start extension development server on port 3000 (auto-builds dependencies)
+- `npm run build` - Build production extension (auto-builds dependencies first)
+- `npm run build:deps` - Build only dependencies (@tlsn/common and @tlsn/plugin-sdk)
+- `npm run build:extension` - Build only extension (assumes dependencies are built)
+- `npm run build:all` - Build all packages in monorepo
+- `npm run test` - Run tests for all packages
+- `npm run lint` - Run linting for all packages
+- `npm run lint:fix` - Auto-fix linting issues for all packages
+- `npm run serve:test` - Serve test page on port 8081
+- `npm run clean` - Remove all node_modules, dist, and build directories
+- `npm run demo` - Serve demo page on port 8080
+- `npm run tutorial` - Serve tutorial page on port 8080
+- `npm run docker:up` - Start demo Docker services (verifier + nginx)
+- `npm run docker:down` - Stop demo Docker services
+
+### Extension Package Commands
+- `npm run build` - Production build with zip creation
+- `npm run build:webpack` - Direct webpack build
+- `npm run dev` - Start webpack dev server with hot reload
+- `npm run test` - Run Vitest tests
+- `npm run test:watch` - Run tests in watch mode
+- `npm run test:coverage` - Generate test coverage report
+- `npm run lint` / `npm run lint:fix` - ESLint checks and fixes
+- `npm run serve:test` - Python HTTP server for integration tests
+
+### Common Package Commands (`packages/common`)
+- `npm run build` - Build TypeScript to dist/
+- `npm run test` - Run Vitest tests
+- `npm run lint` - Run all linters (ESLint, Prettier, TypeScript)
+- `npm run lint:fix` - Auto-fix linting issues
+
+### Plugin SDK Package Commands
+- `npm run build` - Build isomorphic package with Vite + TypeScript declarations
+- `npm run test` - Run Vitest tests
+- `npm run test:coverage` - Generate test coverage
+- `npm run lint` - Run all linters (ESLint, Prettier, TypeScript)
+- `npm run lint:fix` - Auto-fix linting issues
+
+### Verifier Server Package Commands
+- `cargo run` - Run development server on port 7047
+- `cargo build --release` - Build production binary
+- `cargo test` - Run Rust tests
+- `cargo check` - Check compilation without building
+
+## Monorepo Architecture
+
+The project is organized as a monorepo using npm workspaces with the following packages:
+
+- **`packages/common`**: Shared utilities (logging system) used by extension and plugin-sdk
+- **`packages/extension`**: Chrome Extension (Manifest V3) for TLSNotary proof generation
+- **`packages/plugin-sdk`**: SDK for developing and running TLSN plugins using QuickJS sandboxing
+- **`packages/verifier`**: Rust-based WebSocket server for TLSNotary verification
+- **`packages/demo`**: Demo server with Docker setup and example plugins
+- **`packages/tutorial`**: Tutorial examples for learning plugin development
+
+**Build Dependencies:**
+The extension depends on `@tlsn/common` and `@tlsn/plugin-sdk`. These must be built before the extension:
+```bash
+# From root - builds all dependencies automatically
+npm run dev
+
+# Or manually build dependencies first
+cd packages/common && npm run build
+cd packages/plugin-sdk && npm run build
+cd packages/extension && npm run dev
+```
+
+**Important**: The extension must match the version of the notary server it connects to.
+
+## Extension Architecture Overview
+
+### Extension Entry Points
+The extension has 5 main entry points defined in `webpack.config.js`:
+
+#### 1. **Background Service Worker** (`src/entries/Background/index.ts`)
+Core responsibilities:
+- **Multi-Window Management**: Uses `WindowManager` class to track multiple browser windows simultaneously
+- **Session Management**: Uses `SessionManager` class for plugin session lifecycle (imported but not yet integrated)
+- **Request Interception**: Uses `webRequest.onBeforeRequest` API to intercept HTTP requests per window
+- **Request Storage**: Each window maintains its own request history (max 1000 requests per window)
+- **Message Routing**: Forwards messages between content scripts, popup, and injected page scripts
+- **Offscreen Document Management**: Creates offscreen documents for background DOM operations (Chrome 109+)
+- **Automatic Cleanup**: Periodic cleanup of invalid windows every 5 minutes
+- Uses `webextension-polyfill` for cross-browser compatibility
+
+Key message handlers:
+- `PING` → `PONG` (connectivity test)
+- `OPEN_WINDOW` → Creates new managed window with URL validation, request tracking, and optional overlay
+- `TLSN_CONTENT_TO_EXTENSION` → Legacy handler that opens x.com window (backward compatibility)
+- `CONTENT_SCRIPT_READY` → Triggers plugin UI re-render when content script initializes in a managed window
+
+#### 2. **Content Script** (`src/entries/Content/index.ts`)
+Injected into all HTTP/HTTPS pages via manifest. Responsibilities:
+- **Script Injection**: Injects `content.bundle.js` into page context to expose page-accessible API
+- **Plugin UI Rendering**: Renders plugin UI from DOM JSON into actual DOM elements in container
+- **Message Bridge**: Bridges messages between page scripts and extension background
+- **Lifecycle Notifications**: Notifies background when content script is ready
+
+Message handlers:
+- `GET_PAGE_INFO` → Returns page title, URL, domain
+- `RE_RENDER_PLUGIN_UI` → Renders plugin UI from DOM JSON structure into DOM container
+- `HIDE_TLSN_OVERLAY` → Removes plugin UI container and clears state
+
+Window message handler:
+- Listens for `TLSN_CONTENT_SCRIPT_MESSAGE` from page scripts
+- Forwards to background via `TLSN_CONTENT_TO_EXTENSION`
+
+On initialization:
+- Sends `CONTENT_SCRIPT_READY` message to background to trigger UI re-render for managed windows
+
+#### 3. **Content Module** (`src/entries/Content/content.ts`)
+Injected script running in page context (not content script context):
+- **Page API**: Exposes `window.tlsn` object to web pages with:
+  - `sendMessage(data)`: Legacy method for backward compatibility
+  - `open(url, options)`: Opens new managed window with request interception
+- **Lifecycle Event**: Dispatches `extension_loaded` custom event when ready
+- **Web Accessible Resource**: Listed in manifest's `web_accessible_resources`
+
+Page API usage:
+```javascript
+// Open a new window with request tracking
+await window.tlsn.open('https://x.com', {
+  width: 900,
+  height: 700,
+  showOverlay: true
+});
+
+// Legacy method
+window.tlsn.sendMessage({ action: 'startTLSN' });
+```
+
+#### 4. **Popup UI** (`src/entries/Popup/index.tsx`)
+React-based extension popup:
+- **Simple Interface**: "Hello World" boilerplate with test button
+- **Redux Integration**: Connected to Redux store via `react-redux`
+- **Message Sending**: Can send messages to background script
+- **Styling**: Uses Tailwind CSS with custom button/input classes
+- Entry point: `popup.html` (400x300px default size)
+
+#### 5. **DevConsole** (`src/entries/DevConsole/index.tsx`)
+Interactive development console for testing TLSN plugins:
+- **Code Editor**: CodeMirror with JavaScript syntax highlighting and one-dark theme
+- **Live Execution**: Runs plugin code in QuickJS sandbox via background service worker
+- **Console Output**: Timestamped entries showing execution results, errors, and timing
+- **ExtensionAPI**: Exposes `window.tlsn.execCode()` method for plugin execution
+- Access: Right-click context menu → "Developer Console"
+
+**Plugin Structure:**
+Plugins must export:
+- `config`: Metadata (`name`, `description`)
+- `main()`: Reactive UI rendering function (called when state changes)
+- `onClick()`: Click handler for proof generation
+- React-like hooks: `useHeaders()`, `useEffect()`, `useRequests()`
+- UI components: `div()`, `button()` returning DOM JSON
+- Capabilities: `openWindow()`, `prove()`, `done()`
+
+#### 6. **Offscreen Document** (`src/entries/Offscreen/index.tsx`)
+Isolated React component for background processing:
+- **Purpose**: Handles DOM operations unavailable in service workers
+- **SessionManager Integration**: Executes plugin code via `SessionManager.executePlugin()`
+- **Message Handling**: Listens for `EXEC_CODE` messages from DevConsole
+- **Lifecycle**: Created dynamically by background script, reused if exists
+- Entry point: `offscreen.html`
+
+### Key Classes
+
+#### **WindowManager** (`src/background/WindowManager.ts`)
+Centralized management for multiple browser windows:
+- **Window Tracking**: Maintains Map of window ID to ManagedWindow objects
+- **Request History**: Each window stores up to 1000 intercepted requests
+- **Overlay Control**: Shows/hides TLSN overlay per window with retry logic
+- **Lifecycle Management**: Register, close, lookup windows by ID or tab ID
+- **Window Limits**: Enforces maximum of 10 managed windows
+- **Auto-cleanup**: Removes invalid windows on periodic intervals
+
+Key methods:
+- `registerWindow(config)`: Create new managed window with UUID
+- `addRequest(windowId, request)`: Add intercepted request to window
+- `showOverlay(windowId)`: Display request overlay (with retry)
+- `cleanupInvalidWindows()`: Remove closed windows from tracking
+
+#### **SessionManager** (`src/offscreen/SessionManager.ts`)
+Plugin session management with TLSNotary proof generation:
+- Uses `@tlsn/plugin-sdk` Host class for sandboxed plugin execution
+- Provides unified `prove()` capability to plugins via QuickJS environment
+- Integrates with `ProveManager` for WASM-based TLS proof generation
+- Handles HTTP transcript parsing with byte-level range tracking
+
+**Key Capability - Unified prove() API:**
+The SessionManager exposes a single `prove()` function to plugins that handles the entire proof pipeline:
+1. Creates prover connection to verifier server
+2. Sends HTTP request through TLS prover
+3. Captures TLS transcript (sent/received bytes)
+4. Parses transcript with Parser class for range extraction
+5. Applies selective reveal handlers to show only specified data
+6. Generates and returns cryptographic proof
+
+**Handler System:**
+Plugins control what data is revealed in proofs using Handler objects:
+- `type`: `'SENT'` (request data) or `'RECV'` (response data)
+- `part`: `'START_LINE'`, `'PROTOCOL'`, `'METHOD'`, `'REQUEST_TARGET'`, `'STATUS_CODE'`, `'HEADERS'`, `'BODY'`
+- `action`: `'REVEAL'` (plaintext) or `'PEDERSEN'` (hash commitment)
+- `params`: Optional parameters for granular control (e.g., `hideKey`, `hideValue`, `type: 'json'`, `path`)
+
+Example prove() call:
+```javascript
+const proof = await prove(
+  { url: 'https://api.x.com/endpoint', method: 'GET', headers: {...} },
+  {
+    verifierUrl: 'http://localhost:7047',
+    proxyUrl: 'wss://notary.pse.dev/proxy?token=api.x.com',
+    maxRecvData: 16384,
+    maxSentData: 4096,
+    handlers: [
+      { type: 'SENT', part: 'START_LINE', action: 'REVEAL' },
+      { type: 'RECV', part: 'BODY', action: 'REVEAL',
+        params: { type: 'json', path: 'screen_name', hideKey: true } }
+    ]
+  }
+);
+```
+
+### State Management
+Redux store located in `src/reducers/index.tsx`:
+- **App State Interface**: `{ message: string, count: number }`
+- **Action Creators**:
+  - `setMessage(message: string)` - Updates message state
+  - `incrementCount()` - Increments counter
+- **Store Configuration** (`src/utils/store.ts`):
+  - Development: Uses `redux-thunk` + `redux-logger` middleware
+  - Production: Uses `redux-thunk` only
+- **Type Safety**: Exports `RootState` and `AppRootState` types
+
+### Message Passing Architecture
+
+**Page → Extension Flow (Window Opening)**:
+```
+Page: window.tlsn.open(url)
+  ↓ window.postMessage(TLSN_OPEN_WINDOW)
+Content Script: event listener
+  ↓ browser.runtime.sendMessage(OPEN_WINDOW)
+Background: WindowManager.registerWindow()
+  ↓ browser.windows.create()
+  ↓ Returns window info
+```
+
+**Request Interception Flow**:
+```
+Browser: HTTP request in managed window
+  ↓ webRequest.onBeforeRequest
+Background: WindowManager.addRequest()
+  ↓ browser.tabs.sendMessage(UPDATE_TLSN_REQUESTS)
+Content Script: Update overlay UI
+```
+
+**Plugin UI Re-rendering Flow**:
+```
+Content Script: Loads in managed window
+  ↓ browser.runtime.sendMessage(CONTENT_SCRIPT_READY)
+Background: Receives CONTENT_SCRIPT_READY
+  ↓ WindowManager.reRenderPluginUI(windowId)
+  ↓ SessionManager calls main(true) to force re-render
+  ↓ browser.tabs.sendMessage(RE_RENDER_PLUGIN_UI)
+Content Script: Renders plugin UI from DOM JSON
+```
+
+**Multi-Window Management**:
+- Each window has unique UUID and separate request history
+- Overlay updates are sent only to the specific window's tab
+- Windows are tracked by both Chrome window ID and tab ID
+- Maximum 10 concurrent managed windows
+
+**Security**:
+- Content script validates origin (`event.origin === window.location.origin`)
+- URL validation using `validateUrl()` utility before window creation
+- Request interception limited to managed windows only
+
+### TLSN Overlay Feature
+
+The overlay is a full-screen modal showing intercepted requests:
+- **Design**: Dark gradient background (rgba(0,0,0,0.85)) with glassmorphic message box
+- **Content**:
+  - Header: "TLSN Plugin In Progress" with gradient text
+  - Request list: Scrollable container showing METHOD + URL for each request
+  - Request count: Displayed in header
+- **Styling**: Inline CSS with animations (fadeInScale), custom scrollbar styling
+- **Updates**: Real-time updates as new requests are intercepted
+- **Lifecycle**: Created when TLSN window opens, updated via background messages, cleared on window close
+
+### Build Configuration
+
+**Webpack 5 Setup** (`webpack.config.js`):
+- **Entry Points**: popup, background, contentScript, content, offscreen
+- **Output**: `build/` directory with `[name].bundle.js` pattern
+- **Loaders**:
+  - `ts-loader` - TypeScript compilation (transpileOnly in dev)
+  - `babel-loader` - JavaScript transpilation with React Refresh
+  - `style-loader` + `css-loader` + `postcss-loader` + `sass-loader` - Styling pipeline
+  - `html-loader` - HTML templates
+  - `asset/resource` - File assets (images, fonts)
+- **Plugins**:
+  - `ReactRefreshWebpackPlugin` - Hot module replacement (dev only)
+  - `CleanWebpackPlugin` - Cleans build directory
+  - `CopyWebpackPlugin` - Copies manifest, icons, CSS files
+  - `HtmlWebpackPlugin` - Generates popup.html and offscreen.html
+  - `TerserPlugin` - Code minification (production only)
+- **Dev Server** (`utils/webserver.js`):
+  - Port: 3000 (configurable via `PORT` env var)
+  - Hot reload enabled with `webpack/hot/dev-server`
+  - Writes to disk for Chrome to load (`writeToDisk: true`)
+  - WebSocket transport for HMR
+
+**Production Build** (`utils/build.js`):
+- Adds `ZipPlugin` to create `tlsn-extension-{version}.zip` in `zip/` directory
+- Uses package.json version for naming
+- Exits with code 1 on errors or warnings
+
+### Extension Permissions
+
+Defined in `src/manifest.json`:
+- `offscreen` - Create offscreen documents for background processing
+- `webRequest` - Intercept HTTP/HTTPS requests
+- `storage` - Persistent local storage
+- `activeTab` - Access active tab information
+- `tabs` - Tab management (create, query, update)
+- `windows` - Window management (create, track, remove)
+- `host_permissions: ["<all_urls>"]` - Access all URLs for request interception
+- `content_scripts` - Inject into all HTTP/HTTPS pages
+- `web_accessible_resources` - Make content.bundle.js, CSS, and icons accessible to pages
+- `content_security_policy` - Allow WASM execution (`wasm-unsafe-eval`)
+
+### TypeScript Configuration
+
+**tsconfig.json**:
+- Target: `esnext`
+- Module: `esnext` with Node resolution
+- Strict mode enabled
+- JSX: React (not React 17+ automatic runtime)
+- Includes: `src/` only
+- Excludes: `build/`, `node_modules/`
+- Types: `chrome` (for Chrome extension APIs)
+
+**Type Declarations**:
+- `src/global.d.ts` - Declares PNG module types
+- Uses `@types/chrome`, `@types/webextension-polyfill`, `@types/react`, etc.
+
+### Styling
+
+**Tailwind CSS**:
+- Configuration: `tailwind.config.js`
+- Content: Scans all `src/**/*.{js,jsx,ts,tsx}`
+- Custom theme: Primary color `#243f5f`
+- PostCSS pipeline with `postcss-preset-env`
+
+**SCSS**:
+- FontAwesome integration (all icon sets: brands, solid, regular)
+- Custom utility classes: `.button`, `.input`, `.select`, `.textarea`
+- BEM-style modifiers: `.button--primary`
+- Tailwind @apply directives mixed with custom styles
+
+**Popup Dimensions**:
+- Default: 480x600px (set in index.scss body styles)
+- Customizable via inline styles or props
+
+## Development Workflow
+
+1. **Initial Setup** (from repository root):
+   ```bash
+   npm install  # Requires Node.js >= 18
+   ```
+
+2. **Development Mode**:
+   ```bash
+   npm run dev  # Starts webpack-dev-server on port 3000
+   ```
+   - Hot module replacement enabled
+   - Files written to `packages/extension/build/` directory
+   - Load extension in Chrome: `chrome://extensions/` → Developer mode → Load unpacked → Select `build/` folder
+
+3. **Testing Multi-Window Functionality**:
+   ```javascript
+   // From any webpage with extension loaded:
+   await window.tlsn.open('https://x.com', { showOverlay: true });
+   ```
+   - Opens new window with request interception
+   - Displays overlay showing captured HTTP requests
+   - Maximum 10 concurrent windows
+
+4. **Production Build**:
+   ```bash
+   NODE_ENV=production npm run build  # Creates zip in packages/extension/zip/
+   ```
+
+5. **Running Tests**:
+   ```bash
+   npm run test         # Run all tests
+   npm run test:coverage # Generate coverage reports
+   ```
+
+## Plugin SDK Package (`packages/plugin-sdk`)
+
+### Host Class API
+The SDK provides a `Host` class for sandboxed plugin execution with capability injection:
+
+```typescript
+import Host from '@tlsn/plugin-sdk';
+
+const host = new Host({
+  onProve: async (requestOptions, proverOptions) => { /* proof generation */ },
+  onRenderPluginUi: (windowId, domJson) => { /* render UI */ },
+  onCloseWindow: (windowId) => { /* cleanup */ },
+  onOpenWindow: async (url, options) => { /* open window */ },
+});
+
+// Execute plugin code
+await host.executePlugin(pluginCode, { eventEmitter });
+```
+
+**Capabilities injected into plugin environment:**
+- `prove(requestOptions, proverOptions)`: Unified TLS proof generation
+- `openWindow(url, options)`: Open managed browser windows
+- `useHeaders(filter)`: Subscribe to intercepted HTTP headers
+- `useRequests(filter)`: Subscribe to intercepted HTTP requests
+- `useEffect(callback, deps)`: React-like side effects
+- `useState(key, defaultValue)`: Get state value (returns current value or default)
+- `setState(key, value)`: Set state value (triggers UI re-render)
+- `div(options, children)`: Create div DOM elements
+- `button(options, children)`: Create button DOM elements
+- `done(result)`: Complete plugin execution
+
+**State Management Example:**
+```javascript
+function main() {
+  const count = useState('counter', 0);
+
+  return div({}, [
+    div({}, [`Count: ${count}`]),
+    button({ onclick: 'handleClick' }, ['Increment'])
+  ]);
+}
+
+async function handleClick() {
+  const count = useState('counter', 0);
+  setState('counter', count + 1);
+}
+```
+
+### Parser Class
+HTTP message parser with byte-level range tracking:
+
+```typescript
+import { Parser } from '@tlsn/plugin-sdk';
+
+const parser = new Parser(httpTranscript);
+const json = parser.json();
+
+// Extract byte ranges for selective disclosure
+const ranges = parser.ranges.body('screen_name', { type: 'json', hideKey: true });
+```
+
+**Features:**
+- Parse HTTP requests and responses
+- Handle chunked transfer encoding
+- Extract header ranges with case-insensitive names
+- Extract JSON field ranges (top-level only)
+- Regex-based body pattern matching
+- Track byte offsets for TLSNotary selective disclosure
+
+**Limitations:**
+- Nested JSON field access (e.g., `"user.profile.name"`) not yet supported
+- Multi-chunk responses map to first chunk's offset only
+
+### QuickJS Sandboxing
+- Uses `@sebastianwessel/quickjs` for secure JavaScript execution
+- Plugins run in isolated WebAssembly environment
+- Network and filesystem access disabled by default
+- Host controls available capabilities through `env` object
+- Reactive rendering: `main()` function called whenever hook state changes
+- Force re-render: `main(true)` can be called to force UI re-render even if state hasn't changed (used on content script initialization)
+
+### Build Configuration
+- **Vite**: Builds isomorphic package for Node.js and browser
+- **TypeScript**: Strict mode with full type declarations
+- **Testing**: Vitest with coverage reporting
+- **Output**: ESM module in `dist/` directory
+
+## Verifier Server Package (`packages/verifier`)
+
+Rust-based HTTP/WebSocket server for TLSNotary verification:
+
+**Architecture:**
+- Built with Axum web framework
+- WebSocket endpoints for prover-verifier communication
+- Session management with UUID-based tracking
+- CORS enabled for cross-origin requests
+- Webhook system for external service notifications
+
+**Endpoints:**
+- `GET /health` → Health check (returns "ok")
+- `WS /session` → Create new verification session
+- `WS /verifier?sessionId=<id>` → WebSocket verification endpoint
+- `WS /proxy?token=<host>` → WebSocket proxy for TLS connections (compatible with notary.pse.dev)
+
+**Configuration:**
+- Default port: `7047`
+- Configurable max sent/received data sizes
+- Request timeout handling
+- Tracing with INFO level logging
+- YAML configuration file (`config.yaml`) for webhooks
+
+**Webhook Configuration (`config.yaml`):**
+```yaml
+webhooks:
+  # Per-server webhooks
+  "api.x.com":
+    url: "https://your-backend.example.com/webhook/twitter"
+    headers:
+      Authorization: "Bearer your-secret-token"
+      X-Source: "tlsn-verifier"
+
+  # Wildcard for unmatched servers
+  "*":
+    url: "https://your-backend.example.com/webhook/default"
+```
+
+Webhooks receive POST requests with:
+- Session info (ID, custom data)
+- Redacted transcripts (only revealed ranges visible)
+- Reveal configuration
+
+**Running the Server:**
+```bash
+cd packages/verifier
+cargo run                    # Development
+cargo build --release        # Production
+cargo test                   # Tests
+```
+
+**Session Flow:**
+1. Extension creates session via `/session` WebSocket
+2. Server returns `sessionId` and waits for verifier connection
+3. Extension connects to `/verifier?sessionId=<id>`
+4. Prover sends HTTP request through `/proxy?token=<host>`
+5. Verifier validates TLS handshake and transcript
+6. Server returns verification result with transcripts
+7. If webhook configured, sends POST to configured endpoint (fire-and-forget)
+
+## Common Package (`packages/common`)
+
+Shared utilities used by extension and plugin-sdk:
+
+**Logger System:**
+Centralized logging with configurable levels:
+```typescript
+import { logger, LogLevel } from '@tlsn/common';
+
+// Initialize with log level
+logger.init(LogLevel.DEBUG);
+
+// Log at different levels
+logger.debug('Detailed debug info');
+logger.info('Informational message');
+logger.warn('Warning message');
+logger.error('Error message');
+
+// Change level at runtime
+logger.setLevel(LogLevel.WARN);
+```
+
+**Log Levels:**
+- `DEBUG` (0) - Most verbose, includes all messages
+- `INFO` (1) - Informational messages and above
+- `WARN` (2) - Warnings and errors only
+- `ERROR` (3) - Errors only
+
+**Output Format:**
+```
+[HH:MM:SS] [LEVEL] message
+```
+
+## Demo Package (`packages/demo`)
+
+Docker-based demo environment for testing plugins:
+
+**Files:**
+- `twitter.js`, `swissbank.js` - Example plugin files
+- `docker-compose.yml` - Docker services configuration
+- `nginx.conf` - Reverse proxy configuration
+- `start.sh` - Setup script with URL templating
+
+**Docker Services:**
+1. `verifier` - TLSNotary verifier server (port 7047)
+2. `demo-static` - nginx serving static plugin files
+3. `nginx` - Reverse proxy (port 80)
+
+**Environment Variables:**
+- `VERIFIER_HOST` - Verifier server host (default: `localhost:7047`)
+- `SSL` - Use https/wss protocols (default: `false`)
+
+**Usage:**
+```bash
+# Local development
+./start.sh
+
+# Production with SSL
+VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./start.sh
+
+# Docker detached mode
+./start.sh -d
+```
+
+The `start.sh` script:
+1. Processes plugin files, replacing `verifierUrl` and `proxyUrl` placeholders
+2. Copies processed files to `generated/` directory
+3. Starts Docker Compose services
+
+## Important Implementation Notes
+
+### Plugin API Changes
+The plugin API uses a **unified `prove()` function** instead of separate functions. The old API (`createProver`, `sendRequest`, `transcript`, `reveal`, `getResponse`) has been removed.
+
+**Current API:**
+```javascript
+const proof = await prove(requestOptions, proverOptions);
+```
+
+**Handler Parameter:**
+Note that the parameter name is `handlers` (plural), not `reveal`:
+```javascript
+proverOptions: {
+  verifierUrl: 'http://localhost:7047',
+  proxyUrl: 'wss://...',
+  maxRecvData: 16384,
+  maxSentData: 4096,
+  handlers: [/* handler objects */]  // NOT 'reveal'
+}
+```
+
+### DevConsole Default Template
+The default plugin code in `DevConsole/index.tsx` is heavily commented to serve as educational documentation. When modifying, maintain the comprehensive inline comments explaining:
+- Each step of the proof generation flow
+- Purpose of each header and parameter
+- What each reveal handler does
+- How React-like hooks work
+
+### Test Data Sanitization
+Parser tests (`packages/plugin-sdk/src/parser.test.ts`) use redacted sensitive data:
+- Authentication tokens: `REDACTED_BEARER_TOKEN`, `REDACTED_CSRF_TOKEN_VALUE`
+- Screen names: `test_user` (not real usernames)
+- Cookie values: `REDACTED_GUEST_ID`, `REDACTED_COOKIE_VALUE`
+
+### Known Issues
+
+⚠️ **Legacy Code Warning**: `src/entries/utils.ts` contains imports from non-existent files:
+- `Background/rpc.ts` (removed in refactor)
+- `SidePanel/types.ts` (removed in refactor)
+- Functions: `pushToRedux()`, `openSidePanel()`, `waitForEvent()`
+- **Status**: Dead code, not used by current entry points
+- **Action**: Remove this file or refactor if functionality needed
+
+## Websockify Integration
+
+Used for WebSocket proxying of TLS connections:
+
+**Build Websockify Docker Image**:
+```bash
+git clone https://github.com/novnc/websockify && cd websockify
+./docker/build.sh
+```
+
+**Run Websockify**:
+```bash
+# For x.com (Twitter)
+docker run -it --rm -p 55688:80 novnc/websockify 80 api.x.com:443
+
+# For Twitter (alternative)
+docker run -it --rm -p 55688:80 novnc/websockify 80 api.twitter.com:443
+```
+
+Purpose: Proxies HTTPS connections through WebSocket for browser-based TLS operations.
+
+## Code Quality
+
+**ESLint Configuration** (`.eslintrc`):
+- Extends: `prettier`, `@typescript-eslint/recommended`
+- Parser: `@typescript-eslint/parser`
+- Rules:
+  - `prettier/prettier`: error
+  - `@typescript-eslint/no-explicit-any`: warning
+  - `@typescript-eslint/no-var-requires`: off (allows require in webpack config)
+  - `@typescript-eslint/ban-ts-comment`: off
+  - `no-undef`: error
+  - `padding-line-between-statements`: error
+- Environment: `webextensions`, `browser`, `node`, `es6`
+- Ignores: `node_modules`, `zip`, `build`, `wasm`, `tlsn`, `webpack.config.js`
+
+**Prettier Configuration** (`.prettierrc.json`):
+- Single quotes, trailing commas, 2-space indentation
+- Ignore: `.prettierignore` (not in repo, likely default ignores)
+

README.md

@@ -1,71 +1,581 @@
-![MIT licensed][mit-badge]
-![Apache licensed][apache-badge]
-[![Build Status][actions-badge]][actions-url]
+<img src="packages/extension/src/assets/img/icon-128.png" width="64"/>
 
-[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg
-[apache-badge]: https://img.shields.io/github/license/saltstack/salt
-[actions-badge]: https://github.com/tlsnotary/tlsn-extension/actions/workflows/build.yaml/badge.svg
-[actions-url]: https://github.com/tlsnotary/tlsn-extension/actions?query=workflow%3Abuild+branch%3Amain++
+# TLSN Extension Monorepo
 
-<img src="src/assets/img/icon-128.png" width="64"/>
-
-# Chrome Extension (MV3) for TLSNotary
+A Chrome Extension for TLSNotary with plugin SDK and verifier server.
 
 > [!IMPORTANT]
-> ⚠️ When running the extension against a [notary server](https://github.com/tlsnotary/tlsn/tree/main/crates/notary/server), please ensure that the server's version is the same as the version of this extension
+> When running the extension against a notary server, please ensure that the server's version is the same as the version of this extension.
+
+## Table of Contents
+
+- [Monorepo Structure](#monorepo-structure)
+- [Architecture Overview](#architecture-overview)
+- [Getting Started](#getting-started)
+- [Development](#development)
+- [Production Build](#production-build)
+- [End-to-End Testing](#end-to-end-testing)
+- [Running the Demo](#running-the-demo)
+- [Websockify Integration](#websockify-integration)
+- [Publishing](#publishing)
+- [License](#license)
+
+## Monorepo Structure
+
+This repository is organized as an npm workspaces monorepo with six main packages:
+
+```
+tlsn-extension/
+├── packages/
+│   ├── extension/           # Chrome Extension (Manifest V3)
+│   │   ├── src/
+│   │   │   ├── entries/
+│   │   │   │   ├── Background/     # Service worker for extension logic
+│   │   │   │   ├── Content/        # Content scripts injected into pages
+│   │   │   │   ├── DevConsole/     # Developer Console with code editor
+│   │   │   │   ├── Popup/          # Extension popup UI (optional)
+│   │   │   │   └── Offscreen/      # Offscreen document for DOM operations
+│   │   │   ├── manifest.json
+│   │   │   └── utils/
+│   │   ├── webpack.config.js
+│   │   └── package.json
+│   │
+│   ├── plugin-sdk/          # SDK for developing TLSN plugins
+│   │   ├── src/
+│   │   ├── examples/
+│   │   └── package.json
+│   │
+│   ├── common/              # Shared utilities (logging system)
+│   │   ├── src/
+│   │   │   └── logger/           # Centralized logging with configurable levels
+│   │   └── package.json
+│   │
+│   ├── verifier/            # Rust-based verifier server
+│   │   ├── src/
+│   │   │   └── main.rs           # Server setup, routing, and verification
+│   │   ├── config.yaml           # Webhook configuration
+│   │   └── Cargo.toml
+│   │
+│   ├── demo/                # Demo server with Docker setup
+│   │   ├── *.js                  # Example plugin files
+│   │   ├── docker-compose.yml    # Docker services configuration
+│   │   └── start.sh              # Setup script with configurable URLs
+│   │
+│   ├── tutorial/            # Tutorial examples
+│   │   └── *.js                  # Tutorial plugin files
+│   │
+│   └── tlsn-wasm-pkg/       # Pre-built TLSN WebAssembly package
+│       └── (WASM binaries)
+│
+├── package.json             # Root workspace configuration
+└── README.md
+```
+
+### Package Details
+
+#### 1. **extension** - Chrome Extension (Manifest V3)
+A browser extension that enables TLSNotary functionality with the following key features:
+- **Multi-Window Management**: Track multiple browser windows with request interception
+- **Developer Console**: Interactive code editor for writing and testing TLSN plugins
+- **Request Interception**: Capture HTTP/HTTPS requests from managed windows
+- **Plugin Execution**: Run sandboxed JavaScript plugins using QuickJS
+- **TLSN Overlay**: Visual display of intercepted requests
+
+**Key Entry Points:**
+- `Background`: Service worker for extension logic, window management, and message routing
+- `Content`: Scripts injected into pages for communication and overlay display
+- `DevConsole`: Code editor page accessible via right-click context menu
+- `Popup`: Optional extension popup UI
+- `Offscreen`: Background DOM operations for service worker limitations
+
+#### 2. **plugin-sdk** - Plugin Development SDK
+SDK for developing and running TLSN WebAssembly plugins with QuickJS sandboxing:
+- Secure JavaScript execution in isolated WebAssembly environment
+- Host capability system for controlled plugin access
+- React-like hooks: `useHeaders()`, `useRequests()`, `useEffect()`, `useState()`, `setState()`
+- Isomorphic package for Node.js and browser environments
+- TypeScript support with full type declarations
+
+#### 3. **common** - Shared Utilities
+Centralized logging system used across packages:
+- Configurable log levels: `DEBUG`, `INFO`, `WARN`, `ERROR`
+- Timestamped output with level prefixes
+- Singleton pattern for consistent logging across modules
+
+#### 4. **verifier** - Verifier Server
+Rust-based HTTP/WebSocket server for TLSNotary verification:
+- Health check endpoint (`GET /health`)
+- Session creation endpoint (`WS /session`)
+- WebSocket verification endpoint (`WS /verifier?sessionId=<id>`)
+- WebSocket proxy endpoint (`WS /proxy?token=<host>`) - compatible with notary.pse.dev
+- Webhook API for POST notifications to external services
+- YAML configuration for webhook endpoints (`config.yaml`)
+- CORS enabled for cross-origin requests
+- Runs on `localhost:7047` by default
+
+#### 5. **demo** - Demo Server
+Docker-based demo environment with:
+- Pre-configured example plugins (Twitter, SwissBank)
+- Docker Compose setup with verifier and nginx
+- Configurable verifier URLs via environment variables
+- Plugin file generator (`generate.sh`) with SSL support
+- Docker startup script (`start.sh`)
+
+#### 6. **tlsn-wasm-pkg** - TLSN WebAssembly Package
+Pre-built WebAssembly binaries for TLSNotary functionality in the browser.
+
+## Architecture Overview
+
+### Extension Architecture
+
+The extension uses a message-passing architecture with five main entry points:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     Browser Extension                         │
+│                                                               │
+│  ┌──────────────┐      ┌──────────────┐                      │
+│  │  Background  │◄────►│   Content    │◄──── Page Scripts    │
+│  │    (SW)      │      │   Script     │                      │
+│  └──────┬───────┘      └──────────────┘                      │
+│         │                                                     │
+│         ├─► Window Management (WindowManager)                │
+│         ├─► Request Interception (webRequest API)            │
+│         ├─► Session Management (SessionManager)              │
+│         └─► Message Routing                                  │
+│                                                               │
+│  ┌──────────────┐      ┌──────────────┐                      │
+│  │ DevConsole   │      │   Offscreen  │                      │
+│  │  (Editor)    │      │  (Background)│                      │
+│  └──────────────┘      └──────────────┘                      │
+└─────────────────────────────────────────────────────────────┘
+                          │
+                          ▼
+                   ┌──────────────┐
+                   │   Verifier   │
+                   │    Server    │
+                   │ (localhost:  │
+                   │    7047)     │
+                   └──────────────┘
+```
+
+### Message Flow
+
+**Opening a Managed Window:**
+```
+Page → window.tlsn.open(url)
+  ↓ window.postMessage(TLSN_OPEN_WINDOW)
+Content Script → event listener
+  ↓ browser.runtime.sendMessage(OPEN_WINDOW)
+Background → WindowManager.registerWindow()
+  ↓ browser.windows.create()
+  ↓ Returns window info with UUID
+```
+
+**Request Interception:**
+```
+Browser → HTTP request in managed window
+  ↓ webRequest.onBeforeRequest
+Background → WindowManager.addRequest()
+  ↓ browser.tabs.sendMessage(UPDATE_TLSN_REQUESTS)
+Content Script → Update TLSN overlay UI
+```
+
+## Getting Started
+
+### Prerequisites
+
+- **Node.js** >= 18
+- **Rust** (for verifier server) - Install from [rustup.rs](https://rustup.rs/)
+- **Chrome/Chromium** browser
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/tlsnotary/tlsn-extension.git
+cd tlsn-extension
+```
+
+2. Install all dependencies:
+```bash
+npm install
+```
+
+This installs dependencies for all packages in the monorepo and automatically sets up workspace links between packages.
+
+## Development
+
+### Running the Extension in Development Mode
+
+1. Start the development server:
+```bash
+npm run dev
+```
+
+This automatically builds all dependencies (common, plugin-sdk) and then starts webpack-dev-server on port 3000 with hot module replacement. Files are written to `packages/extension/build/`.
+
+2. Load the extension in Chrome:
+   - Navigate to `chrome://extensions/`
+   - Enable "Developer mode" toggle (top right)
+   - Click "Load unpacked"
+   - Select the `packages/extension/build/` folder
+
+3. The extension will auto-reload on file changes (manual refresh needed for manifest changes).
+
+### Running the Verifier Server
+
+The verifier server is required for E2E testing. Run it in a separate terminal:
+
+```bash
+cd packages/verifier
+cargo run
+```
+
+The server will start on `http://localhost:7047`.
+
+**Verifier API Endpoints:**
+- `GET /health` - Health check
+- `WS /session` - Create new verification session
+- `WS /verifier?sessionId=<id>` - WebSocket verification endpoint
+- `WS /proxy?token=<host>` - WebSocket proxy for TLS connections (compatible with notary.pse.dev)
+
+**Webhook Configuration:**
+Configure `packages/verifier/config.yaml` to receive POST notifications after successful verifications:
+```yaml
+webhooks:
+  "api.x.com":
+    url: "https://your-backend.example.com/webhook/twitter"
+    headers:
+      Authorization: "Bearer your-secret-token"
+  "*":  # Wildcard for unmatched server names
+    url: "https://your-backend.example.com/webhook/default"
+```
+
+### Package-Specific Development
+
+**Extension:**
+```bash
+cd packages/extension
+npm run dev              # Development mode
+npm run test             # Run tests
+npm run test:watch       # Watch mode
+npm run test:coverage    # Coverage report
+npm run lint             # Lint check
+npm run lint:fix         # Auto-fix linting issues
+```
+
+**Plugin SDK:**
+```bash
+cd packages/plugin-sdk
+npm run build            # Build SDK
+npm run test             # Run tests
+npm run lint             # Run all linters
+npm run lint:fix         # Auto-fix issues
+```
+
+> **Note:** The plugin-SDK builds automatically when the extension is built, so manual building is usually not necessary.
+
+**Verifier:**
+```bash
+cd packages/verifier
+cargo run                # Development mode
+cargo build --release    # Production build
+cargo test               # Run tests
+```
+
+## Production Build
+
+### Build Extension for Production
+
+From the repository root:
+
+```bash
+NODE_ENV=production npm run build
+```
+
+This automatically:
+1. Builds dependencies (`@tlsn/common` and `@tlsn/plugin-sdk`)
+2. Builds the extension with production optimizations
+3. Creates:
+   - Optimized build in `packages/extension/build/`
+   - Packaged extension in `packages/extension/zip/extension-{version}.zip`
+
+The zip file is ready for Chrome Web Store submission.
+
+**Alternative build commands:**
+- `npm run build:extension` - Build only the extension (assumes dependencies are built)
+- `npm run build:deps` - Build only the dependencies
+
+### Build All Packages
+
+```bash
+npm run build:all
+```
+
+This builds all packages in the monorepo (extension, plugin-sdk).
+
+### Build Verifier for Production
+
+```bash
+cd packages/verifier
+cargo build --release
+```
+
+The binary will be in `target/release/`.
+
+## End-to-End Testing
+
+To test the complete TLSN workflow:
+
+### 1. Start the Verifier Server
+
+In a terminal:
+```bash
+cd packages/verifier
+cargo run
+```
+
+Verify it's running:
+```bash
+curl http://localhost:7047/health
+# Should return: ok
+```
+
+### 2. Start the Extension in Development Mode
+
+In another terminal:
+```bash
+npm run dev
+```
+
+Load the extension in Chrome (see [Getting Started](#getting-started)).
+
+### 3. Open the Developer Console
+
+1. Right-click anywhere on any web page
+2. Select "Developer Console" from the context menu
+3. A new tab will open with the code editor
+
+### 4. Run a Test Plugin
+
+The Developer Console comes with a default X.com profile prover plugin. To test:
+
+1. Ensure the verifier is running on `localhost:7047`
+2. Review the default code in the editor (or modify as needed)
+3. Click "▶️ Run Code" button
+4. The plugin will:
+   - Open a new window to X.com
+   - Intercept requests
+   - Create a prover connection to the verifier
+   - Display a UI overlay showing progress
+   - Execute the proof workflow
+
+**Console Output:**
+- Execution status and timing
+- Plugin logs and results
+- Any errors encountered
+
+### 5. Verify Request Interception
+
+When a managed window is opened:
+1. An overlay appears showing "TLSN Plugin In Progress"
+2. Intercepted requests are listed in real-time
+3. Request count updates as more requests are captured
+
+### Testing Different Plugins
+
+You can write custom plugins in the Developer Console editor:
+
+```javascript
+// Example: Simple plugin that generates a proof
+const config = {
+  name: 'My Plugin',
+  description: 'A custom TLSN plugin'
+};
+
+async function onClick() {
+  console.log('Starting proof...');
+
+  // Wait for specific headers to be intercepted
+  const [header] = useHeaders(headers => {
+    return headers.filter(h => h.url.includes('example.com'));
+  });
+
+  console.log('Captured header:', header);
+
+  // Generate proof using unified prove() API
+  const proof = await prove(
+    // Request options
+    {
+      url: 'https://example.com/api/endpoint',
+      method: 'GET',
+      headers: {
+        'Authorization': header.requestHeaders.find(h => h.name === 'Authorization')?.value,
+        'Accept-Encoding': 'identity',
+        'Connection': 'close',
+      },
+    },
+    // Prover options
+    {
+      verifierUrl: 'http://localhost:7047',
+      proxyUrl: 'wss://notary.pse.dev/proxy?token=example.com',
+      maxRecvData: 16384,
+      maxSentData: 4096,
+      handlers: [
+        { type: 'SENT', part: 'START_LINE', action: 'REVEAL' },
+        { type: 'RECV', part: 'START_LINE', action: 'REVEAL' },
+        { type: 'RECV', part: 'BODY', action: 'REVEAL',
+          params: { type: 'json', path: 'username' } }
+      ]
+    }
+  );
+
+  console.log('Proof generated:', proof);
+  done(JSON.stringify(proof));
+}
+
+function main() {
+  const [header] = useHeaders(headers => {
+    return headers.filter(h => h.url.includes('example.com'));
+  });
+
+  // Open a managed window on first render
+  useEffect(() => {
+    openWindow('https://example.com');
+  }, []);
+
+  // Render plugin UI component
+  return div({}, [
+    div({}, [header ? 'Ready to prove' : 'Waiting for headers...']),
+    header ? button({ onclick: 'onClick' }, ['Generate Proof']) : null
+  ]);
+}
+
+export default {
+  main,
+  onClick,
+  config,
+};
+```
+
+### Testing Tips
+
+- **Monitor Background Service Worker**: Open Chrome DevTools for the background service worker via `chrome://extensions/` → Extension Details → "Inspect views: service worker"
+- **Check Console Logs**: Look for WindowManager logs, request interception logs, and message routing logs
+- **Test Multiple Windows**: Try opening multiple managed windows simultaneously (max 10)
+- **Verifier Connection**: Ensure verifier is accessible at `localhost:7047` before running proofs
+
+## Running the Demo
+
+The demo package provides a complete environment for testing TLSNotary plugins.
+
+### Quick Start with Docker
+
+```bash
+# Start all services (verifier + demo server)
+npm run docker:up
+
+# Stop services
+npm run docker:down
+```
+
+This starts:
+- Verifier server on port 7047
+- Demo static files served via nginx on port 80
+
+### Manual Demo Setup
+
+```bash
+# Serve demo files locally
+npm run demo
+
+# Open http://localhost:8080 in your browser
+```
+
+### Environment Variables
+
+Configure the demo for different environments:
+```bash
+# Local development (default)
+cd packages/demo
+./generate.sh && ./start.sh
+
+# Production with SSL
+cd packages/demo
+VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh
+./start.sh
+
+# Docker detached mode
+./generate.sh && ./start.sh -d
+```
+
+The demo uses two scripts:
+- **`generate.sh`** - Generates plugin files with configured verifier URLs (use environment variables here)
+- **`start.sh`** - Starts Docker Compose services (assumes `generated/` directory exists)
+
+### Tutorial
+
+```bash
+# Serve tutorial examples
+npm run tutorial
+
+# Open http://localhost:8080 in your browser
+```
+
+## Websockify Integration
+
+For WebSocket proxying of TLS connections (optional):
+
+### Build Websockify Docker Image
+```bash
+git clone https://github.com/novnc/websockify && cd websockify
+./docker/build.sh
+```
+
+### Run Websockify
+```bash
+# For X.com
+docker run -it --rm -p 55688:80 novnc/websockify 80 api.x.com:443
+
+# For Twitter
+docker run -it --rm -p 55688:80 novnc/websockify 80 api.twitter.com:443
+```
+
+This proxies HTTPS connections through WebSocket for browser-based TLS operations.
+
+## Publishing
+
+### Chrome Web Store
+
+1. Create a production build:
+```bash
+NODE_ENV=production npm run build
+```
+
+2. Test the extension thoroughly
+
+3. Upload `packages/extension/zip/extension-{version}.zip` to [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)
+
+4. Follow the [Chrome Web Store publishing guide](https://developer.chrome.com/webstore/publish)
+
+### Pre-built Extension
+
+The easiest way to install the TLSN browser extension is from the [Chrome Web Store](https://chromewebstore.google.com/detail/tlsn-extension/gcfkkledipjbgdbimfpijgbkhajiaaph).
+
+## Resources
+
+- [TLSNotary Documentation](https://docs.tlsnotary.org/)
+- [Webpack Documentation](https://webpack.js.org/concepts/)
+- [Chrome Extension Documentation](https://developer.chrome.com/docs/extensions/)
+- [Manifest V3 Migration Guide](https://developer.chrome.com/docs/extensions/mv3/intro/)
+- [webextension-polyfill](https://github.com/mozilla/webextension-polyfill)
 
 ## License
-This repository is licensed under either of
+
+This repository is licensed under either of:
 
 - [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)
 - [MIT license](http://opensource.org/licenses/MIT)
 
 at your option.
-
-
-## Installing and Running
-
-The easiest way to install the TLSN browser extension is to use the [Chrome Web Store](https://chromewebstore.google.com/detail/tlsn-extension/gcfkkledipjbgdbimfpijgbkhajiaaph).
-
-You can also build and run it locally as explained in the following steps.
-
-### Procedure:
-
-1. Check if your [Node.js](https://nodejs.org/) version is >= **18**.
-2. Clone this repository.
-3. Run `npm install` to install the dependencies.
-4. Run `npm run dev`
-5. Load your extension on Chrome following:
-   1. Access `chrome://extensions/`
-   2. Check `Developer mode`
-   3. Click on `Load unpacked extension`
-   4. Select the `build` folder.
-6. Happy hacking.
-
-## Building Websockify Docker Image
-```
-$ git clone https://github.com/novnc/websockify && cd websockify
-$ ./docker/build.sh
-$ docker run -it --rm -p 55688:80 novnc/websockify 80 api.x.com:443
-```
-
-## Running Websockify Docker Image
-```
-$ cd tlsn-extension
-$ docker run -it --rm -p 55688:80 novnc/websockify 80 api.twitter.com:443
-```
-
-## Packing
-
-After the development of your extension run the command
-
-```
-$ NODE_ENV=production npm run build
-```
-
-Now, the content of `build` folder will be the extension ready to be submitted to the Chrome Web Store. Just take a look at the [official guide](https://developer.chrome.com/webstore/publish) to more infos about publishing.
-
-## Resources:
-
-- [Webpack documentation](https://webpack.js.org/concepts/)
-- [Chrome Extension documentation](https://developer.chrome.com/extensions/getstarted)

package.json

@@ -1,97 +1,36 @@
 {
-  "name": "tlsn-extension",
-  "version": "0.1.0.1200",
+  "name": "tlsn-monorepo",
+  "version": "0.1.0-alpha.13",
+  "private": true,
+  "description": "TLSN Extension monorepo with plugin SDK",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/tlsnotary/tlsn-extension.git"
   },
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "clone:tlsn": "bash ./utils/download-tlsn.sh",
-    "build": "NODE_ENV=production node utils/build.js",
-    "build:webpack": "NODE_ENV=production webpack --config webpack.config.js",
-    "websockify": "docker run -it --rm -p 55688:80 -v $(pwd):/app novnc/websockify 80 --target-config /app/websockify_config",
-    "dev": "NODE_ENV=development node utils/webserver.js",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "dependencies": {
-    "@extism/extism": "^2.0.0-rc11",
-    "@fortawesome/fontawesome-free": "^6.4.2",
-    "async-mutex": "^0.4.0",
-    "buffer": "^6.0.3",
-    "charwise": "^3.0.1",
-    "classnames": "^2.3.2",
-    "comlink": "^4.4.1",
-    "copy-to-clipboard": "^3.3.3",
-    "dayjs": "^1.11.13",
-    "fast-deep-equal": "^3.1.3",
-    "fuse.js": "^6.6.2",
-    "http-parser-js": "^0.5.9",
-    "level": "^8.0.0",
-    "minimatch": "^9.0.4",
-    "node-cache": "^5.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
-    "redux": "^4.2.1",
-    "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.4.2",
-    "tailwindcss": "^3.3.3",
-    "tlsn-js": "0.1.0-alpha.12.0"
+    "build": "npm run build:deps && npm run build --workspace=extension",
+    "build:deps": "npm run build --workspace=@tlsn/common && npm run build --workspace=@tlsn/plugin-sdk",
+    "build:extension": "npm run build --workspace=extension",
+    "build:all": "npm run build --workspaces",
+    "dev": "npm run dev --workspace=extension",
+    "lint": "npm run build:deps && npm run lint --workspace=@tlsn/common --workspace=extension --workspace=@tlsn/plugin-sdk",
+    "lint:fix": "npm run build:deps && npm run lint:fix --workspace=@tlsn/common --workspace=extension --workspace=@tlsn/plugin-sdk",
+    "test": "npm run test --workspaces --if-present",
+    "serve:test": "npm run serve:test --workspace=extension",
+    "clean": "rm -rf packages/*/node_modules packages/*/dist packages/*/build node_modules",
+    "build:wasm": "sh packages/tlsn-wasm/build.sh v0.1.0-alpha.13 --no-logging",
+    "demo": "npm run dev --workspace=@tlsnotary/demo",
+    "tutorial": "serve -l 8080 packages/tutorial",
+    "docker:up": "cd packages/demo && ./start.sh -d",
+    "docker:down": "cd packages/demo && docker-compose down"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@types/chrome": "^0.0.202",
-    "@types/node": "^20.4.10",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/redux-logger": "^3.0.9",
-    "@types/webextension-polyfill": "^0.10.7",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.2",
-    "babel-preset-react-app": "^10.0.1",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.27.4",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.32.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^11.1.0",
-    "html-loader": "^4.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "postcss-loader": "^7.3.3",
-    "postcss-preset-env": "^9.1.1",
-    "prettier": "^3.0.2",
-    "react-refresh": "^0.14.0",
-    "react-refresh-typescript": "^2.0.7",
-    "sass": "^1.57.1",
-    "sass-loader": "^13.2.0",
-    "source-map-loader": "^3.0.1",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.6",
-    "ts-loader": "^9.4.2",
-    "type-fest": "^3.5.2",
-    "typescript": "^4.9.4",
-    "webextension-polyfill": "^0.10.0",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-ext-reloader": "^1.1.12",
-    "zip-webpack-plugin": "^4.0.1"
+    "typescript": "^5.5.4",
+    "vite": "^7.1.7",
+    "serve": "^14.2.4"
   }
-}
+}

packages/common/.eslintrc.json

@@ -0,0 +1,44 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.eslint.json"
+  },
+  "plugins": ["@typescript-eslint", "prettier"],
+  "rules": {
+    "no-console": "warn",
+    "no-debugger": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "prettier/prettier": "error"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.ts", "**/*.spec.ts"],
+      "rules": {
+        "@typescript-eslint/no-empty-function": "off",
+        "no-console": "off"
+      }
+    }
+  ],
+  "ignorePatterns": ["dist", "node_modules", "coverage"]
+}

packages/common/.gitignore

@@ -0,0 +1,28 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+*.tsbuildinfo
+
+# Test coverage
+coverage/
+.nyc_output/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+.DS_Store
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment
+.env
+.env.local
+.env.*.local

packages/common/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "bracketSameLine": false
+}

packages/common/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@tlsn/common",
+  "version": "1.0.0",
+  "description": "Shared utilities for TLSN packages",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:typescript",
+    "lint:eslint": "eslint . --ext .ts",
+    "lint:prettier": "prettier --check .",
+    "lint:typescript": "tsc --noEmit",
+    "lint:fix": "eslint . --ext .ts --fix && prettier --write ."
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^3.6.2",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
+  },
+  "dependencies": {
+    "happy-dom": "20.0.11",
+    "vite": "7.3.0",
+    "webpack-dev-server": "5.2.2"
+  }
+}

packages/common/src/index.ts

@@ -0,0 +1,10 @@
+// Logger exports
+export {
+  Logger,
+  logger,
+  LogLevel,
+  DEFAULT_LOG_LEVEL,
+  logLevelToName,
+  nameToLogLevel,
+  type LogLevelName,
+} from './logger/index.js';

packages/common/src/logger/LogLevel.ts

@@ -0,0 +1,56 @@
+/**
+ * Log level enum defining the severity hierarchy.
+ * Lower values are more verbose.
+ */
+export enum LogLevel {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3,
+}
+
+/**
+ * String names for log levels
+ */
+export type LogLevelName = 'DEBUG' | 'INFO' | 'WARN' | 'ERROR';
+
+/**
+ * Default log level (WARN - shows warnings and errors only)
+ */
+export const DEFAULT_LOG_LEVEL = LogLevel.WARN;
+
+/**
+ * Convert LogLevel enum to string name
+ */
+export function logLevelToName(level: LogLevel): LogLevelName {
+  switch (level) {
+    case LogLevel.DEBUG:
+      return 'DEBUG';
+    case LogLevel.INFO:
+      return 'INFO';
+    case LogLevel.WARN:
+      return 'WARN';
+    case LogLevel.ERROR:
+      return 'ERROR';
+    default:
+      return 'WARN';
+  }
+}
+
+/**
+ * Convert string name to LogLevel enum
+ */
+export function nameToLogLevel(name: string): LogLevel {
+  switch (name.toUpperCase()) {
+    case 'DEBUG':
+      return LogLevel.DEBUG;
+    case 'INFO':
+      return LogLevel.INFO;
+    case 'WARN':
+      return LogLevel.WARN;
+    case 'ERROR':
+      return LogLevel.ERROR;
+    default:
+      return DEFAULT_LOG_LEVEL;
+  }
+}

packages/common/src/logger/Logger.test.ts

@@ -0,0 +1,151 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { Logger, LogLevel, DEFAULT_LOG_LEVEL } from './index';
+
+describe('Logger', () => {
+  let logger: Logger;
+
+  beforeEach(() => {
+    // Create a fresh instance for each test by accessing private constructor
+    // We'll use getInstance and reset its state
+    logger = Logger.getInstance();
+    logger.init(DEFAULT_LOG_LEVEL);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('LogLevel', () => {
+    it('should have correct hierarchy values', () => {
+      expect(LogLevel.DEBUG).toBe(0);
+      expect(LogLevel.INFO).toBe(1);
+      expect(LogLevel.WARN).toBe(2);
+      expect(LogLevel.ERROR).toBe(3);
+    });
+
+    it('should have WARN as default level', () => {
+      expect(DEFAULT_LOG_LEVEL).toBe(LogLevel.WARN);
+    });
+  });
+
+  describe('init', () => {
+    it('should set the log level', () => {
+      logger.init(LogLevel.DEBUG);
+      expect(logger.getLevel()).toBe(LogLevel.DEBUG);
+    });
+
+    it('should mark logger as initialized', () => {
+      logger.init(LogLevel.INFO);
+      expect(logger.isInitialized()).toBe(true);
+    });
+  });
+
+  describe('setLevel', () => {
+    it('should update the log level', () => {
+      logger.init(LogLevel.WARN);
+      logger.setLevel(LogLevel.ERROR);
+      expect(logger.getLevel()).toBe(LogLevel.ERROR);
+    });
+  });
+
+  describe('log filtering', () => {
+    beforeEach(() => {
+      vi.spyOn(console, 'log').mockImplementation(() => {});
+      vi.spyOn(console, 'info').mockImplementation(() => {});
+      vi.spyOn(console, 'warn').mockImplementation(() => {});
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    it('should log all levels when set to DEBUG', () => {
+      logger.init(LogLevel.DEBUG);
+
+      logger.debug('debug message');
+      logger.info('info message');
+      logger.warn('warn message');
+      logger.error('error message');
+
+      expect(console.log).toHaveBeenCalledTimes(1);
+      expect(console.info).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledTimes(1);
+    });
+
+    it('should filter DEBUG when set to INFO', () => {
+      logger.init(LogLevel.INFO);
+
+      logger.debug('debug message');
+      logger.info('info message');
+      logger.warn('warn message');
+      logger.error('error message');
+
+      expect(console.log).not.toHaveBeenCalled();
+      expect(console.info).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledTimes(1);
+    });
+
+    it('should filter DEBUG and INFO when set to WARN (default)', () => {
+      logger.init(LogLevel.WARN);
+
+      logger.debug('debug message');
+      logger.info('info message');
+      logger.warn('warn message');
+      logger.error('error message');
+
+      expect(console.log).not.toHaveBeenCalled();
+      expect(console.info).not.toHaveBeenCalled();
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledTimes(1);
+    });
+
+    it('should only log ERROR when set to ERROR', () => {
+      logger.init(LogLevel.ERROR);
+
+      logger.debug('debug message');
+      logger.info('info message');
+      logger.warn('warn message');
+      logger.error('error message');
+
+      expect(console.log).not.toHaveBeenCalled();
+      expect(console.info).not.toHaveBeenCalled();
+      expect(console.warn).not.toHaveBeenCalled();
+      expect(console.error).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('log format', () => {
+    beforeEach(() => {
+      vi.spyOn(console, 'warn').mockImplementation(() => {});
+    });
+
+    it('should include timestamp and level prefix', () => {
+      logger.init(LogLevel.WARN);
+      logger.warn('test message');
+
+      expect(console.warn).toHaveBeenCalledWith(
+        expect.stringMatching(/^\[\d{2}:\d{2}:\d{2}\] \[WARN\]$/),
+        'test message',
+      );
+    });
+
+    it('should pass multiple arguments', () => {
+      logger.init(LogLevel.WARN);
+      logger.warn('message', { data: 123 }, 'extra');
+
+      expect(console.warn).toHaveBeenCalledWith(
+        expect.stringMatching(/^\[\d{2}:\d{2}:\d{2}\] \[WARN\]$/),
+        'message',
+        { data: 123 },
+        'extra',
+      );
+    });
+  });
+
+  describe('singleton', () => {
+    it('should return the same instance', () => {
+      const instance1 = Logger.getInstance();
+      const instance2 = Logger.getInstance();
+      expect(instance1).toBe(instance2);
+    });
+  });
+});

packages/common/src/logger/Logger.ts

@@ -0,0 +1,141 @@
+import { LogLevel, DEFAULT_LOG_LEVEL, logLevelToName } from './LogLevel.js';
+
+/**
+ * Centralized Logger class with configurable log levels.
+ * Pure TypeScript implementation with no browser API dependencies.
+ *
+ * Usage:
+ *   import { logger, LogLevel } from '@tlsn/common';
+ *   logger.init(LogLevel.DEBUG); // or logger.init(LogLevel.WARN)
+ *   logger.info('Application started');
+ */
+export class Logger {
+  private static instance: Logger;
+  private level: LogLevel = DEFAULT_LOG_LEVEL;
+  private initialized = false;
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private constructor() {}
+
+  /**
+   * Get the singleton Logger instance
+   */
+  static getInstance(): Logger {
+    if (!Logger.instance) {
+      Logger.instance = new Logger();
+    }
+    return Logger.instance;
+  }
+
+  /**
+   * Initialize the logger with a specific log level.
+   * Must be called before logging.
+   *
+   * @param level - The minimum log level to display
+   */
+  init(level: LogLevel): void {
+    this.level = level;
+    this.initialized = true;
+  }
+
+  /**
+   * Update the current log level
+   *
+   * @param level - The new minimum log level to display
+   */
+  setLevel(level: LogLevel): void {
+    this.level = level;
+  }
+
+  /**
+   * Get the current log level
+   */
+  getLevel(): LogLevel {
+    return this.level;
+  }
+
+  /**
+   * Check if the logger has been initialized
+   */
+  isInitialized(): boolean {
+    return this.initialized;
+  }
+
+  /**
+   * Format timestamp as HH:MM:SS
+   */
+  private formatTimestamp(): string {
+    const now = new Date();
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    const seconds = now.getSeconds().toString().padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+  }
+
+  /**
+   * Internal log method that checks level and formats output
+   */
+  private log(level: LogLevel, ...args: unknown[]): void {
+    // Auto-initialize with default level if not initialized
+    if (!this.initialized) {
+      this.init(DEFAULT_LOG_LEVEL);
+    }
+
+    // Only log if message level >= current log level
+    if (level < this.level) {
+      return;
+    }
+
+    const timestamp = this.formatTimestamp();
+    const levelName = logLevelToName(level);
+    const prefix = `[${timestamp}] [${levelName}]`;
+
+    switch (level) {
+      case LogLevel.DEBUG:
+        console.log(prefix, ...args);
+        break;
+      case LogLevel.INFO:
+        console.info(prefix, ...args);
+        break;
+      case LogLevel.WARN:
+        console.warn(prefix, ...args);
+        break;
+      case LogLevel.ERROR:
+        console.error(prefix, ...args);
+        break;
+    }
+  }
+
+  /**
+   * Log debug messages (most verbose)
+   */
+  debug(...args: unknown[]): void {
+    this.log(LogLevel.DEBUG, ...args);
+  }
+
+  /**
+   * Log informational messages
+   */
+  info(...args: unknown[]): void {
+    this.log(LogLevel.INFO, ...args);
+  }
+
+  /**
+   * Log warning messages
+   */
+  warn(...args: unknown[]): void {
+    this.log(LogLevel.WARN, ...args);
+  }
+
+  /**
+   * Log error messages (always shown unless level > ERROR)
+   */
+  error(...args: unknown[]): void {
+    this.log(LogLevel.ERROR, ...args);
+  }
+}
+
+/**
+ * Convenience export of the singleton logger instance
+ */
+export const logger = Logger.getInstance();

packages/common/src/logger/index.ts

@@ -0,0 +1,8 @@
+export { Logger, logger } from './Logger.js';
+export {
+  LogLevel,
+  DEFAULT_LOG_LEVEL,
+  logLevelToName,
+  nameToLogLevel,
+  type LogLevelName,
+} from './LogLevel.js';

packages/common/tsconfig.eslint.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+  "exclude": ["node_modules", "dist"]
+}

packages/common/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "lib": ["ES2020"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}

packages/demo/.env

@@ -0,0 +1,4 @@
+# Verifier Configuration
+VITE_VERIFIER_HOST=localhost:7047
+VITE_VERIFIER_PROTOCOL=http
+VITE_PROXY_PROTOCOL=ws

packages/demo/.env.production

@@ -0,0 +1,4 @@
+# Production environment variables
+VITE_VERIFIER_HOST=verifier.tlsnotary.org
+VITE_VERIFIER_PROTOCOL=https
+VITE_PROXY_PROTOCOL=wss

packages/demo/.gitignore

@@ -0,0 +1,3 @@
+*.wasm
+dist/
+public/plugins/

packages/demo/ADDING_PLUGINS.md

@@ -0,0 +1,52 @@
+# Adding New Plugins
+
+Adding new plugins to the demo is straightforward. Just update the `plugins.ts` file:
+
+## Example: Adding a GitHub Plugin
+
+```typescript
+// packages/demo/src/plugins.ts
+
+export const plugins: Record<string, Plugin> = {
+  // ... existing plugins ...
+  
+  github: {
+    name: 'GitHub Profile',
+    description: 'Prove your GitHub contributions and profile information',
+    logo: '🐙',  // or use emoji: '💻', '⚡', etc.
+    file: '/github.js',
+    parseResult: (json) => {
+      return json.results[json.results.length - 1].value;
+    },
+  },
+};
+```
+
+## Plugin Properties
+
+| Property      | Type     | Description                                             |
+| ------------- | -------- | ------------------------------------------------------- |
+| `name`        | string   | Display name shown in the card header                   |
+| `description` | string   | Brief description of what the plugin proves             |
+| `logo`        | string   | Emoji or character to display as the plugin icon        |
+| `file`        | string   | Path to the plugin JavaScript file                      |
+| `parseResult` | function | Function to extract the result from the plugin response |
+
+## Tips
+
+- **Logo**: Use emojis for visual appeal (🔒, 🎮, 📧, 💰, etc.)
+- **Description**: Keep it concise (1-2 lines) explaining what data is proven
+- **File**: Place the plugin JS file in `/packages/demo/` directory
+- **Name**: Use short, recognizable names
+
+## Card Display
+
+The plugin will automatically render as a card with:
+- Large logo at the top
+- Plugin name as heading
+- Description text below
+- "Run Plugin" button at the bottom
+- Hover effects and animations
+- Running state with spinner
+
+No additional UI code needed!

packages/demo/Dockerfile

@@ -0,0 +1,25 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+# Accept build arguments with defaults
+ARG VITE_VERIFIER_URL=http://localhost:7047
+ARG VITE_PROXY_URL=ws://localhost:7047/proxy?token=
+
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package.json ./
+RUN npm install
+
+# Copy source files
+COPY . .
+
+# Build with environment variables
+ENV VITE_VERIFIER_URL=${VITE_VERIFIER_URL}
+ENV VITE_PROXY_URL=${VITE_PROXY_URL}
+RUN npm run build
+
+# Runtime stage
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html

packages/demo/README.md

@@ -0,0 +1,104 @@
+This folder contains a basic demo for running TLSNotary plugins.
+The demo needs the TLSNotary extension to run the plugins in your browser.
+In this demo, the plugins prove data from a server (e.g. Twitter). Of course you will also need the verifier counterpart. In this demo we will use the verifier server from the `packages/verifier` folder.
+
+Prerequisites:
+* Chromium browser
+* internet connection
+
+To run this demo:
+1. Install the browser extension
+2. Launch the verification server
+3. A web socket proxy
+4. Launch the demo
+
+## 1. Install the browser extension
+
+### Install from the Google Web Store
+TODO
+
+### Build from source
+
+1. In this repository's main folder, run:
+    ```sh
+    npm ci
+    npm run build
+    ```
+    This builds the extension in the `packages/extension/build/` folder.
+2. Next load the extension in Chrome:
+   * Navigate to `chrome://extensions/`
+   * Enable **Developer mode** toggle (top right)
+   * Click **Load unpacked**
+   * Select the `packages/extension/build/` folder
+  The extension is now installed
+
+## 2. Launch the verifier server
+
+Launch the verifier server
+   ```sh
+    cd packages/verifier
+    cargo run --release
+   ```
+
+## 3. Websocket proxy
+In the TLSNotary protocol the prover connects directly to the server serving the data. The prover sets up a TCP connection and to the server this looks like any other connection. Unfortunately, browsers do not offer the functionally to let browser extensions setup TCP connections. A workaround is to connect to a websocket proxy that sets up the TCP connection instead.
+
+You can use the websocketproxy hosted by the TLSNotary team, or run your own proxy:
+* TLSNotary proxy: `wss://notary.pse.dev/proxy?token=host`,
+* Run a local proxy:
+  1. Install [wstcp](https://github.com/sile/wstcp):
+  ```shell
+  cargo install wstcp
+  ```
+  1. Run a websocket proxy for `https://<host>`:
+  ```shell
+  wstcp --bind-addr 127.0.0.1:55688 <host>:443
+  ```
+
+## 4. Launch the demo
+
+### Development with React
+
+This demo is built with React + TypeScript + Vite. To run it locally:
+
+```bash
+cd packages/demo
+npm install
+npm run dev
+```
+
+The demo will open at `http://localhost:3000` in your browser with the TLSNotary extension.
+
+### Docker Setup
+
+Run the demo with `npm run demo` from the repository root, or run it with docker using `npm run docker:up`.
+
+#### Manual Docker Setup
+
+If you want to run the scripts manually:
+
+```bash
+cd packages/demo
+npm run build  # Build the React app first
+./generate.sh && ./start.sh
+```
+
+The demo uses two scripts:
+- **`generate.sh`** - Generates plugin files with configured verifier URLs
+- **`start.sh`** - Starts Docker Compose services
+
+#### Environment Variables
+
+Configure for different environments:
+```bash
+# Local development (default)
+npm run build
+./generate.sh && ./start.sh
+
+# Production with SSL
+npm run build
+VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh
+./start.sh
+```
+
+You can now open the demo by opening http://localhost:8080 in your browser with the TLSNotary extension

packages/demo/build-plugins.js

@@ -0,0 +1,42 @@
+import { build } from 'vite';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const plugins = ['twitter', 'swissbank', 'spotify'];
+
+// Build each plugin separately as plain ES module
+for (const plugin of plugins) {
+    await build({
+        configFile: false,
+        build: {
+            lib: {
+                entry: path.resolve(__dirname, `src/plugins/${plugin}.plugin.ts`),
+                formats: ['es'],
+                fileName: () => `${plugin}.js`,
+            },
+            outDir: 'public/plugins',
+            emptyOutDir: false,
+            sourcemap: false,
+            minify: false,
+            rollupOptions: {
+                output: {
+                    exports: 'default',
+                },
+            },
+        },
+        define: {
+            VITE_VERIFIER_URL: JSON.stringify(
+                process.env.VITE_VERIFIER_URL || 'http://localhost:7047'
+            ),
+            VITE_PROXY_URL: JSON.stringify(
+                process.env.VITE_PROXY_URL || 'ws://localhost:7047/proxy?token='
+            ),
+        },
+    });
+    console.log(`✓ Built ${plugin}.js`);
+}
+
+console.log('✓ All plugins built successfully');

packages/demo/docker-compose.yml

@@ -0,0 +1,31 @@
+version: "3.8"
+
+services:
+  verifier:
+    build:
+      context: ../verifier
+      dockerfile: Dockerfile
+    ports:
+      - "7047:7047"
+    environment:
+      - RUST_LOG=info
+    restart: unless-stopped
+
+  demo-static:
+    build:
+      context: .
+      args:
+        VERIFIER_HOST: ${VERIFIER_HOST:-localhost:7047}
+        SSL: ${SSL:-false}
+    restart: unless-stopped
+
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "80:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
+    depends_on:
+      - verifier
+      - demo-static
+    restart: unless-stopped

packages/demo/generate.sh

@@ -0,0 +1,105 @@
+#!/bin/sh
+#
+# Demo Plugin File Generator
+#
+# This script generates plugin files with configurable verifier URLs.
+# Used both locally and in CI/CD pipelines.
+#
+# Environment Variables:
+#   VERIFIER_HOST - Verifier server host (default: localhost:7047)
+#   SSL           - Use https/wss if true (default: false)
+#
+# Usage:
+#   ./generate.sh                                    # Local development
+#   VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh  # Production
+
+set -e
+
+cd "$(dirname "$0")"
+
+# Configuration with defaults
+VERIFIER_HOST="${VERIFIER_HOST:-localhost:7047}"
+SSL="${SSL:-false}"
+
+# Determine protocol based on SSL setting
+if [ "$SSL" = "true" ]; then
+    HTTP_PROTOCOL="https"
+    WS_PROTOCOL="wss"
+else
+    HTTP_PROTOCOL="http"
+    WS_PROTOCOL="ws"
+fi
+
+VERIFIER_URL="${HTTP_PROTOCOL}://${VERIFIER_HOST}"
+PROXY_URL_BASE="${WS_PROTOCOL}://${VERIFIER_HOST}/proxy?token="
+
+echo "========================================"
+echo "TLSNotary Demo Plugin Generator"
+echo "========================================"
+echo "Verifier Host: $VERIFIER_HOST"
+echo "SSL Enabled:   $SSL"
+echo "Verifier URL:  $VERIFIER_URL"
+echo "Proxy URL:     ${PROXY_URL_BASE}<host>"
+echo "========================================"
+
+# Create generated directory for processed files
+mkdir -p generated
+
+# Function to process a plugin file
+process_plugin() {
+    local input_file="$1"
+    local output_file="generated/$(basename "$input_file")"
+
+    echo "Processing: $input_file -> $output_file"
+
+    # Replace verifierUrl and proxyUrl patterns
+    sed -E \
+        -e "s|verifierUrl: '[^']*'|verifierUrl: '${VERIFIER_URL}'|g" \
+        -e "s|verifierUrl: \"[^\"]*\"|verifierUrl: \"${VERIFIER_URL}\"|g" \
+        -e "s|proxyUrl: 'ws://[^/]+/proxy\?token=([^']+)'|proxyUrl: '${PROXY_URL_BASE}\1'|g" \
+        -e "s|proxyUrl: 'wss://[^/]+/proxy\?token=([^']+)'|proxyUrl: '${PROXY_URL_BASE}\1'|g" \
+        -e "s|proxyUrl: \"ws://[^/]+/proxy\?token=([^\"]+)\"|proxyUrl: \"${PROXY_URL_BASE}\1\"|g" \
+        -e "s|proxyUrl: \"wss://[^/]+/proxy\?token=([^\"]+)\"|proxyUrl: \"${PROXY_URL_BASE}\1\"|g" \
+        "$input_file" > "$output_file"
+}
+
+# Function to process index.html
+process_index_html() {
+    local input_file="$1"
+    local output_file="generated/$(basename "$input_file")"
+
+    echo "Processing: $input_file -> $output_file"
+
+    # Replace hardcoded health check URL with configured verifier URL
+    sed -E \
+        -e "s|http://localhost:7047/health|${VERIFIER_URL}/health|g" \
+        "$input_file" > "$output_file"
+}
+
+# Process index.html
+echo ""
+echo "Processing index.html..."
+process_index_html "index.html"
+
+# Copy other static files
+echo ""
+echo "Copying other static files..."
+cp favicon.ico generated/ 2>/dev/null || true
+
+# Process plugin files
+echo ""
+echo "Processing plugin files..."
+for plugin_file in *.js; do
+    if [ -f "$plugin_file" ]; then
+        process_plugin "$plugin_file"
+    fi
+done
+
+echo ""
+echo "Generated files:"
+ls -la generated/
+
+echo ""
+echo "========================================"
+echo "Generation complete!"
+echo "========================================"

packages/demo/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TLSNotary Plugin Demo</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

packages/demo/index.html.backup

@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>TLSNotary Plugin test page</title>
+  <style>
+    .result {
+      background: #e8f5e8;
+      border: 2px solid #28a745;
+      border-radius: 8px;
+      padding: 16px;
+      margin: 20px 0;
+      font-size: 18px;
+      display: inline-block;
+    }
+
+    .debug {
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+      padding: 12px;
+      margin: 20px 0;
+      font-family: 'Courier New', monospace;
+      font-size: 12px;
+      white-space: pre-wrap;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .plugin-buttons {
+      margin: 20px 0;
+    }
+
+    .plugin-buttons button {
+      margin-right: 10px;
+      padding: 10px 20px;
+      font-size: 16px;
+    }
+
+    .check-item {
+      margin: 10px 0;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+    }
+
+    .check-item.checking {
+      background: #f0f8ff;
+      border-color: #007bff;
+    }
+
+    .check-item.success {
+      background: #f0f8f0;
+      border-color: #28a745;
+    }
+
+    .check-item.error {
+      background: #fff0f0;
+      border-color: #dc3545;
+    }
+
+    .status {
+      font-weight: bold;
+      margin-left: 10px;
+    }
+
+    .status.checking {
+      color: #007bff;
+    }
+
+    .status.success {
+      color: #28a745;
+    }
+
+    .status.error {
+      color: #dc3545;
+    }
+
+    .warning-box {
+      background: #fff3cd;
+      border: 2px solid #ffc107;
+      border-radius: 8px;
+      padding: 16px;
+      margin: 20px 0;
+    }
+
+    .warning-box h3 {
+      margin-top: 0;
+      color: #856404;
+    }
+
+    .console-section {
+      margin: 20px 0;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      background: #1e1e1e;
+      overflow: hidden;
+    }
+
+    .console-header {
+      background: #2d2d2d;
+      color: #fff;
+      padding: 10px 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #3d3d3d;
+    }
+
+    .console-title {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .console-output {
+      max-height: 300px;
+      overflow-y: auto;
+      padding: 10px;
+      font-family: 'Courier New', monospace;
+      font-size: 12px;
+      color: #d4d4d4;
+    }
+
+    .console-entry {
+      margin: 4px 0;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .console-entry.info {
+      color: #4fc3f7;
+    }
+
+    .console-entry.success {
+      color: #4caf50;
+    }
+
+    .console-entry.error {
+      color: #f44336;
+    }
+
+    .console-entry.warning {
+      color: #ff9800;
+    }
+
+    .console-timestamp {
+      color: #888;
+      margin-right: 8px;
+    }
+
+    .console-message {
+      color: inherit;
+    }
+
+    .btn-console {
+      background: #007bff;
+      color: white;
+      border: none;
+      padding: 5px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .btn-console:hover {
+      background: #0056b3;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>TLSNotary Plugin Demo</h1>
+  <p>
+    This page demonstrates TLSNotary plugins. Choose a plugin to test below.
+  </p>
+
+  <!-- Browser compatibility warning -->
+  <div id="browser-warning" class="warning-box" style="display: none;">
+    <h3>⚠️ Browser Compatibility</h3>
+    <p><strong>Unsupported Browser Detected</strong></p>
+    <p>TLSNotary extension requires a Chrome-based browser (Chrome, Edge, Brave, etc.).</p>
+    <p>Please switch to a supported browser to continue.</p>
+  </div>
+
+  <!-- System checks -->
+  <div>
+    <strong>System Checks:</strong>
+    <div id="check-browser" class="check-item checking">
+      🌐 Browser: <span class="status checking">Checking...</span>
+    </div>
+    <div id="check-extension" class="check-item checking">
+      🔌 Extension: <span class="status checking">Checking...</span>
+    </div>
+    <div id="check-verifier" class="check-item checking">
+      ✅ Verifier: <span class="status checking">Checking...</span>
+      <div id="verifier-instructions" style="display: none; margin-top: 10px; font-size: 14px;">
+        <p>Start the verifier server:</p>
+        <code>cd packages/verifier; cargo run --release</code>
+        <button onclick="checkVerifier()" style="margin-left: 10px; padding: 5px 10px;">Check Again</button>
+      </div>
+    </div>
+  </div>
+
+  <div style="margin-top: 20px;">
+    <strong>Steps:</strong>
+    <ol>
+      <li>Click one of the plugin "Run" buttons below.</li>
+      <li>The plugin will open a new browser window with the target website.</li>
+      <li>Log in to the website if you are not already logged in.</li>
+      <li>A TLSNotary overlay will appear in the bottom right corner.</li>
+      <li>Click the <strong>Prove</strong> button in the overlay to start the proving process.</li>
+      <li>After successful proving, you can close the browser window and the results will appear on this page.</li>
+    </ol>
+  </div>
+  <div class="plugin-buttons" id="buttonContainer"></div>
+
+  <!-- Console Section -->
+  <div class="console-section">
+    <div class="console-header">
+      <div class="console-title">Console Output</div>
+      <div style="display: flex; gap: 10px;">
+        <button class="btn-console" onclick="openExtensionLogs()" style="background: #6c757d;">View Extension
+          Logs</button>
+        <button class="btn-console" onclick="clearConsole()">Clear</button>
+      </div>
+    </div>
+    <div class="console-output" id="consoleOutput">
+      <div class="console-entry info">
+        <span class="console-timestamp">[INFO]</span>
+        <span class="console-message">💡 TLSNotary proving logs will appear here in real-time. You can also view them in
+          the extension console by clicking "View Extension Logs" above.</span>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    console.log('Testing TLSNotary plugins...');
+
+    let allChecksPass = false;
+
+    // Console functionality
+    function addConsoleEntry(message, type = 'info') {
+      const consoleOutput = document.getElementById('consoleOutput');
+      const timestamp = new Date().toLocaleTimeString();
+
+      const entry = document.createElement('div');
+      entry.className = `console-entry ${type}`;
+
+      const timestampSpan = document.createElement('span');
+      timestampSpan.className = 'console-timestamp';
+      timestampSpan.textContent = `[${timestamp}]`;
+
+      const messageSpan = document.createElement('span');
+      messageSpan.className = 'console-message';
+      messageSpan.textContent = message;
+
+      entry.appendChild(timestampSpan);
+      entry.appendChild(messageSpan);
+      consoleOutput.appendChild(entry);
+
+      // Auto-scroll to bottom
+      consoleOutput.scrollTop = consoleOutput.scrollHeight;
+    }
+
+    function clearConsole() {
+      const consoleOutput = document.getElementById('consoleOutput');
+      consoleOutput.innerHTML = '';
+      addConsoleEntry('Console cleared', 'info');
+      // Re-add the tip
+      const tipEntry = document.createElement('div');
+      tipEntry.className = 'console-entry info';
+      tipEntry.innerHTML = '<span class="console-timestamp">[INFO]</span><span class="console-message">💡 TLSNotary proving logs will appear here in real-time.</span>';
+      consoleOutput.insertBefore(tipEntry, consoleOutput.firstChild);
+    }
+
+    function openExtensionLogs() {
+      // Open extensions page
+      window.open('chrome://extensions/', '_blank');
+      addConsoleEntry('Opening chrome://extensions/ - Find TLSNotary extension → click "service worker" → find "offscreen.html" → click "inspect"', 'info');
+    }
+
+    // Listen for logs from offscreen document
+    window.addEventListener('message', (event) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data?.type === 'TLSN_OFFSCREEN_LOG') {
+        addConsoleEntry(event.data.message, event.data.level);
+      }
+    });
+
+    // Initialize console with welcome message
+    window.addEventListener('load', () => {
+      addConsoleEntry('TLSNotary Plugin Demo initialized', 'success');
+    });
+
+    // Check browser compatibility
+    function checkBrowserCompatibility() {
+      const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+      const isEdge = /Edg/.test(navigator.userAgent);
+      const isBrave = navigator.brave && typeof navigator.brave.isBrave === 'function';
+      const isChromium = /Chromium/.test(navigator.userAgent);
+
+      const isChromeBasedBrowser = isChrome || isEdge || isBrave || isChromium;
+
+      const checkDiv = document.getElementById('check-browser');
+      const warningDiv = document.getElementById('browser-warning');
+      const statusSpan = checkDiv.querySelector('.status');
+
+      if (isChromeBasedBrowser) {
+        checkDiv.className = 'check-item success';
+        statusSpan.className = 'status success';
+        statusSpan.textContent = '✅ Chrome-based browser detected';
+        return true;
+      } else {
+        checkDiv.className = 'check-item error';
+        statusSpan.className = 'status error';
+        statusSpan.textContent = '❌ Unsupported browser';
+        warningDiv.style.display = 'block';
+        return false;
+      }
+    }
+
+    // Check extension
+    async function checkExtension() {
+      const checkDiv = document.getElementById('check-extension');
+      const statusSpan = checkDiv.querySelector('.status');
+
+      // Wait a bit for tlsn to load if page just loaded
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      if (typeof window.tlsn !== 'undefined') {
+        checkDiv.className = 'check-item success';
+        statusSpan.className = 'status success';
+        statusSpan.textContent = '✅ Extension installed';
+        return true;
+      } else {
+        checkDiv.className = 'check-item error';
+        statusSpan.className = 'status error';
+        statusSpan.innerHTML = '❌ Extension not found - <a href="chrome://extensions/" target="_blank">Install extension</a>';
+        return false;
+      }
+    }
+
+    // Check verifier server
+    async function checkVerifier() {
+      const checkDiv = document.getElementById('check-verifier');
+      const statusSpan = checkDiv.querySelector('.status');
+      const instructions = document.getElementById('verifier-instructions');
+
+      statusSpan.textContent = 'Checking...';
+      statusSpan.className = 'status checking';
+      checkDiv.className = 'check-item checking';
+
+      try {
+        const response = await fetch('http://localhost:7047/health');
+        if (response.ok && await response.text() === 'ok') {
+          checkDiv.className = 'check-item success';
+          statusSpan.className = 'status success';
+          statusSpan.textContent = '✅ Verifier running';
+          instructions.style.display = 'none';
+          return true;
+        } else {
+          throw new Error('Unexpected response');
+        }
+      } catch (error) {
+        checkDiv.className = 'check-item error';
+        statusSpan.className = 'status error';
+        statusSpan.textContent = '❌ Verifier not running';
+        instructions.style.display = 'block';
+        return false;
+      }
+    }
+
+    // Run all checks
+    async function runAllChecks() {
+      const browserOk = checkBrowserCompatibility();
+      if (!browserOk) {
+        allChecksPass = false;
+        return;
+      }
+
+      const extensionOk = await checkExtension();
+      const verifierOk = await checkVerifier();
+
+      allChecksPass = extensionOk && verifierOk;
+
+      updateButtonState();
+    }
+
+    // Update button state based on checks
+    function updateButtonState() {
+      const container = document.getElementById('buttonContainer');
+      const buttons = container.querySelectorAll('button');
+
+      buttons.forEach(button => {
+        button.disabled = !allChecksPass;
+        if (!allChecksPass) {
+          button.title = 'Please complete all system checks first';
+        } else {
+          button.title = '';
+        }
+      });
+    }
+
+    const plugins = {
+      twitter: {
+        name: 'Twitter profile Plugin',
+        file: 'twitter.js',
+        parseResult: (json) => {
+          return json.results[json.results.length - 1].value;
+        }
+      },
+      swissbank: {
+        name: 'Swiss Bank Plugin',
+        file: 'swissbank.js',
+        parseResult: (json) => {
+          return json.results[json.results.length - 1].value;
+        }
+      },
+      spotify: {
+        name: 'Spotify Plugin',
+        file: 'spotify.js',
+        parseResult: (json) => {
+          return json.results[json.results.length - 1].value;
+        }
+      }
+    };
+
+    async function runPlugin(pluginKey) {
+      const plugin = plugins[pluginKey];
+      const button = document.getElementById(`${pluginKey}Button`);
+
+      try {
+        addConsoleEntry(`🎬 Starting ${plugin.name} plugin...`, 'info');
+        console.log(`Running ${plugin.name} plugin...`);
+        button.disabled = true;
+        button.textContent = 'Running...';
+
+        const startTime = performance.now();
+        const pluginCode = await fetch(plugin.file).then(r => r.text());
+
+        addConsoleEntry('🔧 Executing plugin code...', 'info');
+        const result = await window.tlsn.execCode(pluginCode);
+        const executionTime = (performance.now() - startTime).toFixed(2);
+
+        const json = JSON.parse(result);
+
+        // Create result div
+        const resultDiv = document.createElement('div');
+        resultDiv.className = 'result';
+        resultDiv.innerHTML = plugin.parseResult(json);
+        document.body.appendChild(resultDiv);
+
+        // Create header
+        const header = document.createElement('h3');
+        header.textContent = `${plugin.name} Results:`;
+        document.body.appendChild(header);
+
+        // Create debug div
+        const debugDiv = document.createElement('div');
+        debugDiv.className = 'debug';
+        debugDiv.textContent = JSON.stringify(json.results, null, 2);
+        document.body.appendChild(debugDiv);
+
+        addConsoleEntry(`✅ ${plugin.name} completed successfully in ${executionTime}ms`, 'success');
+
+        // Remove the button after successful execution
+        button.remove();
+      } catch (err) {
+        console.error(err);
+
+        // Create error div
+        const errorDiv = document.createElement('pre');
+        errorDiv.style.color = 'red';
+        errorDiv.textContent = err.message;
+        document.body.appendChild(errorDiv);
+
+        button.textContent = `Run ${plugin.name}`;
+        button.disabled = false;
+      }
+    }
+
+    window.addEventListener('tlsn_loaded', () => {
+      console.log('TLSNotary client loaded, showing plugin buttons...');
+      const container = document.getElementById('buttonContainer');
+
+      Object.entries(plugins).forEach(([key, plugin]) => {
+        const button = document.createElement('button');
+        button.id = `${key}Button`;
+        button.textContent = `Run ${plugin.name}`;
+        button.onclick = () => runPlugin(key);
+        container.appendChild(button);
+      });
+
+      // Update button states after creating them
+      updateButtonState();
+    });
+
+    // Run checks on page load
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        runAllChecks();
+      }, 500);
+    });
+  </script>
+</body>
+
+</html>

packages/demo/nginx.conf

@@ -0,0 +1,48 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    # Verifier WebSocket endpoints
+    location /verifier {
+        proxy_pass http://verifier:7047;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_read_timeout 3600s;
+    }
+
+    location /proxy {
+        proxy_pass http://verifier:7047;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_read_timeout 3600s;
+    }
+
+    location /session {
+        proxy_pass http://verifier:7047;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_read_timeout 3600s;
+    }
+
+    location /health {
+        proxy_pass http://verifier:7047;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # Default: proxy to static demo server
+    location / {
+        proxy_pass http://demo-static:80;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}

packages/demo/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@tlsnotary/demo",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "npm run build:plugins && vite",
+        "build": "npm run build:plugins && vite build",
+        "build:plugins": "node build-plugins.js",
+        "preview": "vite preview",
+        "type-check": "tsc --noEmit"
+    },
+    "dependencies": {
+        "happy-dom": "20.0.11",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "webpack-dev-server": "5.2.2"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "typescript": "^5.3.3",
+        "vite": "^7.3.0"
+    }
+}

packages/demo/spotify.js

@@ -0,0 +1,215 @@
+const config = {
+    name: 'Spotify Top Artist',
+    description: 'This plugin will prove your top artist on Spotify.',
+};
+
+const api = 'api.spotify.com';
+const ui = 'https://developer.spotify.com/';
+const top_artist_path = '/v1/me/top/artists?time_range=medium_term&limit=1';
+
+
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+
+    const [header] = useHeaders(headers => {
+        return headers.filter(header => header.url.includes(`https://${api}`));
+    });
+
+    // console.log('Intercepted Spotify API request header:', header);
+
+    const headers = {
+        authorization: header.requestHeaders.find(header => header.name === 'Authorization')?.value,
+        Host: api,
+        'Accept-Encoding': 'identity',
+        Connection: 'close',
+    };
+
+    const resp = await prove(
+        // -------------------------------------------------------------------------
+        {
+            url: `https://${api}${top_artist_path}`,  // Target API endpoint
+            method: 'GET',                                        // HTTP method
+            headers: headers,                                     // Authentication headers
+        },
+        {
+            verifierUrl: 'http://localhost:7047',
+            proxyUrl: 'ws://localhost:7047/proxy?token=api.spotify.com',
+            maxRecvData: 2400,
+            maxSentData: 600,
+            handlers: [
+                { type: 'SENT', part: 'START_LINE', action: 'REVEAL', },
+                { type: 'RECV', part: 'START_LINE', action: 'REVEAL', },
+                {
+                    type: 'RECV', part: 'HEADERS', action: 'REVEAL', params: { key: 'date', },
+                },
+                {
+                    type: 'RECV', part: 'BODY', action: 'REVEAL', params: { type: 'json', path: 'items[0].name', },
+                    // type: 'RECV', part: 'BODY', action: 'REVEAL', params: { type: 'json', path: 'items[0].external_urls.spotify', },
+                },
+            ]
+        }
+    );
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+
+function main() {
+    const [header] = useHeaders(headers => headers.filter(h => h.url.includes(`https://${api}`)));
+    // const [header] = useHeaders(headers => { return headers.filter(headers => headers.url.includes('https://api.spotify.com')) });
+
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    useEffect(() => {
+        openWindow(ui);
+    }, []);
+
+    if (isMinimized) {
+        return div({
+            style: {
+                position: 'fixed',
+                bottom: '20px',
+                right: '20px',
+                width: '60px',
+                height: '60px',
+                borderRadius: '50%',
+                backgroundColor: '#1DB954',
+                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                zIndex: '999999',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                fontSize: '24px',
+                color: 'white',
+            },
+            onclick: 'expandUI',
+        }, ['🎵']);
+    }
+
+    return div({
+        style: {
+            position: 'fixed',
+            bottom: '0',
+            right: '8px',
+            width: '280px',
+            borderRadius: '8px 8px 0 0',
+            backgroundColor: 'white',
+            boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+            zIndex: '999999',
+            fontSize: '14px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            overflow: 'hidden',
+        },
+    }, [
+        div({
+            style: {
+                background: 'linear-gradient(135deg, #1DB954 0%, #1AA34A 100%)',
+                padding: '12px 16px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                color: 'white',
+            }
+        }, [
+            div({
+                style: {
+                    fontWeight: '600',
+                    fontSize: '16px',
+                }
+            }, ['Spotify Top Artist']),
+            button({
+                style: {
+                    background: 'transparent',
+                    border: 'none',
+                    color: 'white',
+                    fontSize: '20px',
+                    cursor: 'pointer',
+                    padding: '0',
+                    width: '24px',
+                    height: '24px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                onclick: 'minimizeUI',
+            }, ['−'])
+        ]),
+
+        div({
+            style: {
+                padding: '20px',
+                backgroundColor: '#f8f9fa',
+            }
+        }, [
+            div({
+                style: {
+                    marginBottom: '16px',
+                    padding: '12px',
+                    borderRadius: '6px',
+                    backgroundColor: header ? '#d4edda' : '#f8d7da',
+                    color: header ? '#155724' : '#721c24',
+                    border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                    fontWeight: '500',
+                },
+            }, [
+                header ? '✓ Api token detected' : '⚠ No API token detected'
+            ]),
+
+            // Conditional UI based on whether we have intercepted the headers
+            header ? (
+                // Show prove button when not pending
+                button({
+                    style: {
+                        width: '100%',
+                        padding: '12px 24px',
+                        borderRadius: '6px',
+                        border: 'none',
+                        background: 'linear-gradient(135deg, #1DB954 0%, #1AA34A 100%)',
+                        color: 'white',
+                        fontWeight: '600',
+                        fontSize: '15px',
+                        cursor: 'pointer',
+                        transition: 'all 0.2s ease',
+                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                        opacity: isRequestPending ? 0.5 : 1,
+                        cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                    },
+                    onclick: 'onClick',
+                }, [isRequestPending ? 'Generating Proof...' : 'Generate Proof'])
+            ) : (
+                // Show login message
+                div({
+                    style: {
+                        textAlign: 'center',
+                        color: '#666',
+                        padding: '12px',
+                        backgroundColor: '#fff3cd',
+                        borderRadius: '6px',
+                        border: '1px solid #ffeaa7',
+                    }
+                }, ['Please login to Spotify to continue'])
+            )
+        ])
+    ]);
+}
+
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/src/App.tsx

@@ -0,0 +1,285 @@
+import { useState, useEffect, useCallback } from 'react';
+import { SystemChecks } from './components/SystemChecks';
+import { ConsoleOutput } from './components/Console';
+import { PluginButtons } from './components/PluginButtons';
+import { StatusBar } from './components/StatusBar';
+import { CollapsibleSection } from './components/CollapsibleSection';
+import { HowItWorks } from './components/HowItWorks';
+import { WhyPlugins } from './components/WhyPlugins';
+import { BuildYourOwn } from './components/BuildYourOwn';
+import { plugins } from './plugins';
+import { checkBrowserCompatibility, checkExtension, checkVerifier, formatTimestamp } from './utils';
+import { ConsoleEntry, CheckStatus, PluginResult as PluginResultType } from './types';
+import './App.css';
+
+interface PluginResultData {
+    resultHtml: string;
+    debugJson: string;
+}
+
+export function App() {
+    const [consoleEntries, setConsoleEntries] = useState<ConsoleEntry[]>([
+        {
+            timestamp: formatTimestamp(),
+            message:
+                '💡 TLSNotary proving logs will appear here in real-time. You can also view them in the extension console by clicking "View Extension Logs" above.',
+            type: 'info',
+        },
+    ]);
+
+    const [browserCheck, setBrowserCheck] = useState<{ status: CheckStatus; message: string }>({
+        status: 'checking',
+        message: 'Checking...',
+    });
+
+    const [extensionCheck, setExtensionCheck] = useState<{ status: CheckStatus; message: string }>({
+        status: 'checking',
+        message: 'Checking...',
+    });
+
+    const [verifierCheck, setVerifierCheck] = useState<{
+        status: CheckStatus;
+        message: string;
+        showInstructions: boolean;
+    }>({
+        status: 'checking',
+        message: 'Checking...',
+        showInstructions: false,
+    });
+
+    const [showBrowserWarning, setShowBrowserWarning] = useState(false);
+    const [allChecksPass, setAllChecksPass] = useState(false);
+    const [runningPlugins, setRunningPlugins] = useState<Set<string>>(new Set());
+    const [pluginResults, setPluginResults] = useState<Record<string, PluginResultData>>({});
+    const [consoleExpanded, setConsoleExpanded] = useState(false);
+
+    const addConsoleEntry = useCallback((message: string, type: ConsoleEntry['type'] = 'info') => {
+        setConsoleEntries((prev) => [
+            ...prev,
+            {
+                timestamp: formatTimestamp(),
+                message,
+                type,
+            },
+        ]);
+    }, []);
+
+    const handleClearConsole = useCallback(() => {
+        setConsoleEntries([
+            {
+                timestamp: formatTimestamp(),
+                message: 'Console cleared',
+                type: 'info',
+            },
+            {
+                timestamp: formatTimestamp(),
+                message: '💡 TLSNotary proving logs will appear here in real-time.',
+                type: 'info',
+            },
+        ]);
+    }, []);
+
+    const handleOpenExtensionLogs = useCallback(() => {
+        window.open('chrome://extensions/', '_blank');
+        addConsoleEntry(
+            'Opening chrome://extensions/ - Find TLSNotary extension → click "service worker" → find "offscreen.html" → click "inspect"',
+            'info'
+        );
+    }, [addConsoleEntry]);
+
+    const runAllChecks = useCallback(async () => {
+        // Browser check
+        const browserOk = checkBrowserCompatibility();
+        if (browserOk) {
+            setBrowserCheck({ status: 'success', message: '✅ Chrome-based browser detected' });
+            setShowBrowserWarning(false);
+        } else {
+            setBrowserCheck({ status: 'error', message: '❌ Unsupported browser' });
+            setShowBrowserWarning(true);
+            setAllChecksPass(false);
+            return;
+        }
+
+        // Extension check
+        const extensionOk = await checkExtension();
+        if (extensionOk) {
+            setExtensionCheck({ status: 'success', message: '✅ Extension installed' });
+        } else {
+            setExtensionCheck({ status: 'error', message: '❌ Extension not found' });
+        }
+
+        // Verifier check
+        const verifierOk = await checkVerifier();
+        if (verifierOk) {
+            setVerifierCheck({ status: 'success', message: '✅ Verifier running', showInstructions: false });
+        } else {
+            setVerifierCheck({ status: 'error', message: '❌ Verifier not running', showInstructions: true });
+        }
+
+        setAllChecksPass(extensionOk && verifierOk);
+    }, []);
+
+    const handleRecheck = useCallback(async () => {
+        // Recheck extension
+        setExtensionCheck({ status: 'checking', message: 'Checking...' });
+        const extensionOk = await checkExtension();
+        if (extensionOk) {
+            setExtensionCheck({ status: 'success', message: '✅ Extension installed' });
+        } else {
+            setExtensionCheck({ status: 'error', message: '❌ Extension not found' });
+        }
+
+        // Recheck verifier
+        setVerifierCheck({ status: 'checking', message: 'Checking...', showInstructions: false });
+        const verifierOk = await checkVerifier();
+        if (verifierOk) {
+            setVerifierCheck({ status: 'success', message: '✅ Verifier running', showInstructions: false });
+        } else {
+            setVerifierCheck({ status: 'error', message: '❌ Verifier not running', showInstructions: true });
+        }
+
+        setAllChecksPass(extensionOk && verifierOk);
+    }, []);
+
+    const handleRunPlugin = useCallback(
+        async (pluginKey: string) => {
+            const plugin = plugins[pluginKey];
+            if (!plugin) return;
+
+            setRunningPlugins((prev) => new Set(prev).add(pluginKey));
+            setConsoleExpanded(true);
+
+            try {
+                const startTime = performance.now();
+                const pluginCode = await fetch(plugin.file).then((r) => r.text());
+
+                addConsoleEntry('🔧 Executing plugin code...', 'info');
+                const result = await window.tlsn!.execCode(pluginCode);
+                const executionTime = (performance.now() - startTime).toFixed(2);
+
+                const json: PluginResultType = JSON.parse(result);
+
+                setPluginResults((prev) => ({
+                    ...prev,
+                    [pluginKey]: {
+                        resultHtml: plugin.parseResult(json),
+                        debugJson: JSON.stringify(json.results, null, 2),
+                    },
+                }));
+
+                addConsoleEntry(`✅ ${plugin.name} completed successfully in ${executionTime}ms`, 'success');
+            } catch (err) {
+                console.error(err);
+                addConsoleEntry(`❌ Error: ${err instanceof Error ? err.message : String(err)}`, 'error');
+            } finally {
+                setRunningPlugins((prev) => {
+                    const newSet = new Set(prev);
+                    newSet.delete(pluginKey);
+                    return newSet;
+                });
+            }
+        },
+        [addConsoleEntry]
+    );
+
+    // Listen for tlsn_loaded event
+    useEffect(() => {
+        const handleTlsnLoaded = () => {
+            console.log('TLSNotary client loaded');
+            addConsoleEntry('TLSNotary client loaded', 'success');
+        };
+
+        window.addEventListener('tlsn_loaded', handleTlsnLoaded);
+        return () => window.removeEventListener('tlsn_loaded', handleTlsnLoaded);
+    }, [addConsoleEntry]);
+
+    // Listen for offscreen logs
+    useEffect(() => {
+        const handleMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return;
+
+            if (event.data?.type === 'TLSN_OFFSCREEN_LOG') {
+                addConsoleEntry(event.data.message, event.data.level);
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [addConsoleEntry]);
+
+    // Run checks on mount
+    useEffect(() => {
+        addConsoleEntry('TLSNotary Plugin Demo initialized', 'success');
+        setTimeout(() => {
+            runAllChecks();
+        }, 500);
+    }, [runAllChecks, addConsoleEntry]);
+
+    return (
+        <div className="app-container">
+            <div className="hero-section">
+                <h1 className="hero-title">TLSNotary Plugin Demo</h1>
+                <p className="hero-subtitle">
+                    zkTLS in action — secure, private data verification from any website
+                </p>
+            </div>
+
+            <HowItWorks />
+
+            <StatusBar
+                browserOk={browserCheck.status === 'success'}
+                extensionOk={extensionCheck.status === 'success'}
+                verifierOk={verifierCheck.status === 'success'}
+                onRecheck={handleRecheck}
+                detailsContent={
+                    <div className="checks-section">
+                        <div className="checks-title">System Status Details</div>
+                        <SystemChecks
+                            checks={{
+                                browser: browserCheck,
+                                extension: extensionCheck,
+                                verifier: verifierCheck,
+                            }}
+                            onRecheck={handleRecheck}
+                            showBrowserWarning={showBrowserWarning}
+                        />
+                    </div>
+                }
+            />
+
+            <div className="content-card">
+                <h2 className="section-title">Try It: Demo Plugins</h2>
+                <p className="section-subtitle">
+                    Run a plugin to see TLSNotary in action. Click "View Source" to see how each plugin works.
+                </p>
+
+                {!allChecksPass && (
+                    <div className="alert-box">
+                        <span className="alert-icon">ℹ️</span>
+                        <span>Complete system setup above to run plugins</span>
+                    </div>
+                )}
+
+                <PluginButtons
+                    plugins={plugins}
+                    runningPlugins={runningPlugins}
+                    pluginResults={pluginResults}
+                    allChecksPass={allChecksPass}
+                    onRunPlugin={handleRunPlugin}
+                />
+            </div>
+
+            <WhyPlugins />
+
+            <BuildYourOwn />
+
+            <CollapsibleSection title="Console Output" expanded={consoleExpanded}>
+                <ConsoleOutput
+                    entries={consoleEntries}
+                    onClear={handleClearConsole}
+                    onOpenExtensionLogs={handleOpenExtensionLogs}
+                />
+            </CollapsibleSection>
+        </div>
+    );
+}

packages/demo/src/components/BuildYourOwn.tsx

@@ -0,0 +1,62 @@
+export function BuildYourOwn() {
+    return (
+        <div className="build-your-own">
+            <div className="cta-content">
+                <h2 className="cta-title">Ready to Build Your Own Plugin?</h2>
+                <p className="cta-description">
+                    Create custom plugins to prove data from any website.
+                    Our SDK and documentation will help you get started in minutes.
+                </p>
+
+                <div className="cta-buttons">
+                    <a
+                        href="https://tlsnotary.org/docs/extension/plugins"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="cta-btn cta-btn-primary"
+                    >
+                        📚 Read the Docs
+                    </a>
+                    <a
+                        href="https://github.com/tlsnotary/tlsn-extension/tree/main/packages/demo/src/plugins"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="cta-btn cta-btn-secondary"
+                    >
+                        💻 View Plugin Sources
+                    </a>
+                </div>
+
+                <div className="cta-resources">
+                    <h4 className="cta-resources-title">Resources</h4>
+                    <ul className="cta-resources-list">
+                        <li>
+                            <a href="https://github.com/tlsnotary/tlsn-extension" target="_blank" rel="noopener noreferrer">
+                                GitHub Repository
+                                <span className="resource-desc">— Extension source code and examples</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://tlsnotary.org/docs/extension/plugins" target="_blank" rel="noopener noreferrer">
+                                TLSNotary Plugin Documentation
+                                <span className="resource-desc">— Complete protocol and API reference</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://tlsnotary.org" target="_blank" rel="noopener noreferrer">
+                                TLSNotary
+                                <span className="resource-desc">— TLSNotary landing page</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://discord.com/invite/9XwESXtcN7" target="_blank" rel="noopener noreferrer">
+                                Discord Community
+                                <span className="resource-desc">— Get help and share your plugins</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}

packages/demo/src/components/CollapsibleSection.tsx

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+
+interface CollapsibleSectionProps {
+    title: string;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    children: React.ReactNode;
+}
+
+export function CollapsibleSection({ title, defaultExpanded = false, expanded, children }: CollapsibleSectionProps) {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+    useEffect(() => {
+        if (expanded !== undefined) {
+            setIsExpanded(expanded);
+        }
+    }, [expanded]);
+
+    return (
+        <div className="collapsible-section">
+            <button className="collapsible-header" onClick={() => setIsExpanded(!isExpanded)}>
+                <span className="collapsible-icon">{isExpanded ? '▼' : '▶'}</span>
+                <span className="collapsible-title">{title}</span>
+            </button>
+            {isExpanded && <div className="collapsible-content">{children}</div>}
+        </div>
+    );
+}

packages/demo/src/components/Console.tsx

@@ -0,0 +1,45 @@
+
+
+interface ConsoleEntryProps {
+    timestamp: string;
+    message: string;
+    type: 'info' | 'success' | 'error' | 'warning';
+}
+
+export function ConsoleEntry({ timestamp, message, type }: ConsoleEntryProps) {
+    return (
+        <div className={`console-entry ${type}`}>
+            <span className="console-timestamp">[{timestamp}]</span>
+            <span className="console-message">{message}</span>
+        </div>
+    );
+}
+
+interface ConsoleOutputProps {
+    entries: ConsoleEntryProps[];
+    onClear: () => void;
+    onOpenExtensionLogs: () => void;
+}
+
+export function ConsoleOutput({ entries, onClear, onOpenExtensionLogs }: ConsoleOutputProps) {
+    return (
+        <div className="console-section">
+            <div className="console-header">
+                <div className="console-title">Console Output</div>
+                <div style={{ display: 'flex', gap: '10px' }}>
+                    <button className="btn-console" onClick={onOpenExtensionLogs} style={{ background: '#6c757d' }}>
+                        View Extension Logs
+                    </button>
+                    <button className="btn-console" onClick={onClear}>
+                        Clear
+                    </button>
+                </div>
+            </div>
+            <div className="console-output" id="consoleOutput">
+                {entries.map((entry, index) => (
+                    <ConsoleEntry key={index} {...entry} />
+                ))}
+            </div>
+        </div>
+    );
+}

packages/demo/src/components/HowItWorks.tsx

@@ -0,0 +1,51 @@
+export function HowItWorks() {
+    return (
+        <div className="how-it-works">
+            <h2 className="how-it-works-title">How It Works</h2>
+            <p className="how-it-works-subtitle">
+                Experience cryptographic proof generation in three simple steps
+            </p>
+
+            <div className="steps-container">
+                <div className="step">
+                    <div className="step-number">1</div>
+                    <div className="step-icon">🔌</div>
+                    <h3 className="step-title">Run a Plugin</h3>
+                    <p className="step-description">
+                        Select a plugin and click "Run". A new browser window opens to the target website.
+                    </p>
+                </div>
+
+                <div className="step-arrow">→</div>
+
+                <div className="step">
+                    <div className="step-number">2</div>
+                    <div className="step-icon">🔐</div>
+                    <h3 className="step-title">Create Proof</h3>
+                    <p className="step-description">
+                        Log in if needed, then click "Prove". TLSNotary creates a cryptographic proof of your data.
+                    </p>
+                </div>
+
+                <div className="step-arrow">→</div>
+
+                <div className="step">
+                    <div className="step-number">3</div>
+                    <div className="step-icon">✅</div>
+                    <h3 className="step-title">Verify Result</h3>
+                    <p className="step-description">
+                        The proof is verified by the server. Only the data you chose to reveal is shared.
+                    </p>
+                </div>
+            </div>
+
+            <div className="how-it-works-note">
+                <span className="note-icon">💡</span>
+                <span>
+                    <strong>Your data stays private:</strong> Plugins run inside the TLSNotary extension's secure sandbox.
+                    Data flows through your browser — never through third-party servers.
+                </span>
+            </div>
+        </div>
+    );
+}

packages/demo/src/components/PluginButtons.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { Plugin } from '../types';
+
+interface PluginResultData {
+    resultHtml: string;
+    debugJson: string;
+}
+
+interface PluginButtonsProps {
+    plugins: Record<string, Plugin>;
+    runningPlugins: Set<string>;
+    pluginResults: Record<string, PluginResultData>;
+    allChecksPass: boolean;
+    onRunPlugin: (pluginKey: string) => void;
+}
+
+export function PluginButtons({
+    plugins,
+    runningPlugins,
+    pluginResults,
+    allChecksPass,
+    onRunPlugin,
+}: PluginButtonsProps) {
+    const [expandedRawData, setExpandedRawData] = useState<Set<string>>(new Set());
+
+    const toggleRawData = (key: string) => {
+        setExpandedRawData((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(key)) {
+                newSet.delete(key);
+            } else {
+                newSet.add(key);
+            }
+            return newSet;
+        });
+    };
+
+    return (
+        <div className="plugin-grid">
+            {Object.entries(plugins).map(([key, plugin]) => {
+                const isRunning = runningPlugins.has(key);
+                const result = pluginResults[key];
+                const hasResult = !!result;
+
+                return (
+                    <div key={key} className={`plugin-card ${hasResult ? 'plugin-card--completed' : ''}`}>
+                        <div className="plugin-header">
+                            <div className="plugin-logo">{plugin.logo}</div>
+                            <div className="plugin-info">
+                                <h3 className="plugin-name">
+                                    {plugin.name}
+                                    {hasResult && <span className="plugin-badge">✓ Verified</span>}
+                                </h3>
+                                <p className="plugin-description">{plugin.description}</p>
+                            </div>
+                        </div>
+
+                        <div className="plugin-actions">
+                            <button
+                                className="plugin-run-btn"
+                                disabled={!allChecksPass || isRunning}
+                                onClick={() => onRunPlugin(key)}
+                                title={!allChecksPass ? 'Please complete all system checks first' : ''}
+                            >
+                                {isRunning ? (
+                                    <>
+                                        <span className="spinner"></span> Running...
+                                    </>
+                                ) : hasResult ? (
+                                    '↻ Run Again'
+                                ) : (
+                                    '▶ Run Plugin'
+                                )}
+                            </button>
+
+                            <a
+                                href={plugin.file}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="plugin-source-btn"
+                            >
+                                <span>📄 View Source</span>
+                            </a>
+                        </div>
+
+                        {hasResult && (
+                            <div className="plugin-result">
+                                <div className="plugin-result-header">
+                                    <span className="plugin-result-title">Result</span>
+                                </div>
+                                <div
+                                    className="plugin-result-content"
+                                    dangerouslySetInnerHTML={{ __html: result.resultHtml }}
+                                />
+                                <button
+                                    className="plugin-raw-toggle"
+                                    onClick={() => toggleRawData(key)}
+                                >
+                                    {expandedRawData.has(key) ? '▼ Hide Raw Data' : '▶ Show Raw Data'}
+                                </button>
+                                {expandedRawData.has(key) && (
+                                    <pre className="plugin-raw-data">{result.debugJson}</pre>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

packages/demo/src/components/StatusBar.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+
+interface StatusBarProps {
+    browserOk: boolean;
+    extensionOk: boolean;
+    verifierOk: boolean;
+    onRecheck: () => void;
+    detailsContent?: React.ReactNode;
+}
+
+export function StatusBar({
+    browserOk,
+    extensionOk,
+    verifierOk,
+    onRecheck,
+    detailsContent,
+}: StatusBarProps) {
+    const [showDetails, setShowDetails] = useState(false);
+    const allOk = browserOk && extensionOk && verifierOk;
+    const someIssues = !allOk;
+
+    return (
+        <div className={`status-bar ${allOk ? 'status-ready' : 'status-issues'}`}>
+            <div className="status-bar-content">
+                <div className="status-indicator">
+                    {allOk ? (
+                        <>
+                            <span className="status-icon">✓</span>
+                            <span className="status-text">System Ready</span>
+                        </>
+                    ) : (
+                        <>
+                            <span className="status-icon">⚠</span>
+                            <span className="status-text">Setup Required</span>
+                        </>
+                    )}
+                </div>
+
+                <div className="status-items">
+                    <div className={`status-badge ${browserOk ? 'ok' : 'error'}`}>
+                        Browser: {browserOk ? '✓' : '✗'}
+                    </div>
+                    <div className={`status-badge ${extensionOk ? 'ok' : 'error'}`}>
+                        Extension: {extensionOk ? '✓' : '✗'}
+                    </div>
+                    <div className={`status-badge ${verifierOk ? 'ok' : 'error'}`}>
+                        Verifier: {verifierOk ? '✓' : '✗'}
+                    </div>
+                </div>
+
+                <div className="status-actions">
+                    {!verifierOk && (
+                        <button className="btn-recheck" onClick={onRecheck}>
+                            Recheck
+                        </button>
+                    )}
+                    <button
+                        className={`btn-details ${showDetails ? 'expanded' : ''}`}
+                        onClick={() => setShowDetails(!showDetails)}
+                    >
+                        <span className="btn-details-icon">{showDetails ? '▼' : '▶'}</span>
+                        <span>Details</span>
+                    </button>
+                </div>
+            </div>
+
+            {
+                someIssues && (
+                    <div className="status-help">
+                        {!browserOk && <div>Please use a Chrome-based browser (Chrome, Edge, Brave)</div>}
+                        {!extensionOk && (
+                            <div>
+                                TLSNotary extension not detected.{' '}
+                                <a href="chrome://extensions/" target="_blank" rel="noopener noreferrer">
+                                    Install extension
+                                </a>
+                                {' '}then <strong>refresh this page</strong>.
+                            </div>
+                        )}
+                        {!verifierOk && (
+                            <div>
+                                Verifier server not running. Start it with: <code>cd packages/verifier; cargo run --release</code>
+                            </div>
+                        )}
+                    </div>
+                )
+            }
+
+            {
+                showDetails && detailsContent && (
+                    <div className="status-details-content">
+                        {detailsContent}
+                    </div>
+                )
+            }
+        </div >
+    );
+}

packages/demo/src/components/SystemChecks.tsx

@@ -0,0 +1,85 @@
+import { CheckStatus } from '../types';
+
+
+interface CheckItemProps {
+    id: string;
+    icon: string;
+    label: string;
+    status: CheckStatus;
+    message: string;
+    showInstructions?: boolean;
+    onRecheck?: () => void;
+}
+
+export function CheckItem({ icon, label, status, message, showInstructions, onRecheck }: CheckItemProps) {
+    return (
+        <div className={`check-item ${status}`}>
+            {icon} {label}: <span className={`status ${status}`}>{message}</span>
+            {showInstructions && (
+                <div style={{ marginTop: '10px', fontSize: '14px' }}>
+                    <p>Start the verifier server:</p>
+                    <code>cd packages/verifier; cargo run --release</code>
+                    {onRecheck && (
+                        <button onClick={onRecheck} style={{ marginLeft: '10px', padding: '5px 10px' }}>
+                            Check Again
+                        </button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface SystemChecksProps {
+    checks: {
+        browser: { status: CheckStatus; message: string };
+        extension: { status: CheckStatus; message: string };
+        verifier: { status: CheckStatus; message: string; showInstructions: boolean };
+    };
+    onRecheck: () => void;
+    showBrowserWarning: boolean;
+}
+
+export function SystemChecks({ checks, onRecheck, showBrowserWarning }: SystemChecksProps) {
+    return (
+        <>
+            {showBrowserWarning && (
+                <div className="warning-box">
+                    <h3>⚠️ Browser Compatibility</h3>
+                    <p>
+                        <strong>Unsupported Browser Detected</strong>
+                    </p>
+                    <p>TLSNotary extension requires a Chrome-based browser (Chrome, Edge, Brave, etc.).</p>
+                    <p>Please switch to a supported browser to continue.</p>
+                </div>
+            )}
+
+            <div>
+                <strong>System Checks:</strong>
+                <CheckItem
+                    id="check-browser"
+                    icon="🌐"
+                    label="Browser"
+                    status={checks.browser.status}
+                    message={checks.browser.message}
+                />
+                <CheckItem
+                    id="check-extension"
+                    icon="🔌"
+                    label="Extension"
+                    status={checks.extension.status}
+                    message={checks.extension.message}
+                />
+                <CheckItem
+                    id="check-verifier"
+                    icon="✅"
+                    label="Verifier"
+                    status={checks.verifier.status}
+                    message={checks.verifier.message}
+                    showInstructions={checks.verifier.showInstructions}
+                    onRecheck={onRecheck}
+                />
+            </div>
+        </>
+    );
+}

packages/demo/src/components/WhyPlugins.tsx

@@ -0,0 +1,39 @@
+export function WhyPlugins() {
+    return (
+        <div className="why-plugins">
+            <h2 className="why-plugins-title">Why Plugins?</h2>
+            <p className="why-plugins-subtitle">
+                TLSNotary plugins provide a secure, flexible way to prove and verify web data
+            </p>
+
+            <div className="benefits-grid">
+                <div className="benefit-card">
+                    <div className="benefit-icon">🔒</div>
+                    <h3 className="benefit-title">Secure by Design</h3>
+                    <p className="benefit-description">
+                        Plugins run inside the TLSNotary extension's sandboxed environment.
+                        Your credentials and sensitive data never leave your browser.
+                    </p>
+                </div>
+
+                <div className="benefit-card">
+                    <div className="benefit-icon">👤</div>
+                    <h3 className="benefit-title">User-Controlled</h3>
+                    <p className="benefit-description">
+                        Data flows through the user's browser — not third-party servers.
+                        You choose exactly what data to reveal in each proof.
+                    </p>
+                </div>
+
+                <div className="benefit-card">
+                    <div className="benefit-icon">⚡</div>
+                    <h3 className="benefit-title">Easy to Build</h3>
+                    <p className="benefit-description">
+                        Write plugins in JavaScript with a simple API.
+                        Intercept requests, create proofs, and build custom UIs with minimal code.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

packages/demo/src/config.ts

@@ -0,0 +1,11 @@
+// Environment configuration helper
+// Reads from Vite's import.meta.env (populated from .env files)
+
+const VERIFIER_HOST = (import.meta as any).env.VITE_VERIFIER_HOST || 'localhost:7047';
+const VERIFIER_PROTOCOL = (import.meta as any).env.VITE_VERIFIER_PROTOCOL || 'http';
+const PROXY_PROTOCOL = (import.meta as any).env.VITE_PROXY_PROTOCOL || 'ws';
+
+export const config = {
+    verifierUrl: `${VERIFIER_PROTOCOL}://${VERIFIER_HOST}`,
+    getProxyUrl: (host: string) => `${PROXY_PROTOCOL}://${VERIFIER_HOST}/proxy?token=${host}`,
+};

packages/demo/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);

packages/demo/src/plugins.ts

@@ -0,0 +1,31 @@
+import { Plugin } from './types';
+
+export const plugins: Record<string, Plugin> = {
+    twitter: {
+        name: 'Twitter Profile',
+        description: 'Prove your Twitter profile information with cryptographic verification',
+        logo: '𝕏',
+        file: '/plugins/twitter.js',
+        parseResult: (json) => {
+            return json.results[json.results.length - 1].value;
+        },
+    },
+    swissbank: {
+        name: 'Swiss Bank',
+        description: 'Verify your Swiss bank account balance securely and privately. (Login: admin / admin)',
+        logo: '🏦',
+        file: '/plugins/swissbank.js',
+        parseResult: (json) => {
+            return json.results[json.results.length - 1].value;
+        },
+    },
+    spotify: {
+        name: 'Spotify',
+        description: 'Prove your Spotify listening history and music preferences',
+        logo: '🎵',
+        file: '/plugins/spotify.js',
+        parseResult: (json) => {
+            return json.results[json.results.length - 1].value;
+        },
+    },
+};

packages/demo/src/plugins/spotify.plugin.ts

@@ -0,0 +1,224 @@
+/// <reference types="@tlsn/plugin-sdk/src/globals" />
+
+// @ts-ignore - These will be replaced at build time by Vite's define option
+const VERIFIER_URL = VITE_VERIFIER_URL;
+// @ts-ignore
+const PROXY_URL_BASE = VITE_PROXY_URL;
+
+const api = 'api.spotify.com';
+const ui = 'https://developer.spotify.com/';
+const top_artist_path = '/v1/me/top/artists?time_range=medium_term&limit=1';
+
+const config = {
+    name: 'Spotify Top Artist',
+    description: 'This plugin will prove your top artist on Spotify.',
+    requests: [
+        {
+            method: 'GET',
+            host: 'api.spotify.com',
+            pathname: '/v1/me/top/artists',
+            verifierUrl: VERIFIER_URL,
+        },
+    ],
+    urls: [
+        'https://developer.spotify.com/*',
+    ],
+};
+
+
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+
+    const [header] = useHeaders(headers => {
+        return headers.filter(header => header.url.includes(`https://${api}`));
+    });
+
+    const headers = {
+        authorization: header.requestHeaders.find(header => header.name === 'Authorization')?.value,
+        Host: api,
+        'Accept-Encoding': 'identity',
+        Connection: 'close',
+    };
+
+    const resp = await prove(
+        {
+            url: `https://${api}${top_artist_path}`,
+            method: 'GET',
+            headers: headers,
+        },
+        {
+            verifierUrl: VERIFIER_URL,
+            proxyUrl: PROXY_URL_BASE + api,
+            maxRecvData: 2400,
+            maxSentData: 600,
+            handlers: [
+                { type: 'SENT', part: 'START_LINE', action: 'REVEAL', },
+                { type: 'RECV', part: 'START_LINE', action: 'REVEAL', },
+                {
+                    type: 'RECV', part: 'HEADERS', action: 'REVEAL', params: { key: 'date', },
+                },
+                {
+                    type: 'RECV', part: 'BODY', action: 'REVEAL', params: { type: 'json', path: 'items[0].name', },
+                },
+            ]
+        }
+    );
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+
+function main() {
+    const [header] = useHeaders(headers => headers.filter(h => h.url.includes(`https://${api}`)));
+
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    useEffect(() => {
+        openWindow(ui);
+    }, []);
+
+    if (isMinimized) {
+        return div({
+            style: {
+                position: 'fixed',
+                bottom: '20px',
+                right: '20px',
+                width: '60px',
+                height: '60px',
+                borderRadius: '50%',
+                backgroundColor: '#1DB954',
+                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                zIndex: '999999',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                fontSize: '24px',
+                color: 'white',
+            },
+            onclick: 'expandUI',
+        }, ['🎵']);
+    }
+
+    return div({
+        style: {
+            position: 'fixed',
+            bottom: '0',
+            right: '8px',
+            width: '280px',
+            borderRadius: '8px 8px 0 0',
+            backgroundColor: 'white',
+            boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+            zIndex: '999999',
+            fontSize: '14px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            overflow: 'hidden',
+        },
+    }, [
+        div({
+            style: {
+                background: 'linear-gradient(135deg, #1DB954 0%, #1AA34A 100%)',
+                padding: '12px 16px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                color: 'white',
+            }
+        }, [
+            div({
+                style: {
+                    fontWeight: '600',
+                    fontSize: '16px',
+                }
+            }, ['Spotify Top Artist']),
+            button({
+                style: {
+                    background: 'transparent',
+                    border: 'none',
+                    color: 'white',
+                    fontSize: '20px',
+                    cursor: 'pointer',
+                    padding: '0',
+                    width: '24px',
+                    height: '24px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                onclick: 'minimizeUI',
+            }, ['−'])
+        ]),
+
+        div({
+            style: {
+                padding: '20px',
+                backgroundColor: '#f8f9fa',
+            }
+        }, [
+            div({
+                style: {
+                    marginBottom: '16px',
+                    padding: '12px',
+                    borderRadius: '6px',
+                    backgroundColor: header ? '#d4edda' : '#f8d7da',
+                    color: header ? '#155724' : '#721c24',
+                    border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                    fontWeight: '500',
+                },
+            }, [
+                header ? '✓ Api token detected' : '⚠ No API token detected'
+            ]),
+
+            header ? (
+                button({
+                    style: {
+                        width: '100%',
+                        padding: '12px 24px',
+                        borderRadius: '6px',
+                        border: 'none',
+                        background: 'linear-gradient(135deg, #1DB954 0%, #1AA34A 100%)',
+                        color: 'white',
+                        fontWeight: '600',
+                        fontSize: '15px',
+                        transition: 'all 0.2s ease',
+                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                        opacity: isRequestPending ? 0.5 : 1,
+                        cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                    },
+                    onclick: 'onClick',
+                }, [isRequestPending ? 'Generating Proof...' : 'Generate Proof'])
+            ) : (
+                div({
+                    style: {
+                        textAlign: 'center',
+                        color: '#666',
+                        padding: '12px',
+                        backgroundColor: '#fff3cd',
+                        borderRadius: '6px',
+                        border: '1px solid #ffeaa7',
+                    }
+                }, ['Please login to Spotify to continue'])
+            )
+        ])
+    ]);
+}
+
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/src/plugins/swissbank.plugin.ts

@@ -0,0 +1,257 @@
+/// <reference types="@tlsn/plugin-sdk/src/globals" />
+
+// Environment variables injected at build time
+// @ts-ignore - These will be replaced at build time by Vite's define option
+const VERIFIER_URL = VITE_VERIFIER_URL;
+// @ts-ignore
+const PROXY_URL_BASE = VITE_PROXY_URL;
+
+const config = {
+    name: 'Swiss Bank Prover',
+    description: 'This plugin will prove your Swiss Bank account balance.',
+    requests: [
+        {
+            method: 'GET',
+            host: 'swissbank.tlsnotary.org',
+            pathname: '/balances',
+            verifierUrl: VERIFIER_URL,
+        },
+    ],
+    urls: [
+        'https://swissbank.tlsnotary.org/*',
+    ],
+};
+
+const host = 'swissbank.tlsnotary.org';
+const ui_path = '/account';
+const path = '/balances';
+const url = `https://${host}${path}`;
+
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+    const [header] = useHeaders((headers: any[]) => {
+        console.log('Intercepted headers:', headers);
+        return headers.filter(header => header.url.includes(`https://${host}`));
+    });
+
+    const headers = {
+        'cookie': header.requestHeaders.find((header: any) => header.name === 'Cookie')?.value,
+        Host: host,
+        'Accept-Encoding': 'identity',
+        Connection: 'close',
+    };
+
+    const resp = await prove(
+        {
+            url: url,
+            method: 'GET',
+            headers: headers,
+        },
+        {
+            verifierUrl: VERIFIER_URL,
+            proxyUrl: PROXY_URL_BASE + 'swissbank.tlsnotary.org',
+            maxRecvData: 460,
+            maxSentData: 180,
+            handlers: [
+                { type: 'SENT', part: 'START_LINE', action: 'REVEAL' },
+                { type: 'RECV', part: 'START_LINE', action: 'REVEAL' },
+                {
+                    type: 'RECV',
+                    part: 'BODY',
+                    action: 'REVEAL',
+                    params: { type: 'json', path: 'account_id' },
+                },
+                {
+                    type: 'RECV',
+                    part: 'BODY',
+                    action: 'REVEAL',
+                    params: { type: 'json', path: 'accounts.CHF' },
+                },
+            ],
+        }
+    );
+
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+
+function main() {
+    const [header] = useHeaders((headers: any[]) =>
+        headers.filter(header => header.url.includes(`https://${host}${ui_path}`))
+    );
+
+    const hasNecessaryHeader = header?.requestHeaders.some((h: any) => h.name === 'Cookie');
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    useEffect(() => {
+        openWindow(`https://${host}${ui_path}`);
+    }, []);
+
+    if (isMinimized) {
+        return div(
+            {
+                style: {
+                    position: 'fixed',
+                    bottom: '20px',
+                    right: '20px',
+                    width: '60px',
+                    height: '60px',
+                    borderRadius: '50%',
+                    backgroundColor: '#4CAF50',
+                    boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                    zIndex: '999999',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    transition: 'all 0.3s ease',
+                    fontSize: '24px',
+                    color: 'white',
+                },
+                onclick: 'expandUI',
+            },
+            ['🔐']
+        );
+    }
+
+    return div(
+        {
+            style: {
+                position: 'fixed',
+                bottom: '0',
+                right: '8px',
+                width: '280px',
+                borderRadius: '8px 8px 0 0',
+                backgroundColor: 'white',
+                boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+                zIndex: '999999',
+                fontSize: '14px',
+                fontFamily:
+                    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+                overflow: 'hidden',
+            },
+        },
+        [
+            div(
+                {
+                    style: {
+                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                        padding: '12px 16px',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        color: 'white',
+                    },
+                },
+                [
+                    div(
+                        {
+                            style: {
+                                fontWeight: '600',
+                                fontSize: '16px',
+                            },
+                        },
+                        ['Swiss Bank Prover']
+                    ),
+                    button(
+                        {
+                            style: {
+                                background: 'transparent',
+                                border: 'none',
+                                color: 'white',
+                                fontSize: '20px',
+                                cursor: 'pointer',
+                                padding: '0',
+                                width: '24px',
+                                height: '24px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            },
+                            onclick: 'minimizeUI',
+                        },
+                        ['−']
+                    ),
+                ]
+            ),
+            div(
+                {
+                    style: {
+                        padding: '20px',
+                        backgroundColor: '#f8f9fa',
+                    },
+                },
+                [
+                    div(
+                        {
+                            style: {
+                                marginBottom: '16px',
+                                padding: '12px',
+                                borderRadius: '6px',
+                                backgroundColor: header ? '#d4edda' : '#f8d7da',
+                                color: header ? '#155724' : '#721c24',
+                                border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                                fontWeight: '500',
+                            },
+                        },
+                        [hasNecessaryHeader ? '✓ Cookie detected' : '⚠ No Cookie detected']
+                    ),
+                    hasNecessaryHeader
+                        ? button(
+                            {
+                                style: {
+                                    width: '100%',
+                                    padding: '12px 24px',
+                                    borderRadius: '6px',
+                                    border: 'none',
+                                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                                    color: 'white',
+                                    fontWeight: '600',
+                                    fontSize: '15px',
+                                    transition: 'all 0.2s ease',
+                                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                                    opacity: isRequestPending ? 0.5 : 1,
+                                    cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                                },
+                                onclick: 'onClick',
+                            },
+                            [isRequestPending ? 'Generating Proof...' : 'Generate Proof']
+                        )
+                        : div(
+                            {
+                                style: {
+                                    textAlign: 'center',
+                                    color: '#666',
+                                    padding: '12px',
+                                    backgroundColor: '#fff3cd',
+                                    borderRadius: '6px',
+                                    border: '1px solid #ffeaa7',
+                                },
+                            },
+                            ['Please login to continue']
+                        ),
+                ]
+            ),
+        ]
+    );
+}
+
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/src/plugins/twitter.plugin.ts

@@ -0,0 +1,278 @@
+/// <reference types="@tlsn/plugin-sdk/src/globals" />
+
+// Environment variables injected at build time
+// @ts-ignore - These will be replaced at build time by Vite's define option
+const VERIFIER_URL = VITE_VERIFIER_URL;
+// @ts-ignore
+const PROXY_URL_BASE = VITE_PROXY_URL;
+
+// =============================================================================
+// PLUGIN CONFIGURATION
+// =============================================================================
+/**
+ * The config object defines plugin metadata displayed to users.
+ * This information appears in the plugin selection UI.
+ */
+const config = {
+    name: 'X Profile Prover',
+    description: 'This plugin will prove your X.com profile.',
+    requests: [
+        {
+            method: 'GET',
+            host: 'api.x.com',
+            pathname: '/1.1/account/settings.json',
+            verifierUrl: VERIFIER_URL,
+        },
+    ],
+    urls: [
+        'https://x.com/*',
+    ],
+};
+
+
+// =============================================================================
+// PROOF GENERATION CALLBACK
+// =============================================================================
+/**
+ * This function is triggered when the user clicks the "Prove" button.
+ * It extracts authentication headers from intercepted requests and generates
+ * a TLSNotary proof using the unified prove() API.
+ */
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+
+    const [header] = useHeaders((headers: any[]) => {
+        return headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'));
+    });
+
+    const headers = {
+        'cookie': header.requestHeaders.find((header: any) => header.name === 'Cookie')?.value,
+        'x-csrf-token': header.requestHeaders.find((header: any) => header.name === 'x-csrf-token')?.value,
+        'x-client-transaction-id': header.requestHeaders.find((header: any) => header.name === 'x-client-transaction-id')?.value,
+        Host: 'api.x.com',
+        authorization: header.requestHeaders.find((header: any) => header.name === 'authorization')?.value,
+        'Accept-Encoding': 'identity',
+        Connection: 'close',
+    };
+
+    const resp = await prove(
+        {
+            url: 'https://api.x.com/1.1/account/settings.json',
+            method: 'GET',
+            headers: headers,
+        },
+        {
+            verifierUrl: VERIFIER_URL,
+            proxyUrl: PROXY_URL_BASE + 'api.x.com',
+            maxRecvData: 4000,
+            maxSentData: 2000,
+            handlers: [
+                { type: 'SENT', part: 'START_LINE', action: 'REVEAL' },
+                { type: 'RECV', part: 'START_LINE', action: 'REVEAL' },
+                {
+                    type: 'RECV',
+                    part: 'HEADERS',
+                    action: 'REVEAL',
+                    params: { key: 'date' },
+                },
+                {
+                    type: 'RECV',
+                    part: 'BODY',
+                    action: 'REVEAL',
+                    params: {
+                        type: 'json',
+                        path: 'screen_name',
+                    },
+                },
+            ],
+        }
+    );
+
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+
+// =============================================================================
+// MAIN UI FUNCTION
+// =============================================================================
+function main() {
+    const [header] = useHeaders((headers: any[]) =>
+        headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'))
+    );
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    useEffect(() => {
+        openWindow('https://x.com');
+    }, []);
+
+    if (isMinimized) {
+        return div(
+            {
+                style: {
+                    position: 'fixed',
+                    bottom: '20px',
+                    right: '20px',
+                    width: '60px',
+                    height: '60px',
+                    borderRadius: '50%',
+                    backgroundColor: '#4CAF50',
+                    boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                    zIndex: '999999',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    transition: 'all 0.3s ease',
+                    fontSize: '24px',
+                    color: 'white',
+                },
+                onclick: 'expandUI',
+            },
+            ['🔐']
+        );
+    }
+
+    return div(
+        {
+            style: {
+                position: 'fixed',
+                bottom: '0',
+                right: '8px',
+                width: '280px',
+                borderRadius: '8px 8px 0 0',
+                backgroundColor: 'white',
+                boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+                zIndex: '999999',
+                fontSize: '14px',
+                fontFamily:
+                    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+                overflow: 'hidden',
+            },
+        },
+        [
+            div(
+                {
+                    style: {
+                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                        padding: '12px 16px',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        color: 'white',
+                    },
+                },
+                [
+                    div(
+                        {
+                            style: {
+                                fontWeight: '600',
+                                fontSize: '16px',
+                            },
+                        },
+                        ['X Profile Prover']
+                    ),
+                    button(
+                        {
+                            style: {
+                                background: 'transparent',
+                                border: 'none',
+                                color: 'white',
+                                fontSize: '20px',
+                                cursor: 'pointer',
+                                padding: '0',
+                                width: '24px',
+                                height: '24px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            },
+                            onclick: 'minimizeUI',
+                        },
+                        ['−']
+                    ),
+                ]
+            ),
+            div(
+                {
+                    style: {
+                        padding: '20px',
+                        backgroundColor: '#f8f9fa',
+                    },
+                },
+                [
+                    div(
+                        {
+                            style: {
+                                marginBottom: '16px',
+                                padding: '12px',
+                                borderRadius: '6px',
+                                backgroundColor: header ? '#d4edda' : '#f8d7da',
+                                color: header ? '#155724' : '#721c24',
+                                border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                                fontWeight: '500',
+                            },
+                        },
+                        [header ? '✓ Profile detected' : '⚠ No profile detected']
+                    ),
+                    header
+                        ? button(
+                            {
+                                style: {
+                                    width: '100%',
+                                    padding: '12px 24px',
+                                    borderRadius: '6px',
+                                    border: 'none',
+                                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                                    color: 'white',
+                                    fontWeight: '600',
+                                    fontSize: '15px',
+                                    transition: 'all 0.2s ease',
+                                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                                    opacity: isRequestPending ? 0.5 : 1,
+                                    cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                                },
+                                onclick: 'onClick',
+                            },
+                            [isRequestPending ? 'Generating Proof...' : 'Generate Proof']
+                        )
+                        : div(
+                            {
+                                style: {
+                                    textAlign: 'center',
+                                    color: '#666',
+                                    padding: '12px',
+                                    backgroundColor: '#fff3cd',
+                                    borderRadius: '6px',
+                                    border: '1px solid #ffeaa7',
+                                },
+                            },
+                            ['Please login to x.com to continue']
+                        ),
+                ]
+            ),
+        ]
+    );
+}
+
+// =============================================================================
+// PLUGIN EXPORTS
+// =============================================================================
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/src/types.ts

@@ -0,0 +1,45 @@
+export interface Plugin {
+    name: string;
+    description: string;
+    logo: string;
+    file: string;
+    parseResult: (json: PluginResult) => string;
+}
+
+export interface PluginResult {
+    results: Array<{
+        value: string;
+    }>;
+}
+
+export interface ConsoleEntry {
+    timestamp: string;
+    message: string;
+    type: 'info' | 'success' | 'error' | 'warning';
+}
+
+export type CheckStatus = 'checking' | 'success' | 'error';
+
+export interface SystemCheck {
+    id: string;
+    label: string;
+    status: CheckStatus;
+    message: string;
+    showInstructions?: boolean;
+}
+
+declare global {
+    interface Window {
+        tlsn?: {
+            execCode: (code: string) => Promise<string>;
+        };
+    }
+
+    interface Navigator {
+        brave?: {
+            isBrave: () => Promise<boolean>;
+        };
+    }
+}
+
+export { };

packages/demo/src/utils.ts

@@ -0,0 +1,30 @@
+export function checkBrowserCompatibility(): boolean {
+    const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+    const isEdge = /Edg/.test(navigator.userAgent);
+    const isBrave = navigator.brave && typeof navigator.brave.isBrave === 'function';
+    const isChromium = /Chromium/.test(navigator.userAgent);
+
+    return isChrome || isEdge || isBrave || isChromium;
+}
+
+export async function checkExtension(): Promise<boolean> {
+    // Wait a bit for tlsn to load if page just loaded
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return typeof window.tlsn !== 'undefined';
+}
+
+export async function checkVerifier(): Promise<boolean> {
+    try {
+        const response = await fetch('http://localhost:7047/health');
+        if (response.ok && (await response.text()) === 'ok') {
+            return true;
+        }
+        return false;
+    } catch {
+        return false;
+    }
+}
+
+export function formatTimestamp(): string {
+    return new Date().toLocaleTimeString();
+}

packages/demo/start.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+#
+# Demo Server Startup Script
+#
+# This script starts the verifier server and demo file server via Docker.
+# Note: Run generate.sh first to create plugin files in the generated/ directory.
+#
+# Usage:
+#   ./generate.sh && ./start.sh                      # Generate and start
+#   ./start.sh                                       # Start only (assumes generated/ exists)
+#   ./start.sh -d                                    # Start in detached mode
+
+set -e
+
+cd "$(dirname "$0")"
+
+# Check if generated directory exists
+if [ ! -d "generated" ]; then
+    echo "ERROR: generated/ directory not found!"
+    echo "Please run ./generate.sh first to create plugin files."
+    exit 1
+fi
+
+echo "========================================"
+echo "TLSNotary Demo Server"
+echo "========================================"
+echo "Starting Docker services..."
+echo "========================================"
+
+# Start docker compose
+docker compose up --build "$@"

packages/demo/swissbank.js

@@ -0,0 +1,244 @@
+const config = {
+    name: 'Swiss Bank Prover',
+    description: 'This plugin will prove your Swiss Bank account balance.',
+    requests: [
+        {
+            method: 'GET',
+            host: 'swissbank.tlsnotary.org',
+            pathname: '/balances',
+            verifierUrl: 'http://localhost:7047',
+        },
+    ],
+    urls: [
+        'https://swissbank.tlsnotary.org/*',
+    ],
+};
+
+const host = 'swissbank.tlsnotary.org';
+const ui_path = '/account';
+const path = '/balances';
+const url = `https://${host}${path}`;
+
+
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+    const [header] = useHeaders(headers => {
+        console.log('Intercepted headers:', headers);
+        return headers.filter(header => header.url.includes(`https://${host}`));
+    });
+
+    const headers = {
+        'cookie': header.requestHeaders.find(header => header.name === 'Cookie')?.value,
+        Host: host,
+        'Accept-Encoding': 'identity',
+        Connection: 'close',
+    };
+
+    const resp = await prove(
+        {
+            url: url,
+            method: 'GET',
+            headers: headers,
+        },
+        {
+            // Verifier URL: The notary server that verifies the TLS connection
+            verifierUrl: 'http://localhost:7047',
+            proxyUrl: 'ws://localhost:7047/proxy?token=swissbank.tlsnotary.org',
+            // proxyUrl: 'ws://localhost:55688',
+            maxRecvData: 460, // Maximum bytes to receive from server (response size limit)
+            maxSentData: 180,// Maximum bytes to send to server (request size limit)
+
+            // -----------------------------------------------------------------------
+            // HANDLERS
+            // -----------------------------------------------------------------------
+            // These handlers specify which parts of the TLS transcript to reveal
+            // in the proof. Unrevealed data is redacted for privacy.
+            handlers: [
+                { type: 'SENT', part: 'START_LINE', action: 'REVEAL', },
+                { type: 'RECV', part: 'START_LINE', action: 'REVEAL', },
+                { type: 'RECV', part: 'BODY', action: 'REVEAL', params: { type: 'json', path: 'account_id' }, },
+                { type: 'RECV', part: 'BODY', action: 'REVEAL', params: { type: 'json', path: 'accounts.CHF' }, },
+                // { type: 'RECV', part: 'ALL', action: 'REVEAL', params: { type: 'regex', regex: '"CHF"\s*:\s*"[^"]+"' }, },
+                // { type: 'RECV', part: 'ALL', action: 'REVEAL', params: { type: 'regex', regex: '"CHF"\s*:' }, },
+                // { type: 'RECV', part: 'ALL', action: 'REVEAL', params: { type: 'regex', regex: '"275_000_000"' }, },
+            ]
+
+        }
+    );
+
+    // Step 4: Complete plugin execution and return the proof result
+    // done() signals that the plugin has finished and passes the result back
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+function main() {
+    const [header] = useHeaders(
+        headers => headers
+            .filter(header => header.url.includes(`https://${host}${ui_path}`))
+    );
+
+
+    const hasNecessaryHeader = header?.requestHeaders.some(h => h.name === 'Cookie');
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    // Run once on plugin load
+    useEffect(() => {
+        openWindow(`https://${host}${ui_path}`);
+    }, []);
+
+    // If minimized, show floating action button
+    if (isMinimized) {
+        return div({
+            style: {
+                position: 'fixed',
+                bottom: '20px',
+                right: '20px',
+                width: '60px',
+                height: '60px',
+                borderRadius: '50%',
+                backgroundColor: '#4CAF50',
+                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                zIndex: '999999',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                fontSize: '24px',
+                color: 'white',
+            },
+            onclick: 'expandUI',
+        }, ['🔐']);
+    }
+
+    // Render the plugin UI overlay
+    // This creates a fixed-position widget in the bottom-right corner
+    return div({
+        style: {
+            position: 'fixed',
+            bottom: '0',
+            right: '8px',
+            width: '280px',
+            borderRadius: '8px 8px 0 0',
+            backgroundColor: 'white',
+            boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+            zIndex: '999999',
+            fontSize: '14px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            overflow: 'hidden',
+        },
+    }, [
+        // Header with minimize button
+        div({
+            style: {
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                padding: '12px 16px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                color: 'white',
+            }
+        }, [
+            div({
+                style: {
+                    fontWeight: '600',
+                    fontSize: '16px',
+                }
+            }, ['Swiss Bank Prover']),
+            button({
+                style: {
+                    background: 'transparent',
+                    border: 'none',
+                    color: 'white',
+                    fontSize: '20px',
+                    cursor: 'pointer',
+                    padding: '0',
+                    width: '24px',
+                    height: '24px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                onclick: 'minimizeUI',
+            }, ['−'])
+        ]),
+
+        // Content area
+        div({
+            style: {
+                padding: '20px',
+                backgroundColor: '#f8f9fa',
+            }
+        }, [
+            // Status indicator showing whether cookie is detected
+            div({
+                style: {
+                    marginBottom: '16px',
+                    padding: '12px',
+                    borderRadius: '6px',
+                    backgroundColor: header ? '#d4edda' : '#f8d7da',
+                    color: header ? '#155724' : '#721c24',
+                    border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                    fontWeight: '500',
+                },
+            }, [
+                hasNecessaryHeader ? '✓ Cookie detected' : '⚠ No Cookie detected'
+            ]),
+
+            // Conditional UI based on whether we have intercepted the headers
+            hasNecessaryHeader ? (
+                // Show prove button when not pending
+                button({
+                    style: {
+                        width: '100%',
+                        padding: '12px 24px',
+                        borderRadius: '6px',
+                        border: 'none',
+                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                        color: 'white',
+                        fontWeight: '600',
+                        fontSize: '15px',
+                        cursor: 'pointer',
+                        transition: 'all 0.2s ease',
+                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                        opacity: isRequestPending ? 0.5 : 1,
+                        cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                    },
+                    onclick: 'onClick',
+                }, [isRequestPending ? 'Generating Proof...' : 'Generate Proof'])
+            ) : (
+                // Show login message
+                div({
+                    style: {
+                        textAlign: 'center',
+                        color: '#666',
+                        padding: '12px',
+                        backgroundColor: '#fff3cd',
+                        borderRadius: '6px',
+                        border: '1px solid #ffeaa7',
+                    }
+                }, ['Please login to continue'])
+            )
+        ])
+    ]);
+}
+
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/tsconfig.json

@@ -0,0 +1,36 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "src/plugins/**/*.ts"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

packages/demo/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}

packages/demo/tsconfig.plugins.json

@@ -0,0 +1,15 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "noEmit": true,
+        "strict": false,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "isolatedModules": false
+    },
+    "include": [
+        "src/plugins/**/*.ts",
+        "src/plugins/plugin-globals.d.ts"
+    ],
+    "exclude": []
+}

packages/demo/tutorial.md

@@ -0,0 +1,43 @@
+TLSNotary is a zkTLS protocol that allows a prover to prove web data from a web server to a third-party verifier. In most zkTLS use cases, a web app wants to provide an end user with a service that requires verifiable private user data.
+
+In this tutorial, you will learn how to build a small website that provides visitors a way to prove their bank balance to a verifier backend. This will give you cryptographic guarantees of the bank balance of the user/prover. In this tutorial, we will write a plugin for the TLSNotary browser extension to prove the balance of the user on their Swiss bank. The extension will run this plugin and ensure the user is protected while providing you an easy way to verify the proven data. You will also run a verifier server that verifies user proofs. Note that in this tutorial we will not do post-processing of the proven data. In a real-world scenario, you would of course check the bank balance and verify it meets the requirements for whatever next step your application needs.
+
+Prerequisites:
+* npm
+* cargo (Rust)
+* Clone this repository
+* Google Chrome browser
+
+1. Install the TLSNotary extension
+    TODO: add extension URL
+2. Launch the verifier
+```
+cd verifier
+cargo run --release
+```
+3. ~~Test the Twitter example → prove screen name~~
+4. Try to access the bank balance without logging in: https://swissbank.tlsnotary.org/balances → you should get an error
+5. Log in to the bank: https://swissbank.tlsnotary.org/login
+   1. Username: "tkstanczak"
+   2. Password: "TLSNotary is my favorite project"
+6. Modify the Twitter plugin to get the balance information instead:
+   1. Modify all URLs
+   2. Modify the information that will be revealed (the "CHF" balance)
+7. Run the plugin
+
+# Extra challenge: "Fool the verifier"
+
+So far we have focused on the prover only. Verification is of course also extremely important. You always have to carefully verify the data you receive from users. Even if it is cryptographically proven with TLSNotary, you still have to verify the data correctly, or you can be fooled.
+
+In this extra challenge, you should examine how the verifier checks the balance and modify the prover to make the verifier believe you have more CHF in your bank account than you actually do.
+
+Hint
+* Look how naive the check is for "swissbank.tlsnotary.org" in `packages/verifier/main.rs`
+* Manipulate the existing regex in the prover and add an extra entry to prove a different number
+
+
+<TODO: Screenshot CHF 275_000_000>
+
+
+FAQ:
+Browser only? For now, yes. In a few months, you will be able to run the plugins on mobile too. #pinkypromise

packages/demo/twitter.js

@@ -0,0 +1,361 @@
+// =============================================================================
+// PLUGIN CONFIGURATION
+// =============================================================================
+/**
+ * The config object defines plugin metadata displayed to users.
+ * This information appears in the plugin selection UI.
+ */
+const config = {
+    name: 'X Profile Prover',
+    description: 'This plugin will prove your X.com profile.',
+    requests: [
+        {
+            method: 'GET',
+            host: 'api.x.com',
+            pathname: '/1.1/account/settings.json',
+            verifierUrl: 'http://localhost:7047',
+        },
+    ],
+    urls: [
+        'https://x.com/*',
+    ],
+};
+
+// =============================================================================
+// PROOF GENERATION CALLBACK
+// =============================================================================
+/**
+ * This function is triggered when the user clicks the "Prove" button.
+ * It extracts authentication headers from intercepted requests and generates
+ * a TLSNotary proof using the unified prove() API.
+ *
+ * Flow:
+ * 1. Get the intercepted X.com API request headers
+ * 2. Extract authentication headers (Cookie, CSRF token, OAuth token, etc.)
+ * 3. Call prove() with the request configuration and reveal handlers
+ * 4. prove() internally:
+ *    - Creates a prover connection to the verifier
+ *    - Sends the HTTP request through the TLS prover
+ *    - Captures the TLS transcript (sent/received bytes)
+ *    - Parses the transcript with byte-level range tracking
+ *    - Applies selective reveal handlers to show only specified data
+ *    - Generates and returns the cryptographic proof
+ * 5. Return the proof result to the caller via done()
+ */
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+
+    // Step 1: Get the intercepted header from the X.com API request
+    // useHeaders() provides access to all intercepted HTTP request headers
+    // We filter for the specific X.com API endpoint we want to prove
+    const [header] = useHeaders(headers => {
+        return headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'));
+    });
+
+    // Step 2: Extract authentication headers from the intercepted request
+    // These headers are required to authenticate with the X.com API
+    const headers = {
+        // Cookie: Session authentication token
+        'cookie': header.requestHeaders.find(header => header.name === 'Cookie')?.value,
+
+        // X-CSRF-Token: Cross-Site Request Forgery protection token
+        'x-csrf-token': header.requestHeaders.find(header => header.name === 'x-csrf-token')?.value,
+
+        // X-Client-Transaction-ID: Request tracking identifier
+        'x-client-transaction-id': header.requestHeaders.find(header => header.name === 'x-client-transaction-id')?.value,
+
+        // Host: Target server hostname
+        Host: 'api.x.com',
+
+        // Authorization: OAuth bearer token for API authentication
+        authorization: header.requestHeaders.find(header => header.name === 'authorization')?.value,
+
+        // Accept-Encoding: Must be 'identity' for TLSNotary (no compression)
+        // TLSNotary requires uncompressed data to verify byte-for-byte
+        'Accept-Encoding': 'identity',
+
+        // Connection: Use 'close' to complete the connection after one request
+        Connection: 'close',
+    };
+
+    // Step 3: Generate TLS proof using the unified prove() API
+    // This single function handles the entire proof generation pipeline
+    const resp = await prove(
+        // -------------------------------------------------------------------------
+        // REQUEST OPTIONS
+        // -------------------------------------------------------------------------
+        // Defines the HTTP request to be proven
+        {
+            url: 'https://api.x.com/1.1/account/settings.json',  // Target API endpoint
+            method: 'GET',                                        // HTTP method
+            headers: headers,                                     // Authentication headers
+        },
+
+        // -------------------------------------------------------------------------
+        // PROVER OPTIONS
+        // -------------------------------------------------------------------------
+        // Configures the TLS proof generation process
+        {
+            // Verifier URL: The notary server that verifies the TLS connection
+            // Must be running locally or accessible at this address
+            verifierUrl: 'http://localhost:7047',
+
+            // Proxy URL: WebSocket proxy that relays TLS data to the target server
+            // The token parameter specifies which server to connect to
+            proxyUrl: 'ws://localhost:7047/proxy?token=api.x.com',
+
+            // Maximum bytes to receive from server (response size limit)
+            maxRecvData: 4000,
+
+            // Maximum bytes to send to server (request size limit)
+            maxSentData: 2000,
+
+            // -----------------------------------------------------------------------
+            // HANDLERS
+            // -----------------------------------------------------------------------
+            // These handlers specify which parts of the TLS transcript to reveal
+            // in the proof. Unrevealed data is redacted for privacy.
+            handlers: [
+                // Reveal the request start line (GET /path HTTP/1.1)
+                // This proves the HTTP method and path were sent
+                {
+                    type: 'SENT',           // Direction: data sent to server
+                    part: 'START_LINE',     // Part: HTTP request line
+                    action: 'REVEAL',       // Action: include as plaintext in proof
+                },
+
+                // Reveal the response start line (HTTP/1.1 200 OK)
+                // This proves the server responded with status code 200
+                {
+                    type: 'RECV',           // Direction: data received from server
+                    part: 'START_LINE',     // Part: HTTP response line
+                    action: 'REVEAL',       // Action: include as plaintext in proof
+                },
+
+                // Reveal the 'date' header from the response
+                // This proves when the server generated the response
+                {
+                    type: 'RECV',           // Direction: data received from server
+                    part: 'HEADERS',        // Part: HTTP headers
+                    action: 'REVEAL',       // Action: include as plaintext in proof
+                    params: {
+                        key: 'date',          // Specific header to reveal
+                    },
+                },
+
+                // Reveal the 'screen_name' field from the JSON response body
+                // This proves the X.com username without revealing other profile data
+                {
+                    type: 'RECV',           // Direction: data received from server
+                    part: 'BODY',           // Part: HTTP response body
+                    action: 'REVEAL',       // Action: include as plaintext in proof
+                    params: {
+                        type: 'json',         // Body format: JSON
+                        path: 'screen_name',  // JSON field to reveal (top-level only)
+                    },
+                },
+            ]
+        }
+    );
+
+    // Step 4: Complete plugin execution and return the proof result
+    // done() signals that the plugin has finished and passes the result back
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+
+// =============================================================================
+// MAIN UI FUNCTION
+// =============================================================================
+/**
+ * The main() function is called reactively whenever plugin state changes.
+ * It returns a DOM structure that is rendered as the plugin UI.
+ *
+ * React-like Hooks Used:
+ * - useHeaders(): Subscribes to intercepted HTTP request headers
+ * - useEffect(): Runs side effects when dependencies change
+ *
+ * UI Flow:
+ * 1. Check if X.com API request headers have been intercepted
+ * 2. If not intercepted yet: Show "Please login" message
+ * 3. If intercepted: Show "Profile detected" with a "Prove" button
+ * 4. On first render: Open X.com in a new window to trigger login
+ */
+function main() {
+    // Subscribe to intercepted headers for the X.com API endpoint
+    // This will reactively update whenever new headers matching the filter arrive
+    const [header] = useHeaders(headers => headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json')));
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    // Run once on plugin load: Open X.com in a new window
+    // The empty dependency array [] means this runs only once
+    // The opened window's requests will be intercepted by the plugin
+    useEffect(() => {
+        openWindow('https://x.com');
+    }, []);
+
+    // If minimized, show floating action button
+    if (isMinimized) {
+        return div({
+            style: {
+                position: 'fixed',
+                bottom: '20px',
+                right: '20px',
+                width: '60px',
+                height: '60px',
+                borderRadius: '50%',
+                backgroundColor: '#4CAF50',
+                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                zIndex: '999999',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                fontSize: '24px',
+                color: 'white',
+            },
+            onclick: 'expandUI',
+        }, ['🔐']);
+    }
+
+    // Render the plugin UI overlay
+    // This creates a fixed-position widget in the bottom-right corner
+    return div({
+        style: {
+            position: 'fixed',
+            bottom: '0',
+            right: '8px',
+            width: '280px',
+            borderRadius: '8px 8px 0 0',
+            backgroundColor: 'white',
+            boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+            zIndex: '999999',
+            fontSize: '14px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            overflow: 'hidden',
+        },
+    }, [
+        // Header with minimize button
+        div({
+            style: {
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                padding: '12px 16px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                color: 'white',
+            }
+        }, [
+            div({
+                style: {
+                    fontWeight: '600',
+                    fontSize: '16px',
+                }
+            }, ['X Profile Prover']),
+            button({
+                style: {
+                    background: 'transparent',
+                    border: 'none',
+                    color: 'white',
+                    fontSize: '20px',
+                    cursor: 'pointer',
+                    padding: '0',
+                    width: '24px',
+                    height: '24px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                onclick: 'minimizeUI',
+            }, ['−'])
+        ]),
+
+        // Content area
+        div({
+            style: {
+                padding: '20px',
+                backgroundColor: '#f8f9fa',
+            }
+        }, [
+            // Status indicator showing whether profile is detected
+            div({
+                style: {
+                    marginBottom: '16px',
+                    padding: '12px',
+                    borderRadius: '6px',
+                    backgroundColor: header ? '#d4edda' : '#f8d7da',
+                    color: header ? '#155724' : '#721c24',
+                    border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                    fontWeight: '500',
+                },
+            }, [
+                header ? '✓ Profile detected' : '⚠ No profile detected'
+            ]),
+
+            // Conditional UI based on whether we have intercepted the headers
+            header ? (
+                // Show prove button when not pending
+                button({
+                    style: {
+                        width: '100%',
+                        padding: '12px 24px',
+                        borderRadius: '6px',
+                        border: 'none',
+                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                        color: 'white',
+                        fontWeight: '600',
+                        fontSize: '15px',
+                        cursor: 'pointer',
+                        transition: 'all 0.2s ease',
+                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                        opacity: isRequestPending ? 0.5 : 1,
+                        cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                    },
+                    onclick: 'onClick',
+                }, [isRequestPending ? 'Generating Proof...' : 'Generate Proof'])
+            ) : (
+                // Show login message
+                div({
+                    style: {
+                        textAlign: 'center',
+                        color: '#666',
+                        padding: '12px',
+                        backgroundColor: '#fff3cd',
+                        borderRadius: '6px',
+                        border: '1px solid #ffeaa7',
+                    }
+                }, ['Please login to x.com to continue'])
+            )
+        ])
+    ]);
+}
+
+// =============================================================================
+// PLUGIN EXPORTS
+// =============================================================================
+/**
+ * All plugins must export an object with these properties:
+ * - main: The reactive UI rendering function
+ * - onClick: Click handler callback for buttons
+ * - config: Plugin metadata
+ */
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+    build: {
+        outDir: 'dist',
+        sourcemap: true,
+    },
+    server: {
+        port: 3000,
+        open: true,
+    },
+});

packages/extension/.eslintrc

@@ -17,10 +17,13 @@
   },
   "env": {
     "webextensions": true,
-    "es6": true,
+    "es2020": true,
     "browser": true,
     "node": true
   },
+  "globals": {
+    "URLPattern": "readonly"
+  },
   "settings": {
     "import/resolver": "typescript"
   },
@@ -31,6 +34,7 @@
     "wasm",
     "tlsn",
     "util",
+    "lib",
     "plugins",
     "webpack.config.js"
   ]

packages/extension/CLAUDE.md

@@ -0,0 +1,308 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+### Development
+- `npm install` - Install dependencies
+- `npm run dev` - Start webpack dev server with hot reload on port 3000 (default)
+- `npm run build` - Build extension (uses NODE_ENV from utils/build.js, defaults to production)
+- `npm run build:webpack` - Direct webpack build with production mode
+- `npm run lint` - Run ESLint to check code quality
+- `npm run lint:fix` - Run ESLint with auto-fix for issues
+
+## TLSNotary Extension
+
+This is a Chrome Extension (Manifest V3) for TLSNotary, enabling secure notarization of TLS data. The extension was recently refactored (commit 92ecb55) to a minimal boilerplate, with TLSN overlay functionality being incrementally added back.
+
+**Important**: The extension must match the version of the notary server it connects to.
+
+## Architecture Overview
+
+### Extension Entry Points
+The extension has 5 main entry points defined in `webpack.config.js`:
+
+#### 1. **Background Service Worker** (`src/entries/Background/index.ts`)
+Core responsibilities:
+- **TLSN Window Management**: Creates popup windows for TLSN operations, tracks window/tab IDs
+- **Request Interception**: Uses `webRequest.onBeforeRequest` API to intercept all HTTP requests from TLSN windows
+- **Request Storage**: Maintains in-memory array of intercepted requests (`tlsnRequests`)
+- **Message Routing**: Forwards messages between content scripts, popup, and injected page scripts
+- **Offscreen Document Management**: Creates offscreen documents for background DOM operations (Chrome 109+)
+- Uses `webextension-polyfill` for cross-browser compatibility
+
+Key message handlers:
+- `PING` → `PONG` (connectivity test)
+- `TLSN_CONTENT_TO_EXTENSION` → Opens new popup window, tracks requests
+- `CONTENT_SCRIPT_READY` → Confirms content script loaded
+
+#### 2. **Content Script** (`src/entries/Content/index.ts`)
+Injected into all HTTP/HTTPS pages via manifest. Responsibilities:
+- **Script Injection**: Injects `content.bundle.js` into page context to expose page-accessible API
+- **TLSN Overlay Management**: Creates/updates full-screen overlay showing intercepted requests
+- **Message Bridge**: Bridges messages between page scripts and extension background
+- **Request Display**: Real-time updates of intercepted requests in overlay UI
+
+Message handlers:
+- `GET_PAGE_INFO` → Returns page title, URL, domain
+- `SHOW_TLSN_OVERLAY` → Creates overlay with initial requests
+- `UPDATE_TLSN_REQUESTS` → Updates overlay with new requests
+- `HIDE_TLSN_OVERLAY` → Removes overlay and clears state
+
+Window message handler:
+- Listens for `TLSN_CONTENT_SCRIPT_MESSAGE` from page scripts
+- Forwards to background via `TLSN_CONTENT_TO_EXTENSION`
+
+#### 3. **Content Module** (`src/entries/Content/content.ts`)
+Injected script running in page context (not content script context):
+- **Page API**: Exposes `window.extensionAPI` object to web pages
+- **Message Bridge**: Provides `sendMessage()` method that posts messages via `window.postMessage`
+- **Lifecycle Event**: Dispatches `extension_loaded` custom event when ready
+- **Web Accessible Resource**: Listed in manifest's `web_accessible_resources`
+
+Page API usage:
+```javascript
+window.extensionAPI.sendMessage({ action: 'startTLSN' });
+window.addEventListener('extension_loaded', () => { /* ready */ });
+```
+
+#### 4. **Popup UI** (`src/entries/Popup/index.tsx`)
+React-based extension popup:
+- **Simple Interface**: "Hello World" boilerplate with test button
+- **Redux Integration**: Connected to Redux store via `react-redux`
+- **Message Sending**: Can send messages to background script
+- **Styling**: Uses Tailwind CSS with custom button/input classes
+- Entry point: `popup.html` (400x300px default size)
+
+#### 5. **Offscreen Document** (`src/entries/Offscreen/index.tsx`)
+Isolated React component for background processing:
+- **Purpose**: Handles DOM operations unavailable in service workers
+- **Message Handling**: Listens for `PROCESS_DATA` messages (example implementation)
+- **Lifecycle**: Created dynamically by background script, reused if exists
+- Entry point: `offscreen.html`
+
+### State Management
+Redux store located in `src/reducers/index.tsx`:
+- **App State Interface**: `{ message: string, count: number }`
+- **Action Creators**:
+  - `setMessage(message: string)` - Updates message state
+  - `incrementCount()` - Increments counter
+- **Store Configuration** (`src/utils/store.ts`):
+  - Development: Uses `redux-thunk` + `redux-logger` middleware
+  - Production: Uses `redux-thunk` only
+- **Type Safety**: Exports `RootState` and `AppRootState` types
+
+### Message Passing Architecture
+
+**Page → Extension Flow**:
+```
+Page (window.postMessage)
+  ↓
+Content Script (window.addEventListener('message'))
+  ↓
+Background (browser.runtime.sendMessage)
+```
+
+**Extension → Page Flow**:
+```
+Background (browser.tabs.sendMessage)
+  ↓
+Content Script (browser.runtime.onMessage)
+  ↓
+Page DOM manipulation (overlay, etc.)
+```
+
+**Security**: Content script only accepts messages from same origin (`event.origin === window.location.origin`)
+
+### TLSN Overlay Feature
+
+The overlay is a full-screen modal showing intercepted requests:
+- **Design**: Dark gradient background (rgba(0,0,0,0.85)) with glassmorphic message box
+- **Content**:
+  - Header: "TLSN Plugin In Progress" with gradient text
+  - Request list: Scrollable container showing METHOD + URL for each request
+  - Request count: Displayed in header
+- **Styling**: Inline CSS with animations (fadeInScale), custom scrollbar styling
+- **Updates**: Real-time updates as new requests are intercepted
+- **Lifecycle**: Created when TLSN window opens, updated via background messages, cleared on window close
+
+### Build Configuration
+
+**Webpack 5 Setup** (`webpack.config.js`):
+- **Entry Points**: popup, background, contentScript, content, offscreen
+- **Output**: `build/` directory with `[name].bundle.js` pattern
+- **Loaders**:
+  - `ts-loader` - TypeScript compilation (transpileOnly in dev)
+  - `babel-loader` - JavaScript transpilation with React Refresh
+  - `style-loader` + `css-loader` + `postcss-loader` + `sass-loader` - Styling pipeline
+  - `html-loader` - HTML templates
+  - `asset/resource` - File assets (images, fonts)
+- **Plugins**:
+  - `ReactRefreshWebpackPlugin` - Hot module replacement (dev only)
+  - `CleanWebpackPlugin` - Cleans build directory
+  - `CopyWebpackPlugin` - Copies manifest, icons, CSS files
+  - `HtmlWebpackPlugin` - Generates popup.html and offscreen.html
+  - `TerserPlugin` - Code minification (production only)
+- **Dev Server** (`utils/webserver.js`):
+  - Port: 3000 (configurable via `PORT` env var)
+  - Hot reload enabled with `webpack/hot/dev-server`
+  - Writes to disk for Chrome to load (`writeToDisk: true`)
+  - WebSocket transport for HMR
+
+**Production Build** (`utils/build.js`):
+- Adds `ZipPlugin` to create `tlsn-extension-{version}.zip` in `zip/` directory
+- Uses package.json version for naming
+- Exits with code 1 on errors or warnings
+
+### Extension Permissions
+
+Defined in `src/manifest.json`:
+- `offscreen` - Create offscreen documents for background processing
+- `webRequest` - Intercept HTTP/HTTPS requests
+- `storage` - Persistent local storage
+- `activeTab` - Access active tab information
+- `tabs` - Tab management (create, query, update)
+- `windows` - Window management (create, track, remove)
+- `host_permissions: ["<all_urls>"]` - Access all URLs for request interception
+- `content_scripts` - Inject into all HTTP/HTTPS pages
+- `web_accessible_resources` - Make content.bundle.js, CSS, and icons accessible to pages
+- `content_security_policy` - Allow WASM execution (`wasm-unsafe-eval`)
+
+### TypeScript Configuration
+
+**tsconfig.json**:
+- Target: `esnext`
+- Module: `esnext` with Node resolution
+- Strict mode enabled
+- JSX: React (not React 17+ automatic runtime)
+- Includes: `src/` only
+- Excludes: `build/`, `node_modules/`
+- Types: `chrome` (for Chrome extension APIs)
+
+**Type Declarations**:
+- `src/global.d.ts` - Declares PNG module types
+- Uses `@types/chrome`, `@types/webextension-polyfill`, `@types/react`, etc.
+
+### Styling
+
+**Tailwind CSS**:
+- Configuration: `tailwind.config.js`
+- Content: Scans all `src/**/*.{js,jsx,ts,tsx}`
+- Custom theme: Primary color `#243f5f`
+- PostCSS pipeline with `postcss-preset-env`
+
+**SCSS**:
+- FontAwesome integration (all icon sets: brands, solid, regular)
+- Custom utility classes: `.button`, `.input`, `.select`, `.textarea`
+- BEM-style modifiers: `.button--primary`
+- Tailwind @apply directives mixed with custom styles
+
+**Popup Dimensions**:
+- Default: 480x600px (set in index.scss body styles)
+- Customizable via inline styles or props
+
+## Development Workflow
+
+1. **Initial Setup**:
+   ```bash
+   npm install  # Requires Node.js >= 18
+   ```
+
+2. **Development Mode**:
+   ```bash
+   npm run dev  # Starts webpack-dev-server on port 3000
+   ```
+   - Hot module replacement enabled
+   - Files written to `build/` directory
+   - Source maps: `cheap-module-source-map`
+
+3. **Load Extension in Chrome**:
+   - Navigate to `chrome://extensions/`
+   - Enable "Developer mode" toggle
+   - Click "Load unpacked"
+   - Select the `build/` folder
+   - Extension auto-reloads on file changes (requires manual refresh for manifest changes)
+
+4. **Testing TLSN Functionality**:
+   - Trigger `TLSN_CONTENT_TO_EXTENSION` message from a page using `window.extensionAPI.sendMessage()`
+   - Background script opens popup window to x.com
+   - All requests in that window are intercepted and displayed in overlay
+
+5. **Production Build**:
+   ```bash
+   NODE_ENV=production npm run build  # Creates build/ and zip/
+   ```
+   - Minified output with Terser
+   - No source maps
+   - Creates versioned zip file for Chrome Web Store submission
+
+6. **Linting**:
+   ```bash
+   npm run lint      # Check for issues
+   npm run lint:fix  # Auto-fix issues
+   ```
+
+## Known Issues & Legacy Code
+
+⚠️ **Legacy Code Warning**: `src/entries/utils.ts` contains imports from non-existent files:
+- `Background/rpc.ts` (removed in refactor)
+- `SidePanel/types.ts` (removed in refactor)
+- Functions: `pushToRedux()`, `openSidePanel()`, `waitForEvent()`
+- **Status**: Dead code, not used by current entry points
+- **Action**: Remove this file or refactor if functionality needed
+
+## Websockify Integration
+
+Used for WebSocket proxying of TLS connections:
+
+**Build Websockify Docker Image**:
+```bash
+git clone https://github.com/novnc/websockify && cd websockify
+./docker/build.sh
+```
+
+**Run Websockify**:
+```bash
+# For x.com (Twitter)
+docker run -it --rm -p 55688:80 novnc/websockify 80 api.x.com:443
+
+# For Twitter (alternative)
+docker run -it --rm -p 55688:80 novnc/websockify 80 api.twitter.com:443
+```
+
+Purpose: Proxies HTTPS connections through WebSocket for browser-based TLS operations.
+
+## Code Quality
+
+**ESLint Configuration** (`.eslintrc`):
+- Extends: `prettier`, `@typescript-eslint/recommended`
+- Parser: `@typescript-eslint/parser`
+- Rules:
+  - `prettier/prettier`: error
+  - `@typescript-eslint/no-explicit-any`: warning
+  - `@typescript-eslint/no-var-requires`: off (allows require in webpack config)
+  - `@typescript-eslint/ban-ts-comment`: off
+  - `no-undef`: error
+  - `padding-line-between-statements`: error
+- Environment: `webextensions`, `browser`, `node`, `es6`
+- Ignores: `node_modules`, `zip`, `build`, `wasm`, `tlsn`, `webpack.config.js`
+
+**Prettier Configuration** (`.prettierrc.json`):
+- Single quotes, trailing commas, 2-space indentation
+- Ignore: `.prettierignore` (not in repo, likely default ignores)
+
+## Publishing
+
+After building:
+1. Test extension thoroughly in Chrome
+2. Create production build: `NODE_ENV=production npm run build`
+3. Upload `zip/tlsn-extension-{version}.zip` to Chrome Web Store
+4. Follow [Chrome Web Store publishing guide](https://developer.chrome.com/webstore/publish)
+
+## Resources
+
+- [Webpack Documentation](https://webpack.js.org/concepts/)
+- [Chrome Extension Docs](https://developer.chrome.com/docs/extensions/)
+- [Manifest V3 Migration Guide](https://developer.chrome.com/docs/extensions/mv3/intro/)
+- [webextension-polyfill](https://github.com/mozilla/webextension-polyfill)

packages/extension/STORE_LISTING.md

@@ -0,0 +1,179 @@
+# Chrome Web Store Listing
+
+## Extension Name
+TLSNotary
+
+## Description
+
+TLSNotary Extension enables you to create cryptographic proofs of any data you access on the web. Prove ownership of your online accounts, verify your credentials, or demonstrate that you received specific information from a website—all without exposing your private data.
+
+### What is TLSNotary?
+
+TLSNotary is an open-source protocol that allows you to prove the authenticity of any data fetched from websites. When you visit an HTTPS website, your browser establishes a secure TLS (Transport Layer Security) connection. TLSNotary leverages this existing security infrastructure to generate verifiable proofs that specific data was genuinely returned by a particular website, without requiring any cooperation from the website itself.
+
+### Why Install This Extension?
+
+**Prove What You See Online**
+Have you ever needed to prove that a website displayed certain information? Whether it's proving your account balance, ownership of a social media profile, or the contents of a private message, TLSNotary creates tamper-proof cryptographic evidence that stands up to scrutiny.
+
+**Privacy-Preserving Proofs**
+Unlike screenshots or screen recordings that can be easily faked and expose all your data, TLSNotary proofs are:
+- Cryptographically verifiable and cannot be forged
+- Selectively disclosed—reveal only the specific data points you choose while keeping everything else private
+- Generated without exposing your login credentials or session tokens to third parties
+
+**No Website Cooperation Required**
+TLSNotary works with any HTTPS website without requiring the website to implement any special support. The proof generation happens entirely in your browser, using the standard TLS connection you already have.
+
+### Key Features
+
+**Cryptographic Data Proofs**
+Generate unforgeable proofs that specific data was returned by a website. Each proof contains cryptographic evidence tied to the website's TLS certificate, making it impossible to fabricate or alter.
+
+**Selective Disclosure**
+Choose exactly what information to reveal in your proofs. Prove your account balance without revealing your transaction history. Verify your identity without exposing your full profile. Show specific fields while keeping everything else hidden.
+
+**Plugin System**
+Build and run custom plugins for specific proof workflows. The extension includes a Developer Console with a code editor for creating and testing plugins. Use React-like hooks for reactive UI updates and easy integration with the proof generation pipeline.
+
+**Multi-Window Management**
+Open and manage multiple browser windows for tracking different proof sessions. Each window maintains its own request history, allowing you to work on multiple proofs simultaneously.
+
+**Request Interception**
+Automatically capture HTTP/HTTPS requests from managed windows. View intercepted requests in real-time through an intuitive overlay interface. Select the specific requests you want to include in your proofs.
+
+**Sandboxed Execution**
+Plugins run in an isolated QuickJS WebAssembly environment for security. Network and filesystem access are disabled by default, ensuring plugins cannot access data beyond what you explicitly provide.
+
+### Use Cases
+
+**Identity Verification**
+Prove you own a specific social media account, email address, or online profile without sharing your password or giving third-party access to your account.
+
+**Financial Attestations**
+Demonstrate your account balance, transaction history, or financial standing to lenders, landlords, or other parties who require proof—without exposing your complete financial information.
+
+**Content Authentication**
+Create verifiable evidence of online content that cannot be forged. Useful for legal documentation, journalism, research, or any situation where proving the authenticity of web content matters.
+
+**Credential Verification**
+Prove your credentials, certifications, or qualifications as displayed by official issuing organizations, without relying on easily-faked screenshots.
+
+**Privacy-Preserving KYC**
+Complete Know Your Customer (KYC) requirements while revealing only the minimum necessary information. Prove you meet eligibility criteria without exposing your full identity.
+
+### How It Works
+
+1. **Install the Extension**: Add TLSNotary to Chrome from the Web Store.
+
+2. **Access the Developer Console**: Right-click on any webpage and select "Developer Console" to open the plugin editor.
+
+3. **Run a Plugin**: Use the built-in example plugins or write your own. Plugins define what data to capture and which parts to include in proofs.
+
+4. **Generate Proofs**: The extension captures your HTTPS traffic, creates a cryptographic commitment with a verifier server, and generates a proof of the data you selected.
+
+5. **Share Selectively**: Export proofs containing only the data you want to reveal. Verifiers can confirm the proof's authenticity without seeing your hidden information.
+
+### Technical Details
+
+- **Manifest V3**: Built on Chrome's latest extension platform for improved security and performance
+- **WebAssembly Powered**: Uses compiled Rust code via WebAssembly for efficient cryptographic operations
+- **Plugin SDK**: Comprehensive SDK for developing custom proof workflows with TypeScript support
+- **Open Source**: Full source code available for review and community contributions
+
+### Requirements
+
+- Chrome browser version 109 or later (for offscreen document support)
+- A verifier server for proof generation (public servers available or run your own)
+- Active internet connection for HTTPS request interception
+
+### Privacy and Security
+
+TLSNotary is designed with privacy as a core principle:
+
+- **No Data Collection**: The extension does not collect, store, or transmit your browsing data to any third party
+- **Local Processing**: All proof generation happens locally in your browser
+- **Open Source**: The entire codebase is publicly auditable
+- **Selective Disclosure**: You control exactly what data appears in proofs
+- **Sandboxed Plugins**: Plugin code runs in an isolated environment with no access to your system
+
+### Getting Started
+
+After installation:
+
+1. Right-click anywhere on a webpage
+2. Select "Developer Console" from the context menu
+3. Review the example plugin code in the editor
+4. Click "Run Code" to execute the plugin
+5. Follow the on-screen instructions to generate your first proof
+
+For detailed documentation, tutorials, and plugin development guides, visit the TLSNotary documentation site.
+
+### About TLSNotary
+
+TLSNotary is an open-source project dedicated to enabling data portability and verifiable provenance for web data. The protocol has been in development since 2013 and has undergone multiple security audits. Join our community to learn more about trustless data verification and contribute to the future of verifiable web data.
+
+### Support and Feedback
+
+- Documentation: https://docs.tlsnotary.org/
+- GitHub: https://github.com/tlsnotary/tlsn-extension
+- Issues: https://github.com/tlsnotary/tlsn-extension/issues
+
+Licensed under MIT and Apache 2.0 licenses.
+
+---
+
+## Screenshot Captions
+
+### Screenshot 1: Plugin UI
+**Caption:** "Prove any web data without compromising privacy"
+
+### Screenshot 2: Permission Popup
+**Caption:** "Control exactly what data you reveal in each proof"
+
+### Screenshot 3: Developer Console
+**Caption:** "Build custom plugins with the built-in code editor"
+
+---
+
+## Permission Justifications
+
+The following permissions are required for the extension's core functionality of generating cryptographic proofs of web data:
+
+### offscreen
+
+**Justification:** Required to create offscreen documents for executing WebAssembly-based cryptographic operations. The TLSNotary proof generation uses Rust compiled to WebAssembly, which requires DOM APIs unavailable in Manifest V3 service workers. The offscreen document hosts the plugin execution environment (QuickJS sandbox) and the cryptographic prover that generates TLS proofs. Without this permission, the extension cannot perform its core function of generating cryptographic proofs.
+
+### webRequest
+
+**Justification:** Required to intercept HTTP/HTTPS requests from browser windows managed by the extension. When users initiate a proof generation workflow, the extension opens a managed browser window and captures the HTTP request/response data that will be included in the cryptographic proof. This interception is essential for capturing the exact data the user wants to prove, including request headers and URLs. The extension only intercepts requests in windows it explicitly manages for proof generation—not general browsing activity.
+
+### storage
+
+**Justification:** Required to persist user preferences and plugin configurations across browser sessions. The extension stores user settings such as preferred verifier server URLs and plugin code. This ensures users do not need to reconfigure the extension each time they restart their browser.
+
+### activeTab
+
+**Justification:** Required to access information about the currently active tab when the user initiates a proof generation workflow. The extension needs to read the current page URL and title to display context in the Developer Console and to determine which requests belong to the active proof session.
+
+### tabs
+
+**Justification:** Required to create, query, and manage browser tabs for proof generation workflows. When a plugin opens a managed window for capturing web data, the extension must create new tabs, send messages to content scripts in those tabs, and track which tabs belong to which proof session. This is essential for the multi-window proof management feature.
+
+### windows
+
+**Justification:** Required to create and manage browser windows for proof generation sessions. The extension opens dedicated browser windows when users run proof plugins, allowing isolation of the proof capture session from regular browsing. The extension tracks these windows to route intercepted requests to the correct proof session and to clean up resources when windows are closed.
+
+### contextMenus
+
+**Justification:** Required to add the "Developer Console" menu item to the browser's right-click context menu. This provides the primary access point for users to open the plugin development and execution interface. Without this permission, users would have no convenient way to access the Developer Console for writing and running proof plugins.
+
+### Host Permissions (<all_urls>)
+
+**Justification:** Required because TLSNotary is designed to generate cryptographic proofs of data from any HTTPS website. Users need to prove data from various websites including social media platforms, financial services, government portals, and any other web service. The extension cannot predict which websites users will need to generate proofs for, so it requires broad host access to intercept requests and inject content scripts for the proof overlay UI. The extension only actively intercepts requests in windows explicitly managed for proof generation—it does not monitor or collect data from general browsing activity.
+
+---
+
+## Single Purpose Description
+
+TLSNotary Extension has a single purpose: to generate cryptographic proofs of web data. All requested permissions directly support this purpose by enabling request interception for proof capture, window management for proof sessions, and background processing for cryptographic operations.

packages/extension/lib/tlsn-wasm-pkg

@@ -0,0 +1 @@
+../../tlsn-wasm-pkg

packages/extension/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "extension",
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tlsnotary/tlsn-extension.git",
+    "directory": "packages/extension"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production node utils/build.js",
+    "build:webpack": "NODE_ENV=production webpack --config webpack.config.js",
+    "dev": "NODE_ENV=development node utils/webserver.js",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "serve:test": "python3 -m http.server 8081 --directory ./tests/integration"
+  },
+  "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.6",
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@tlsn/common": "*",
+    "@tlsn/plugin-sdk": "*",
+    "@uiw/react-codemirror": "^4.25.2",
+    "assert": "^2.1.0",
+    "buffer": "^6.0.3",
+    "classnames": "^2.3.2",
+    "codemirror": "^6.0.1",
+    "comlink": "^4.4.2",
+    "events": "^3.3.0",
+    "fast-deep-equal": "^3.1.3",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.2",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
+    "redux": "^4.2.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.2",
+    "stream-browserify": "^3.0.0",
+    "tailwindcss": "^3.3.3",
+    "tlsn-js": "^0.1.0-alpha.12.0",
+    "tlsn-wasm": "./lib/tlsn-wasm-pkg/",
+    "util": "^0.12.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@types/chrome": "^0.0.202",
+    "@types/node": "^20.4.10",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/redux-logger": "^3.0.9",
+    "@types/uuid": "^10.0.0",
+    "@types/webextension-polyfill": "^0.10.7",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^9.1.2",
+    "babel-preset-react-app": "^10.0.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^11.1.0",
+    "happy-dom": "^20.0.11",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "null-loader": "^4.0.1",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.1.1",
+    "prettier": "^3.0.2",
+    "react-refresh": "^0.14.0",
+    "react-refresh-typescript": "^2.0.7",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "ts-loader": "^9.4.2",
+    "type-fest": "^3.5.2",
+    "typescript": "^5.5.4",
+    "uuid": "^13.0.0",
+    "vitest": "^3.2.4",
+    "vitest-chrome": "^0.1.0",
+    "webextension-polyfill": "^0.10.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^5.2.2",
+    "webpack-ext-reloader": "^1.1.12",
+    "zip-webpack-plugin": "^4.0.1"
+  }
+}

packages/extension/src/background/ConfirmationManager.ts

@@ -0,0 +1,230 @@
+import browser from 'webextension-polyfill';
+import { logger } from '@tlsn/common';
+import { PluginConfig } from '@tlsn/plugin-sdk/src/types';
+
+interface PendingConfirmation {
+  requestId: string;
+  resolve: (allowed: boolean) => void;
+  reject: (error: Error) => void;
+  windowId?: number;
+  timeoutId?: ReturnType<typeof setTimeout>;
+}
+
+/**
+ * Manages plugin execution confirmation popups.
+ * Handles opening confirmation windows, tracking pending confirmations,
+ * and processing user responses.
+ */
+export class ConfirmationManager {
+  private pendingConfirmations: Map<string, PendingConfirmation> = new Map();
+  private currentPopupWindowId: number | null = null;
+
+  // Confirmation timeout in milliseconds (60 seconds)
+  private readonly CONFIRMATION_TIMEOUT_MS = 60 * 1000;
+
+  // Popup window dimensions
+  private readonly POPUP_WIDTH = 600;
+  private readonly POPUP_HEIGHT = 550;
+
+  constructor() {
+    // Listen for window removal to handle popup close
+    browser.windows.onRemoved.addListener(this.handleWindowRemoved.bind(this));
+  }
+
+  /**
+   * Request confirmation from the user for plugin execution.
+   * Opens a popup window displaying plugin details and waits for user response.
+   *
+   * @param config - Plugin configuration (can be null for unknown plugins)
+   * @param requestId - Unique ID to correlate the confirmation request
+   * @returns Promise that resolves to true (allowed) or false (denied)
+   */
+  async requestConfirmation(
+    config: PluginConfig | null,
+    requestId: string,
+  ): Promise<boolean> {
+    // Check if there's already a pending confirmation
+    if (this.pendingConfirmations.size > 0) {
+      logger.warn(
+        '[ConfirmationManager] Another confirmation is already pending, rejecting new request',
+      );
+      throw new Error('Another plugin confirmation is already in progress');
+    }
+
+    // Build URL with plugin info as query params
+    const popupUrl = this.buildPopupUrl(config, requestId);
+
+    return new Promise<boolean>(async (resolve, reject) => {
+      try {
+        // Create the confirmation popup window
+        const window = await browser.windows.create({
+          url: popupUrl,
+          type: 'popup',
+          width: this.POPUP_WIDTH,
+          height: this.POPUP_HEIGHT,
+          focused: true,
+        });
+
+        if (!window.id) {
+          throw new Error('Failed to create confirmation popup window');
+        }
+
+        this.currentPopupWindowId = window.id;
+
+        // Set up timeout
+        const timeoutId = setTimeout(() => {
+          const pending = this.pendingConfirmations.get(requestId);
+          if (pending) {
+            logger.debug('[ConfirmationManager] Confirmation timed out');
+            this.cleanup(requestId);
+            resolve(false); // Treat timeout as denial
+          }
+        }, this.CONFIRMATION_TIMEOUT_MS);
+
+        // Store pending confirmation
+        this.pendingConfirmations.set(requestId, {
+          requestId,
+          resolve,
+          reject,
+          windowId: window.id,
+          timeoutId,
+        });
+
+        logger.debug(
+          `[ConfirmationManager] Confirmation popup opened: ${window.id} for request: ${requestId}`,
+        );
+      } catch (error) {
+        logger.error(
+          '[ConfirmationManager] Failed to open confirmation popup:',
+          error,
+        );
+        reject(error);
+      }
+    });
+  }
+
+  /**
+   * Handle confirmation response from the popup.
+   * Called when the popup sends a PLUGIN_CONFIRM_RESPONSE message.
+   *
+   * @param requestId - The request ID to match
+   * @param allowed - Whether the user allowed execution
+   */
+  handleConfirmationResponse(requestId: string, allowed: boolean): void {
+    const pending = this.pendingConfirmations.get(requestId);
+    if (!pending) {
+      logger.warn(
+        `[ConfirmationManager] No pending confirmation found for request: ${requestId}`,
+      );
+      return;
+    }
+
+    logger.debug(
+      `[ConfirmationManager] Received response for ${requestId}: ${allowed ? 'allowed' : 'denied'}`,
+    );
+
+    // Resolve the promise
+    pending.resolve(allowed);
+
+    // Close popup window if still open
+    if (pending.windowId) {
+      browser.windows.remove(pending.windowId).catch(() => {
+        // Ignore errors if window already closed
+      });
+    }
+
+    // Cleanup
+    this.cleanup(requestId);
+  }
+
+  /**
+   * Handle window removal event.
+   * If the confirmation popup is closed without a response, treat it as denial.
+   */
+  private handleWindowRemoved(windowId: number): void {
+    if (windowId !== this.currentPopupWindowId) {
+      return;
+    }
+
+    logger.debug('[ConfirmationManager] Confirmation popup window closed');
+
+    // Find and resolve any pending confirmation for this window
+    for (const [requestId, pending] of this.pendingConfirmations.entries()) {
+      if (pending.windowId === windowId) {
+        logger.debug(
+          `[ConfirmationManager] Treating window close as denial for request: ${requestId}`,
+        );
+        pending.resolve(false); // Treat close as denial
+        this.cleanup(requestId);
+        break;
+      }
+    }
+
+    this.currentPopupWindowId = null;
+  }
+
+  /**
+   * Build the popup URL with plugin info as query parameters.
+   */
+  private buildPopupUrl(
+    config: PluginConfig | null,
+    requestId: string,
+  ): string {
+    const baseUrl = browser.runtime.getURL('confirmPopup.html');
+    const params = new URLSearchParams();
+
+    params.set('requestId', requestId);
+
+    if (config) {
+      params.set('name', encodeURIComponent(config.name));
+      params.set('description', encodeURIComponent(config.description));
+
+      if (config.version) {
+        params.set('version', encodeURIComponent(config.version));
+      }
+
+      if (config.author) {
+        params.set('author', encodeURIComponent(config.author));
+      }
+
+      // Pass permission arrays as JSON
+      if (config.requests && config.requests.length > 0) {
+        params.set(
+          'requests',
+          encodeURIComponent(JSON.stringify(config.requests)),
+        );
+      }
+
+      if (config.urls && config.urls.length > 0) {
+        params.set('urls', encodeURIComponent(JSON.stringify(config.urls)));
+      }
+    }
+
+    return `${baseUrl}?${params.toString()}`;
+  }
+
+  /**
+   * Clean up a pending confirmation.
+   */
+  private cleanup(requestId: string): void {
+    const pending = this.pendingConfirmations.get(requestId);
+    if (pending?.timeoutId) {
+      clearTimeout(pending.timeoutId);
+    }
+    this.pendingConfirmations.delete(requestId);
+
+    if (this.pendingConfirmations.size === 0) {
+      this.currentPopupWindowId = null;
+    }
+  }
+
+  /**
+   * Check if there's a pending confirmation.
+   */
+  hasPendingConfirmation(): boolean {
+    return this.pendingConfirmations.size > 0;
+  }
+}
+
+// Export singleton instance
+export const confirmationManager = new ConfirmationManager();

packages/extension/src/background/WindowManager.ts

@@ -0,0 +1,608 @@
+/**
+ * WindowManager - Multi-window management for TLSNotary extension
+ *
+ * Manages multiple browser windows with request interception and overlay display.
+ * Each window maintains its own state, request history, and overlay visibility.
+ */
+
+import { v4 as uuidv4 } from 'uuid';
+import browser from 'webextension-polyfill';
+import type {
+  WindowRegistration,
+  InterceptedRequest,
+  ManagedWindow,
+  IWindowManager,
+  InterceptedRequestHeader,
+} from '../types/window-manager';
+import {
+  MAX_MANAGED_WINDOWS,
+  MAX_REQUESTS_PER_WINDOW,
+  OVERLAY_RETRY_DELAY_MS,
+  MAX_OVERLAY_RETRY_ATTEMPTS,
+} from '../constants/limits';
+import { logger } from '@tlsn/common';
+
+/**
+ * Helper function to convert ArrayBuffers to number arrays for JSON serialization
+ * This is needed because Chrome's webRequest API returns ArrayBuffers in requestBody.raw[].bytes
+ * which cannot be JSON stringified
+ */
+function convertArrayBuffersToArrays(obj: any): any {
+  // Handle null/undefined
+  if (obj == null) {
+    return obj;
+  }
+
+  // Check for ArrayBuffer
+  if (obj instanceof ArrayBuffer || obj.constructor?.name === 'ArrayBuffer') {
+    return Array.from(new Uint8Array(obj));
+  }
+
+  // Check for typed arrays (Uint8Array, Int8Array, etc.)
+  if (ArrayBuffer.isView(obj)) {
+    return Array.from(obj as any);
+  }
+
+  // Handle regular arrays
+  if (Array.isArray(obj)) {
+    return obj.map(convertArrayBuffersToArrays);
+  }
+
+  // Handle objects (but not Date, RegExp, etc.)
+  if (typeof obj === 'object' && obj.constructor === Object) {
+    const converted: any = {};
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        converted[key] = convertArrayBuffersToArrays(obj[key]);
+      }
+    }
+    return converted;
+  }
+
+  return obj;
+}
+
+/**
+ * WindowManager implementation
+ *
+ * Provides centralized management for multiple browser windows with:
+ * - Window lifecycle tracking (create, lookup, close)
+ * - Request interception per window
+ * - Overlay visibility control
+ * - Automatic cleanup of closed windows
+ */
+export class WindowManager implements IWindowManager {
+  /**
+   * Internal storage for managed windows
+   * Key: Chrome window ID
+   * Value: ManagedWindow object
+   */
+  private windows: Map<number, ManagedWindow> = new Map();
+  /**
+   * Register a new window with the manager
+   *
+   * Creates a ManagedWindow object with UUID, initializes request tracking,
+   * and optionally shows the TLSN overlay.
+   *
+   * @param config - Window registration configuration
+   * @returns Promise resolving to the created ManagedWindow
+   *
+   * @example
+   * ```typescript
+   * const window = await windowManager.registerWindow({
+   *   id: 123,
+   *   tabId: 456,
+   *   url: 'https://example.com',
+   *   showOverlay: true
+   * });
+   * ```
+   */
+  async registerWindow(config: WindowRegistration): Promise<ManagedWindow> {
+    // Check maximum window limit
+    if (this.windows.size >= MAX_MANAGED_WINDOWS) {
+      const error = `Maximum window limit reached (${MAX_MANAGED_WINDOWS}). Currently managing ${this.windows.size} windows. Please close some windows before opening new ones.`;
+      logger.error(`[WindowManager] ${error}`);
+      throw new Error(error);
+    }
+
+    const managedWindow: ManagedWindow = {
+      id: config.id,
+      uuid: uuidv4(),
+      tabId: config.tabId,
+      url: config.url,
+      createdAt: new Date(),
+      requests: [],
+      headers: [],
+      overlayVisible: false,
+      pluginUIVisible: false,
+      showOverlayWhenReady: config.showOverlay !== false, // Default: true
+    };
+
+    this.windows.set(config.id, managedWindow);
+
+    logger.debug(
+      `[WindowManager] Window registered: ${managedWindow.uuid} (ID: ${managedWindow.id}, Tab: ${managedWindow.tabId}, showOverlayWhenReady: ${managedWindow.showOverlayWhenReady}) [${this.windows.size}/${MAX_MANAGED_WINDOWS}]`,
+    );
+
+    return managedWindow;
+  }
+
+  /**
+   * Close and cleanup a window
+   *
+   * Hides the overlay if visible and removes the window from tracking.
+   * Does nothing if the window is not found.
+   *
+   * @param windowId - Chrome window ID
+   *
+   * @example
+   * ```typescript
+   * await windowManager.closeWindow(123);
+   * ```
+   */
+  async closeWindow(windowId: number): Promise<void> {
+    const window = this.windows.get(windowId);
+    if (!window) {
+      logger.warn(
+        `[WindowManager] Attempted to close non-existent window: ${windowId}`,
+      );
+      return;
+    }
+
+    // Hide overlay before closing
+    if (window.overlayVisible) {
+      await this.hideOverlay(windowId).catch((error) => {
+        logger.warn(
+          `[WindowManager] Failed to hide overlay for window ${windowId}:`,
+          error,
+        );
+      });
+    }
+
+    // Remove from tracking
+    this.windows.delete(windowId);
+
+    browser.windows.remove(windowId);
+
+    browser.runtime.sendMessage({
+      type: 'WINDOW_CLOSED',
+      windowId,
+    });
+
+    logger.debug(
+      `[WindowManager] Window closed: ${window.uuid} (ID: ${window.id})`,
+    );
+  }
+
+  /**
+   * Get a managed window by ID
+   *
+   * @param windowId - Chrome window ID
+   * @returns The ManagedWindow or undefined if not found
+   *
+   * @example
+   * ```typescript
+   * const window = windowManager.getWindow(123);
+   * if (window) {
+   *   logger.debug(`Window has ${window.requests.length} requests`);
+   * }
+   * ```
+   */
+  getWindow(windowId: number): ManagedWindow | undefined {
+    return this.windows.get(windowId);
+  }
+
+  /**
+   * Get a managed window by tab ID
+   *
+   * Searches through all windows to find one containing the specified tab.
+   * Useful for webRequest listeners that only provide tab IDs.
+   *
+   * @param tabId - Chrome tab ID
+   * @returns The ManagedWindow or undefined if not found
+   *
+   * @example
+   * ```typescript
+   * const window = windowManager.getWindowByTabId(456);
+   * if (window) {
+   *   windowManager.addRequest(window.id, request);
+   * }
+   * ```
+   */
+  getWindowByTabId(tabId: number): ManagedWindow | undefined {
+    for (const window of this.windows.values()) {
+      if (window.tabId === tabId) {
+        return window;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Get all managed windows
+   *
+   * @returns Map of window IDs to ManagedWindow objects (copy)
+   *
+   * @example
+   * ```typescript
+   * const allWindows = windowManager.getAllWindows();
+   * logger.debug(`Managing ${allWindows.size} windows`);
+   * ```
+   */
+  getAllWindows(): Map<number, ManagedWindow> {
+    return new Map(this.windows);
+  }
+
+  /**
+   * Add an intercepted request to a window
+   *
+   * Appends the request to the window's request array and updates the overlay
+   * if it's currently visible. Logs an error if the window is not found.
+   *
+   * @param windowId - Chrome window ID
+   * @param request - The intercepted request to add
+   *
+   * @example
+   * ```typescript
+   * windowManager.addRequest(123, {
+   *   id: 'req-456',
+   *   method: 'GET',
+   *   url: 'https://example.com/api/data',
+   *   timestamp: Date.now(),
+   *   tabId: 456
+   * });
+   * ```
+   */
+  addRequest(windowId: number, request: InterceptedRequest): void {
+    const window = this.windows.get(windowId);
+    if (!window) {
+      logger.error(
+        `[WindowManager] Cannot add request to non-existent window: ${windowId}`,
+      );
+      return;
+    }
+
+    // Add timestamp if not provided
+    if (!request.timestamp) {
+      request.timestamp = Date.now();
+    }
+
+    // Convert ArrayBuffers to number arrays for JSON serialization
+    const convertedRequest = convertArrayBuffersToArrays(
+      request,
+    ) as InterceptedRequest;
+
+    window.requests.push(convertedRequest);
+
+    browser.runtime.sendMessage({
+      type: 'REQUEST_INTERCEPTED',
+      request: convertedRequest,
+      windowId,
+    });
+
+    // Update overlay if visible
+    if (window.overlayVisible) {
+      this.updateOverlay(windowId).catch((error) => {
+        logger.warn(
+          `[WindowManager] Failed to update overlay for window ${windowId}:`,
+          error,
+        );
+      });
+    }
+
+    // Enforce request limit per window to prevent unbounded memory growth
+    if (window.requests.length > MAX_REQUESTS_PER_WINDOW) {
+      const removed = window.requests.length - MAX_REQUESTS_PER_WINDOW;
+      window.requests.splice(0, removed);
+      logger.warn(
+        `[WindowManager] Request limit reached for window ${windowId}. Removed ${removed} oldest request(s). Current: ${window.requests.length}/${MAX_REQUESTS_PER_WINDOW}`,
+      );
+    }
+  }
+
+  reRenderPluginUI(windowId: number): void {
+    const window = this.windows.get(windowId);
+    if (!window) {
+      logger.error(
+        `[WindowManager] Cannot re-render plugin UI for non-existent window: ${windowId}`,
+      );
+      return;
+    }
+    browser.runtime.sendMessage({
+      type: 'RE_RENDER_PLUGIN_UI',
+      windowId,
+    });
+  }
+
+  addHeader(windowId: number, header: InterceptedRequestHeader): void {
+    const window = this.windows.get(windowId);
+    if (!window) {
+      logger.error(
+        `[WindowManager] Cannot add header to non-existent window: ${windowId}`,
+      );
+      return;
+    }
+
+    window.headers.push(header);
+
+    browser.runtime.sendMessage({
+      type: 'HEADER_INTERCEPTED',
+      header,
+      windowId,
+    });
+
+    // Enforce request limit per window to prevent unbounded memory growth
+    if (window.headers.length > MAX_REQUESTS_PER_WINDOW) {
+      const removed = window.headers.length - MAX_REQUESTS_PER_WINDOW;
+      window.headers.splice(0, removed);
+      logger.warn(
+        `[WindowManager] Header limit reached for window ${windowId}. Removed ${removed} oldest request(s). Current: ${window.headers.length}/${MAX_REQUESTS_PER_WINDOW}`,
+      );
+    }
+  }
+
+  /**
+   * Get all requests for a window
+   *
+   * @param windowId - Chrome window ID
+   * @returns Array of intercepted requests (empty array if window not found)
+   *
+   * @example
+   * ```typescript
+   * const requests = windowManager.getWindowRequests(123);
+   * logger.debug(`Window has ${requests.length} requests`);
+   * ```
+   */
+  getWindowRequests(windowId: number): InterceptedRequest[] {
+    const window = this.windows.get(windowId);
+    return window?.requests || [];
+  }
+
+  getWindowHeaders(windowId: number): InterceptedRequestHeader[] {
+    const window = this.windows.get(windowId);
+    return window?.headers || [];
+  }
+
+  async showPluginUI(
+    windowId: number,
+    json: any,
+    retryCount = 0,
+  ): Promise<void> {
+    const window = this.windows.get(windowId);
+    if (!window) {
+      logger.error(
+        `[WindowManager] Cannot show plugin UI for non-existent window: ${windowId}`,
+      );
+      return;
+    }
+
+    try {
+      await browser.tabs.sendMessage(window.tabId, {
+        type: 'RENDER_PLUGIN_UI',
+        json,
+        windowId,
+      });
+
+      window.pluginUIVisible = true;
+      logger.debug(`[WindowManager] Plugin UI shown for window ${windowId}`);
+    } catch (error) {
+      // Retry if content script not ready
+      if (retryCount < MAX_OVERLAY_RETRY_ATTEMPTS) {
+        logger.debug(
+          `[WindowManager] Plugin UI display failed for window ${windowId}, retry ${retryCount + 1}/${MAX_OVERLAY_RETRY_ATTEMPTS} in ${OVERLAY_RETRY_DELAY_MS}ms`,
+        );
+
+        // Wait and retry
+        await new Promise((resolve) =>
+          setTimeout(resolve, OVERLAY_RETRY_DELAY_MS),
+        );
+
+        // Check if window still exists before retrying
+        if (this.windows.has(windowId)) {
+          return this.showOverlay(windowId, retryCount + 1);
+        } else {
+          logger.warn(
+            `[WindowManager] Window ${windowId} closed during retry, aborting plugin UI display`,
+          );
+        }
+      } else {
+        logger.warn(
+          `[WindowManager] Failed to show plugin UI for window ${windowId} after ${MAX_OVERLAY_RETRY_ATTEMPTS} attempts:`,
+          error,
+        );
+      }
+    }
+  }
+
+  /**
+   * Show the TLSN overlay in a window
+   *
+   * Sends a message to the content script to display the overlay with
+   * the current list of intercepted requests. Catches and logs errors
+   * if the content script is not ready.
+   *
+   * @param windowId - Chrome window ID
+   *
+   * @example
+   * ```typescript
+   * await windowManager.showOverlay(123);
+   * ```
+   */
+  async showOverlay(windowId: number, retryCount = 0): Promise<void> {
+    const window = this.windows.get(windowId);
+    if (!window) {
+      logger.error(
+        `[WindowManager] Cannot show overlay for non-existent window: ${windowId}`,
+      );
+      return;
+    }
+
+    try {
+      await browser.tabs.sendMessage(window.tabId, {
+        type: 'SHOW_TLSN_OVERLAY',
+        requests: window.requests,
+      });
+
+      window.overlayVisible = true;
+      window.showOverlayWhenReady = false; // Clear the pending flag
+      logger.debug(`[WindowManager] Overlay shown for window ${windowId}`);
+    } catch (error) {
+      // Retry if content script not ready
+      if (retryCount < MAX_OVERLAY_RETRY_ATTEMPTS) {
+        logger.debug(
+          `[WindowManager] Overlay display failed for window ${windowId}, retry ${retryCount + 1}/${MAX_OVERLAY_RETRY_ATTEMPTS} in ${OVERLAY_RETRY_DELAY_MS}ms`,
+        );
+
+        // Wait and retry
+        await new Promise((resolve) =>
+          setTimeout(resolve, OVERLAY_RETRY_DELAY_MS),
+        );
+
+        // Check if window still exists before retrying
+        if (this.windows.has(windowId)) {
+          return this.showOverlay(windowId, retryCount + 1);
+        } else {
+          logger.warn(
+            `[WindowManager] Window ${windowId} closed during retry, aborting overlay display`,
+          );
+        }
+      } else {
+        logger.warn(
+          `[WindowManager] Failed to show overlay for window ${windowId} after ${MAX_OVERLAY_RETRY_ATTEMPTS} attempts:`,
+          error,
+        );
+        // Keep showOverlayWhenReady=true so tabs.onUpdated can try again
+      }
+    }
+  }
+
+  /**
+   * Hide the TLSN overlay in a window
+   *
+   * Sends a message to the content script to remove the overlay.
+   * Catches and logs errors if the content script is not available.
+   *
+   * @param windowId - Chrome window ID
+   *
+   * @example
+   * ```typescript
+   * await windowManager.hideOverlay(123);
+   * ```
+   */
+  async hideOverlay(windowId: number): Promise<void> {
+    const window = this.windows.get(windowId);
+    if (!window) {
+      logger.error(
+        `[WindowManager] Cannot hide overlay for non-existent window: ${windowId}`,
+      );
+      return;
+    }
+
+    try {
+      await browser.tabs.sendMessage(window.tabId, {
+        type: 'HIDE_TLSN_OVERLAY',
+      });
+
+      window.overlayVisible = false;
+      logger.debug(`[WindowManager] Overlay hidden for window ${windowId}`);
+    } catch (error) {
+      logger.warn(
+        `[WindowManager] Failed to hide overlay for window ${windowId}:`,
+        error,
+      );
+      // Don't throw - window may already be closed
+    }
+  }
+
+  /**
+   * Check if overlay is visible in a window
+   *
+   * @param windowId - Chrome window ID
+   * @returns true if overlay is visible, false otherwise
+   *
+   * @example
+   * ```typescript
+   * if (windowManager.isOverlayVisible(123)) {
+   *   logger.debug('Overlay is currently displayed');
+   * }
+   * ```
+   */
+  isOverlayVisible(windowId: number): boolean {
+    const window = this.windows.get(windowId);
+    return window?.overlayVisible || false;
+  }
+
+  /**
+   * Update overlay with current requests (private helper)
+   *
+   * Sends an UPDATE_TLSN_REQUESTS message to the content script.
+   *
+   * @param windowId - Chrome window ID
+   */
+  private async updateOverlay(windowId: number): Promise<void> {
+    const window = this.windows.get(windowId);
+    if (!window || !window.overlayVisible) {
+      return;
+    }
+
+    try {
+      await browser.tabs.sendMessage(window.tabId, {
+        type: 'UPDATE_TLSN_REQUESTS',
+        requests: window.requests,
+      });
+
+      logger.debug(
+        `[WindowManager] Overlay updated for window ${windowId} with ${window.requests.length} requests`,
+      );
+    } catch (error) {
+      logger.warn(
+        `[WindowManager] Failed to update overlay for window ${windowId}:`,
+        error,
+      );
+    }
+  }
+
+  /**
+   * Cleanup windows that are no longer valid
+   *
+   * Iterates through all tracked windows and removes any that have been
+   * closed in the browser. This prevents memory leaks and stale state.
+   *
+   * Should be called periodically (e.g., every minute) or when handling
+   * window events.
+   *
+   * @example
+   * ```typescript
+   * // Run cleanup every minute
+   * setInterval(() => {
+   *   windowManager.cleanupInvalidWindows();
+   * }, 60000);
+   * ```
+   */
+  async cleanupInvalidWindows(): Promise<void> {
+    const windowIds = Array.from(this.windows.keys());
+    let cleanedCount = 0;
+
+    for (const windowId of windowIds) {
+      try {
+        // Check if window still exists in browser
+        await browser.windows.get(windowId);
+      } catch (error) {
+        // Window no longer exists, clean it up
+        const window = this.windows.get(windowId);
+        this.windows.delete(windowId);
+        cleanedCount++;
+
+        logger.debug(
+          `[WindowManager] Cleaned up invalid window: ${window?.uuid} (ID: ${windowId})`,
+        );
+      }
+    }
+
+    if (cleanedCount > 0) {
+      logger.debug(
+        `[WindowManager] Cleanup complete: ${cleanedCount} window(s) removed`,
+      );
+    }
+  }
+}

packages/extension/src/constants/limits.ts

@@ -0,0 +1,65 @@
+/**
+ * Resource limits and constraints for the TLSN extension
+ *
+ * These limits prevent resource exhaustion and ensure good performance.
+ */
+
+/**
+ * Maximum number of managed windows that can be open simultaneously
+ *
+ * This prevents memory exhaustion from opening too many windows.
+ * Each window tracks its own requests and overlay state.
+ *
+ * @default 10
+ */
+export const MAX_MANAGED_WINDOWS = 10;
+
+/**
+ * Maximum number of requests to store per window
+ *
+ * Prevents unbounded memory growth from high-traffic sites.
+ * Older requests are removed when limit is reached.
+ *
+ * @default 1000
+ */
+export const MAX_REQUESTS_PER_WINDOW = 1000;
+
+/**
+ * Timeout for overlay display attempts (milliseconds)
+ *
+ * If overlay cannot be shown within this timeout, stop retrying.
+ * This prevents infinite retry loops if content script never loads.
+ *
+ * @default 5000 (5 seconds)
+ */
+export const OVERLAY_DISPLAY_TIMEOUT_MS = 5000;
+
+/**
+ * Retry delay for overlay display (milliseconds)
+ *
+ * Time to wait between retry attempts when content script isn't ready.
+ *
+ * @default 500 (0.5 seconds)
+ */
+export const OVERLAY_RETRY_DELAY_MS = 500;
+
+/**
+ * Maximum number of retry attempts for overlay display
+ *
+ * Calculated as OVERLAY_DISPLAY_TIMEOUT_MS / OVERLAY_RETRY_DELAY_MS
+ *
+ * @default 10 (5000ms / 500ms)
+ */
+export const MAX_OVERLAY_RETRY_ATTEMPTS = Math.floor(
+  OVERLAY_DISPLAY_TIMEOUT_MS / OVERLAY_RETRY_DELAY_MS,
+);
+
+/**
+ * Interval for periodic cleanup of invalid windows (milliseconds)
+ *
+ * WindowManager periodically checks for windows that have been closed
+ * and removes them from tracking.
+ *
+ * @default 300000 (5 minutes)
+ */
+export const CLEANUP_INTERVAL_MS = 5 * 60 * 1000;

packages/extension/src/constants/messages.ts

@@ -0,0 +1,139 @@
+/**
+ * Message type constants for extension communication
+ *
+ * Defines all message types used for communication between:
+ * - Page scripts → Content scripts → Background script
+ * - Background script → Content scripts
+ */
+
+/**
+ * Legacy message types (from existing implementation)
+ */
+export const PING = 'PING';
+export const PONG = 'PONG';
+export const CONTENT_SCRIPT_READY = 'CONTENT_SCRIPT_READY';
+export const GET_PAGE_INFO = 'GET_PAGE_INFO';
+
+/**
+ * TLSN Content Script Messages (legacy)
+ */
+export const TLSN_CONTENT_SCRIPT_MESSAGE = 'TLSN_CONTENT_SCRIPT_MESSAGE';
+export const TLSN_CONTENT_TO_EXTENSION = 'TLSN_CONTENT_TO_EXTENSION';
+
+/**
+ * Window Management Messages
+ */
+
+/**
+ * Sent from content script to background to request opening a new window
+ *
+ * Payload: { url: string, width?: number, height?: number, showOverlay?: boolean }
+ */
+export const OPEN_WINDOW = 'OPEN_WINDOW';
+
+/**
+ * Response from background when window is successfully opened
+ *
+ * Payload: { windowId: number, uuid: string, tabId: number }
+ */
+export const WINDOW_OPENED = 'WINDOW_OPENED';
+
+/**
+ * Response from background when window opening fails
+ *
+ * Payload: { error: string, details?: string }
+ */
+export const WINDOW_ERROR = 'WINDOW_ERROR';
+
+/**
+ * Overlay Control Messages
+ */
+
+/**
+ * Sent from background to content script to show TLSN overlay
+ *
+ * Payload: { requests: InterceptedRequest[] }
+ */
+export const SHOW_TLSN_OVERLAY = 'SHOW_TLSN_OVERLAY';
+
+/**
+ * Sent from background to content script to update overlay with new requests
+ *
+ * Payload: { requests: InterceptedRequest[] }
+ */
+export const UPDATE_TLSN_REQUESTS = 'UPDATE_TLSN_REQUESTS';
+
+/**
+ * Sent from background to content script to hide TLSN overlay
+ *
+ * Payload: none
+ */
+export const HIDE_TLSN_OVERLAY = 'HIDE_TLSN_OVERLAY';
+
+/**
+ * Type definitions for message payloads
+ */
+
+export interface OpenWindowPayload {
+  url: string;
+  width?: number;
+  height?: number;
+  showOverlay?: boolean;
+}
+
+export interface WindowOpenedPayload {
+  windowId: number;
+  uuid: string;
+  tabId: number;
+}
+
+export interface WindowErrorPayload {
+  error: string;
+  details?: string;
+}
+
+export interface OverlayRequestsPayload {
+  requests: Array<{
+    id: string;
+    method: string;
+    url: string;
+    timestamp: number;
+    tabId: number;
+  }>;
+}
+
+/**
+ * Message wrapper types
+ */
+
+export interface OpenWindowMessage {
+  type: typeof OPEN_WINDOW;
+  url: string;
+  width?: number;
+  height?: number;
+  showOverlay?: boolean;
+}
+
+export interface WindowOpenedMessage {
+  type: typeof WINDOW_OPENED;
+  payload: WindowOpenedPayload;
+}
+
+export interface WindowErrorMessage {
+  type: typeof WINDOW_ERROR;
+  payload: WindowErrorPayload;
+}
+
+export interface ShowOverlayMessage {
+  type: typeof SHOW_TLSN_OVERLAY;
+  requests: OverlayRequestsPayload['requests'];
+}
+
+export interface UpdateOverlayMessage {
+  type: typeof UPDATE_TLSN_REQUESTS;
+  requests: OverlayRequestsPayload['requests'];
+}
+
+export interface HideOverlayMessage {
+  type: typeof HIDE_TLSN_OVERLAY;
+}

packages/extension/src/empty-module.js

@@ -0,0 +1,2 @@
+// Empty module for browser compatibility
+export default {};

packages/extension/src/entries/Background/index.ts

@@ -0,0 +1,463 @@
+import browser from 'webextension-polyfill';
+import { WindowManager } from '../../background/WindowManager';
+import { confirmationManager } from '../../background/ConfirmationManager';
+import type { PluginConfig } from '@tlsn/plugin-sdk/src/types';
+import type {
+  InterceptedRequest,
+  InterceptedRequestHeader,
+} from '../../types/window-manager';
+import { validateUrl } from '../../utils/url-validator';
+import { logger } from '@tlsn/common';
+import { getStoredLogLevel } from '../../utils/logLevelStorage';
+
+const chrome = global.chrome as any;
+
+// Initialize logger with stored log level
+getStoredLogLevel().then((level) => {
+  logger.init(level);
+  logger.info('Background script loaded');
+});
+
+// Initialize WindowManager for multi-window support
+const windowManager = new WindowManager();
+
+// Create context menu for Developer Console - only for extension icon
+browser.contextMenus.create({
+  id: 'developer-console',
+  title: 'Developer Console',
+  contexts: ['action'],
+});
+
+// Handle context menu clicks
+browser.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === 'developer-console') {
+    // Open Developer Console
+    browser.tabs.create({
+      url: browser.runtime.getURL('devConsole.html'),
+    });
+  }
+});
+
+// Handle extension install/update
+browser.runtime.onInstalled.addListener((details) => {
+  logger.info('Extension installed/updated:', details.reason);
+});
+
+// Set up webRequest listener to intercept all requests
+browser.webRequest.onBeforeRequest.addListener(
+  (details) => {
+    // Check if this tab belongs to a managed window
+    const managedWindow = windowManager.getWindowByTabId(details.tabId);
+
+    if (managedWindow && details.tabId !== undefined) {
+      const request: InterceptedRequest = {
+        id: `${details.requestId}`,
+        method: details.method,
+        url: details.url,
+        timestamp: Date.now(),
+        tabId: details.tabId,
+        requestBody: details.requestBody,
+      };
+
+      // if (details.requestBody) {
+      //   console.log(details.requestBody);
+      // }
+
+      // Add request to window's request history
+      windowManager.addRequest(managedWindow.id, request);
+    }
+  },
+  { urls: ['<all_urls>'] },
+  ['requestBody', 'extraHeaders'],
+);
+
+browser.webRequest.onBeforeSendHeaders.addListener(
+  (details) => {
+    // Check if this tab belongs to a managed window
+    const managedWindow = windowManager.getWindowByTabId(details.tabId);
+
+    if (managedWindow && details.tabId !== undefined) {
+      const header: InterceptedRequestHeader = {
+        id: `${details.requestId}`,
+        method: details.method,
+        url: details.url,
+        timestamp: details.timeStamp,
+        type: details.type,
+        requestHeaders: details.requestHeaders || [],
+        tabId: details.tabId,
+      };
+
+      // Add request to window's request history
+      windowManager.addHeader(managedWindow.id, header);
+    }
+  },
+  { urls: ['<all_urls>'] },
+  ['requestHeaders', 'extraHeaders'],
+);
+
+// Listen for window removal
+browser.windows.onRemoved.addListener(async (windowId) => {
+  const managedWindow = windowManager.getWindow(windowId);
+  if (managedWindow) {
+    logger.debug(
+      `Managed window closed: ${managedWindow.uuid} (ID: ${windowId})`,
+    );
+    await windowManager.closeWindow(windowId);
+  }
+});
+
+// Listen for tab updates to show overlay when tab is ready (Task 3.4)
+browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+  // Only act when tab becomes complete
+  if (changeInfo.status !== 'complete') {
+    return;
+  }
+
+  // Check if this tab belongs to a managed window
+  const managedWindow = windowManager.getWindowByTabId(tabId);
+  if (!managedWindow) {
+    return;
+  }
+
+  // If overlay should be shown but isn't visible yet, show it now
+  if (managedWindow.showOverlayWhenReady && !managedWindow.overlayVisible) {
+    logger.debug(
+      `Tab ${tabId} complete, showing overlay for window ${managedWindow.id}`,
+    );
+    await windowManager.showOverlay(managedWindow.id);
+  }
+});
+
+// Basic message handler
+browser.runtime.onMessage.addListener((request, sender, sendResponse: any) => {
+  logger.debug('Message received:', request.type);
+
+  if (request.type === 'CONTENT_SCRIPT_READY') {
+    if (!sender.tab?.windowId) {
+      return;
+    }
+    windowManager.reRenderPluginUI(sender.tab.windowId as number);
+    return true;
+  }
+
+  // Example response
+  if (request.type === 'PING') {
+    sendResponse({ type: 'PONG' });
+    return true;
+  }
+
+  if (request.type === 'RENDER_PLUGIN_UI') {
+    logger.debug(
+      'RENDER_PLUGIN_UI request received:',
+      request.json,
+      request.windowId,
+    );
+    windowManager.showPluginUI(request.windowId, request.json);
+    return true;
+  }
+
+  // Handle plugin confirmation responses from popup
+  if (request.type === 'PLUGIN_CONFIRM_RESPONSE') {
+    logger.debug('PLUGIN_CONFIRM_RESPONSE received:', request);
+    confirmationManager.handleConfirmationResponse(
+      request.requestId,
+      request.allowed,
+    );
+    return true;
+  }
+
+  // Handle code execution requests
+  if (request.type === 'EXEC_CODE') {
+    logger.debug('EXEC_CODE request received');
+
+    (async () => {
+      try {
+        // Step 1: Extract plugin config for confirmation (via offscreen QuickJS)
+        let pluginConfig: PluginConfig | null = null;
+        try {
+          pluginConfig = await extractConfigViaOffscreen(request.code);
+          logger.debug('Extracted plugin config:', pluginConfig);
+        } catch (extractError) {
+          logger.warn('Failed to extract plugin config:', extractError);
+          // Continue with null config - user will see "Unknown Plugin" warning
+        }
+
+        // Step 2: Request user confirmation
+        const confirmRequestId = `confirm_${Date.now()}_${Math.random()}`;
+        let userAllowed: boolean;
+
+        try {
+          userAllowed = await confirmationManager.requestConfirmation(
+            pluginConfig,
+            confirmRequestId,
+          );
+        } catch (confirmError) {
+          logger.error('Confirmation error:', confirmError);
+          sendResponse({
+            success: false,
+            error:
+              confirmError instanceof Error
+                ? confirmError.message
+                : 'Confirmation failed',
+          });
+          return;
+        }
+
+        // Step 3: If user denied, return rejection error
+        if (!userAllowed) {
+          logger.info('User rejected plugin execution');
+          sendResponse({
+            success: false,
+            error: 'User rejected plugin execution',
+          });
+          return;
+        }
+
+        // Step 4: User allowed - proceed with execution
+        logger.info('User allowed plugin execution, proceeding...');
+
+        // Ensure offscreen document exists
+        await createOffscreenDocument();
+
+        // Forward to offscreen document
+        const response = await chrome.runtime.sendMessage({
+          type: 'EXEC_CODE_OFFSCREEN',
+          code: request.code,
+          requestId: request.requestId,
+        });
+        logger.debug('EXEC_CODE_OFFSCREEN response:', response);
+        sendResponse(response);
+      } catch (error) {
+        logger.error('Error executing code:', error);
+        sendResponse({
+          success: false,
+          error:
+            error instanceof Error ? error.message : 'Code execution failed',
+        });
+      }
+    })();
+
+    return true; // Keep message channel open for async response
+  }
+
+  // Handle CLOSE_WINDOW requests
+  if (request.type === 'CLOSE_WINDOW') {
+    logger.debug('CLOSE_WINDOW request received:', request.windowId);
+
+    if (!request.windowId) {
+      logger.error('No windowId provided');
+      sendResponse({
+        type: 'WINDOW_ERROR',
+        payload: {
+          error: 'No windowId provided',
+          details: 'windowId is required to close a window',
+        },
+      });
+      return true;
+    }
+
+    // Close the window using WindowManager
+    windowManager
+      .closeWindow(request.windowId)
+      .then(() => {
+        logger.debug(`Window ${request.windowId} closed`);
+        sendResponse({
+          type: 'WINDOW_CLOSED',
+          payload: {
+            windowId: request.windowId,
+          },
+        });
+      })
+      .catch((error) => {
+        logger.error('Error closing window:', error);
+        sendResponse({
+          type: 'WINDOW_ERROR',
+          payload: {
+            error: 'Failed to close window',
+            details: String(error),
+          },
+        });
+      });
+
+    return true; // Keep message channel open for async response
+  }
+
+  // Handle OPEN_WINDOW requests from content scripts
+  if (request.type === 'OPEN_WINDOW') {
+    logger.debug('OPEN_WINDOW request received:', request.url);
+
+    // Validate URL using comprehensive validator
+    const urlValidation = validateUrl(request.url);
+    if (!urlValidation.valid) {
+      logger.error('URL validation failed:', urlValidation.error);
+      sendResponse({
+        type: 'WINDOW_ERROR',
+        payload: {
+          error: 'Invalid URL',
+          details: urlValidation.error || 'URL validation failed',
+        },
+      });
+      return true;
+    }
+
+    // Open a new window with the requested URL
+    browser.windows
+      .create({
+        url: request.url,
+        type: 'popup',
+        width: request.width || 900,
+        height: request.height || 700,
+      })
+      .then(async (window) => {
+        if (
+          !window.id ||
+          !window.tabs ||
+          !window.tabs[0] ||
+          !window.tabs[0].id
+        ) {
+          throw new Error('Failed to create window or get tab ID');
+        }
+
+        const windowId = window.id;
+        const tabId = window.tabs[0].id;
+
+        logger.info(`Window created: ${windowId}, Tab: ${tabId}`);
+
+        try {
+          // Register window with WindowManager
+          const managedWindow = await windowManager.registerWindow({
+            id: windowId,
+            tabId: tabId,
+            url: request.url,
+            showOverlay: request.showOverlay !== false, // Default to true
+          });
+
+          logger.debug(`Window registered: ${managedWindow.uuid}`);
+
+          // Send success response
+          sendResponse({
+            type: 'WINDOW_OPENED',
+            payload: {
+              windowId: managedWindow.id,
+              uuid: managedWindow.uuid,
+              tabId: managedWindow.tabId,
+            },
+          });
+        } catch (registrationError) {
+          // Registration failed (e.g., window limit exceeded)
+          // Close the window we just created
+          logger.error('Window registration failed:', registrationError);
+          await browser.windows.remove(windowId).catch(() => {
+            // Ignore errors if window already closed
+          });
+
+          sendResponse({
+            type: 'WINDOW_ERROR',
+            payload: {
+              error: 'Window registration failed',
+              details: String(registrationError),
+            },
+          });
+        }
+      })
+      .catch((error) => {
+        logger.error('Error creating window:', error);
+        sendResponse({
+          type: 'WINDOW_ERROR',
+          payload: {
+            error: 'Failed to create window',
+            details: String(error),
+          },
+        });
+      });
+
+    return true; // Keep message channel open for async response
+  }
+
+  if (request.type === 'TO_BG_RE_RENDER_PLUGIN_UI') {
+    windowManager.reRenderPluginUI(request.windowId);
+    return;
+  }
+
+  return true; // Keep message channel open for async response
+});
+
+// Create offscreen document if needed (Chrome 109+)
+async function createOffscreenDocument() {
+  // Check if we're in a Chrome environment that supports offscreen documents
+  if (!chrome?.offscreen) {
+    logger.debug('Offscreen API not available');
+    return;
+  }
+
+  const offscreenUrl = browser.runtime.getURL('offscreen.html');
+
+  // Check if offscreen document already exists
+  const existingContexts = await chrome.runtime.getContexts({
+    contextTypes: ['OFFSCREEN_DOCUMENT'],
+    documentUrls: [offscreenUrl],
+  });
+
+  if (existingContexts.length > 0) {
+    return;
+  }
+
+  // Create offscreen document
+  await chrome.offscreen.createDocument({
+    url: 'offscreen.html',
+    reasons: ['DOM_SCRAPING'],
+    justification: 'Offscreen document for background processing',
+  });
+}
+
+// Initialize offscreen document
+createOffscreenDocument().catch((err) =>
+  logger.error('Offscreen document error:', err),
+);
+
+/**
+ * Extract plugin config by sending code to offscreen document where QuickJS runs.
+ * This is more reliable than regex-based extraction.
+ */
+async function extractConfigViaOffscreen(
+  code: string,
+): Promise<PluginConfig | null> {
+  try {
+    // Ensure offscreen document exists
+    await createOffscreenDocument();
+
+    // Send message to offscreen and wait for response
+    const response = await chrome.runtime.sendMessage({
+      type: 'EXTRACT_CONFIG',
+      code,
+    });
+
+    if (response?.success && response.config) {
+      return response.config as PluginConfig;
+    }
+
+    logger.warn('Config extraction returned no config:', response?.error);
+    return null;
+  } catch (error) {
+    logger.error('Failed to extract config via offscreen:', error);
+    return null;
+  }
+}
+
+// Periodic cleanup of invalid windows (every 5 minutes)
+const CLEANUP_INTERVAL_MS = 5 * 60 * 1000; // 5 minutes
+setInterval(() => {
+  logger.debug('Running periodic window cleanup...');
+  windowManager.cleanupInvalidWindows().catch((error) => {
+    logger.error('Error during cleanup:', error);
+  });
+}, CLEANUP_INTERVAL_MS);
+
+// Run initial cleanup after 10 seconds
+setTimeout(() => {
+  windowManager.cleanupInvalidWindows().catch((error) => {
+    logger.error('Error during initial cleanup:', error);
+  });
+}, 10000);
+
+export {};

packages/extension/src/entries/ConfirmPopup/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Plugin Confirmation</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

packages/extension/src/entries/ConfirmPopup/index.scss

@@ -0,0 +1,391 @@
+// Confirmation Popup Styles
+// Size: 600x550 pixels
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 600px;
+  height: 550px;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  color: #e8e8e8;
+  overflow: hidden;
+}
+
+.confirm-popup {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 24px;
+  animation: fadeIn 0.2s ease-out;
+
+  &--loading {
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &--error {
+    .confirm-popup__content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+
+    h1 {
+      font-size: 20px;
+      font-weight: 600;
+      color: #ffffff;
+    }
+  }
+
+  &__icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ffffff;
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &__field {
+    margin-bottom: 16px;
+
+    label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: #8b8b9a;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 6px;
+    }
+
+    &--inline {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
+
+      label {
+        margin-bottom: 0;
+        min-width: 60px;
+      }
+
+      .confirm-popup__value {
+        margin: 0;
+      }
+    }
+  }
+
+  &__value {
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 1.5;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 10px 14px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+
+    &--description {
+      min-height: 60px;
+      max-height: 100px;
+      overflow-y: auto;
+    }
+
+    &--warning {
+      border-color: rgba(255, 193, 7, 0.5);
+      background: rgba(255, 193, 7, 0.1);
+      color: #ffc107;
+    }
+  }
+
+  &__warning {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px;
+    background: rgba(255, 193, 7, 0.1);
+    border: 1px solid rgba(255, 193, 7, 0.3);
+    border-radius: 8px;
+    margin-top: 12px;
+
+    p {
+      font-size: 13px;
+      line-height: 1.4;
+      color: #ffc107;
+    }
+  }
+
+  &__warning-icon {
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    border-radius: 50%;
+    background: #ffc107;
+    color: #1a1a2e;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  // Permissions Section
+  &__permissions {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__permissions-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    margin-bottom: 12px;
+  }
+
+  &__permission-group {
+    margin-bottom: 12px;
+
+    label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #8b8b9a;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+  }
+
+  &__permission-icon {
+    font-size: 14px;
+  }
+
+  &__permission-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    max-height: 120px;
+    overflow-y: auto;
+  }
+
+  &__permission-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    font-size: 13px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__method {
+    background: rgba(102, 126, 234, 0.2);
+    color: #8fa4f0;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    min-width: 50px;
+    text-align: center;
+  }
+
+  &__host {
+    color: #e8e8e8;
+    font-weight: 500;
+  }
+
+  &__pathname {
+    color: #8b8b9a;
+    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__url {
+    color: #8fa4f0;
+    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+    font-size: 12px;
+    word-break: break-all;
+  }
+
+  &__no-permissions {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px;
+    background: rgba(139, 139, 154, 0.1);
+    border: 1px solid rgba(139, 139, 154, 0.3);
+    border-radius: 8px;
+    margin-top: 12px;
+
+    p {
+      font-size: 13px;
+      line-height: 1.4;
+      color: #8b8b9a;
+    }
+  }
+
+  &__error-message {
+    font-size: 14px;
+    color: #ff6b6b;
+    text-align: center;
+  }
+
+  &__divider {
+    height: 1px;
+    background: rgba(255, 255, 255, 0.1);
+    margin: 16px 0;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+    margin-top: auto;
+  }
+
+  &__btn {
+    padding: 12px 28px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    outline: none;
+
+    &:focus {
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);
+    }
+
+    &--deny {
+      background: rgba(255, 255, 255, 0.1);
+      color: #e8e8e8;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+
+      &:hover {
+        background: rgba(255, 107, 107, 0.2);
+        border-color: rgba(255, 107, 107, 0.5);
+        color: #ff6b6b;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+
+    &--allow {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #ffffff;
+
+      &:hover {
+        background: linear-gradient(135deg, #7b8ff5 0%, #8a5fb5 100%);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      }
+
+      &:active {
+        transform: scale(0.98) translateY(0);
+      }
+    }
+  }
+
+  &__hint {
+    text-align: center;
+    font-size: 11px;
+    color: #6b6b7a;
+    margin-top: 12px;
+
+    kbd {
+      display: inline-block;
+      padding: 2px 6px;
+      font-family: inherit;
+      font-size: 10px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  &__spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-top-color: #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Custom scrollbar
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+}

packages/extension/src/entries/ConfirmPopup/index.tsx

@@ -0,0 +1,311 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import browser from 'webextension-polyfill';
+import { logger, LogLevel } from '@tlsn/common';
+import './index.scss';
+
+// Initialize logger at DEBUG level for popup (no IndexedDB access)
+logger.init(LogLevel.DEBUG);
+
+interface RequestPermission {
+  method: string;
+  host: string;
+  pathname: string;
+  verifierUrl: string;
+  proxyUrl?: string;
+}
+
+interface PluginInfo {
+  name: string;
+  description: string;
+  version?: string;
+  author?: string;
+  requests?: RequestPermission[];
+  urls?: string[];
+}
+
+const ConfirmPopup: React.FC = () => {
+  const [pluginInfo, setPluginInfo] = useState<PluginInfo | null>(null);
+  const [requestId, setRequestId] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Parse URL params to get plugin info
+    const params = new URLSearchParams(window.location.search);
+    const name = params.get('name');
+    const description = params.get('description');
+    const version = params.get('version');
+    const author = params.get('author');
+    const requestsParam = params.get('requests');
+    const urlsParam = params.get('urls');
+    const reqId = params.get('requestId');
+
+    if (!reqId) {
+      setError('Missing request ID');
+      return;
+    }
+
+    setRequestId(reqId);
+
+    if (name) {
+      // Parse permission arrays from JSON
+      let requests: RequestPermission[] | undefined;
+      let urls: string[] | undefined;
+
+      try {
+        if (requestsParam) {
+          requests = JSON.parse(decodeURIComponent(requestsParam));
+        }
+      } catch (e) {
+        logger.warn('Failed to parse requests param:', e);
+      }
+
+      try {
+        if (urlsParam) {
+          urls = JSON.parse(decodeURIComponent(urlsParam));
+        }
+      } catch (e) {
+        logger.warn('Failed to parse urls param:', e);
+      }
+
+      setPluginInfo({
+        name: decodeURIComponent(name),
+        description: description
+          ? decodeURIComponent(description)
+          : 'No description provided',
+        version: version ? decodeURIComponent(version) : undefined,
+        author: author ? decodeURIComponent(author) : undefined,
+        requests,
+        urls,
+      });
+    } else {
+      // No plugin info available - show unknown plugin warning
+      setPluginInfo({
+        name: 'Unknown Plugin',
+        description:
+          'Plugin configuration could not be extracted. Proceed with caution.',
+      });
+    }
+  }, []);
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleDeny();
+      } else if (
+        e.key === 'Enter' &&
+        document.activeElement?.id === 'allow-btn'
+      ) {
+        handleAllow();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [requestId]);
+
+  const handleAllow = useCallback(async () => {
+    if (!requestId) return;
+
+    try {
+      await browser.runtime.sendMessage({
+        type: 'PLUGIN_CONFIRM_RESPONSE',
+        requestId,
+        allowed: true,
+      });
+      window.close();
+    } catch (err) {
+      logger.error('Failed to send allow response:', err);
+    }
+  }, [requestId]);
+
+  const handleDeny = useCallback(async () => {
+    if (!requestId) return;
+
+    try {
+      await browser.runtime.sendMessage({
+        type: 'PLUGIN_CONFIRM_RESPONSE',
+        requestId,
+        allowed: false,
+      });
+      window.close();
+    } catch (err) {
+      logger.error('Failed to send deny response:', err);
+    }
+  }, [requestId]);
+
+  if (error) {
+    return (
+      <div className="confirm-popup confirm-popup--error">
+        <div className="confirm-popup__header">
+          <span className="confirm-popup__icon">Error</span>
+          <h1>Configuration Error</h1>
+        </div>
+        <div className="confirm-popup__content">
+          <p className="confirm-popup__error-message">{error}</p>
+        </div>
+        <div className="confirm-popup__actions">
+          <button
+            className="confirm-popup__btn confirm-popup__btn--deny"
+            onClick={() => window.close()}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!pluginInfo) {
+    return (
+      <div className="confirm-popup confirm-popup--loading">
+        <div className="confirm-popup__spinner"></div>
+        <p>Loading plugin information...</p>
+      </div>
+    );
+  }
+
+  const isUnknown = pluginInfo.name === 'Unknown Plugin';
+
+  return (
+    <div className="confirm-popup">
+      <div className="confirm-popup__header">
+        <span className="confirm-popup__icon">{isUnknown ? '?' : 'P'}</span>
+        <h1>Plugin Execution Request</h1>
+      </div>
+
+      <div className="confirm-popup__content">
+        <div className="confirm-popup__field">
+          <label>Plugin Name</label>
+          <p
+            className={`confirm-popup__value ${isUnknown ? 'confirm-popup__value--warning' : ''}`}
+          >
+            {pluginInfo.name}
+          </p>
+        </div>
+
+        <div className="confirm-popup__field">
+          <label>Description</label>
+          <p
+            className={`confirm-popup__value confirm-popup__value--description ${isUnknown ? 'confirm-popup__value--warning' : ''}`}
+          >
+            {pluginInfo.description}
+          </p>
+        </div>
+
+        {pluginInfo.version && (
+          <div className="confirm-popup__field confirm-popup__field--inline">
+            <label>Version</label>
+            <p className="confirm-popup__value">{pluginInfo.version}</p>
+          </div>
+        )}
+
+        {pluginInfo.author && (
+          <div className="confirm-popup__field confirm-popup__field--inline">
+            <label>Author</label>
+            <p className="confirm-popup__value">{pluginInfo.author}</p>
+          </div>
+        )}
+
+        {/* Permissions Section */}
+        {(pluginInfo.requests || pluginInfo.urls) && (
+          <div className="confirm-popup__permissions">
+            <h2 className="confirm-popup__permissions-title">Permissions</h2>
+
+            {pluginInfo.requests && pluginInfo.requests.length > 0 && (
+              <div className="confirm-popup__permission-group">
+                <label>
+                  <span className="confirm-popup__permission-icon">🌐</span>
+                  Network Requests
+                </label>
+                <ul className="confirm-popup__permission-list">
+                  {pluginInfo.requests.map((req, index) => (
+                    <li key={index} className="confirm-popup__permission-item">
+                      <span className="confirm-popup__method">
+                        {req.method}
+                      </span>
+                      <span className="confirm-popup__host">{req.host}</span>
+                      <span className="confirm-popup__pathname">
+                        {req.pathname}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {pluginInfo.urls && pluginInfo.urls.length > 0 && (
+              <div className="confirm-popup__permission-group">
+                <label>
+                  <span className="confirm-popup__permission-icon">🔗</span>
+                  Allowed URLs
+                </label>
+                <ul className="confirm-popup__permission-list">
+                  {pluginInfo.urls.map((url, index) => (
+                    <li key={index} className="confirm-popup__permission-item">
+                      <span className="confirm-popup__url">{url}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* No permissions warning */}
+        {!pluginInfo.requests && !pluginInfo.urls && !isUnknown && (
+          <div className="confirm-popup__no-permissions">
+            <span className="confirm-popup__warning-icon">!</span>
+            <p>
+              This plugin has no permissions defined. It will not be able to
+              make network requests or open browser windows.
+            </p>
+          </div>
+        )}
+
+        {isUnknown && (
+          <div className="confirm-popup__warning">
+            <span className="confirm-popup__warning-icon">!</span>
+            <p>
+              This plugin's configuration could not be verified. Only proceed if
+              you trust the source.
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="confirm-popup__divider"></div>
+
+      <div className="confirm-popup__actions">
+        <button
+          className="confirm-popup__btn confirm-popup__btn--deny"
+          onClick={handleDeny}
+          tabIndex={1}
+        >
+          Deny
+        </button>
+        <button
+          id="allow-btn"
+          className="confirm-popup__btn confirm-popup__btn--allow"
+          onClick={handleAllow}
+          tabIndex={0}
+          autoFocus
+        >
+          Allow
+        </button>
+      </div>
+
+      <p className="confirm-popup__hint">
+        Press <kbd>Enter</kbd> to allow or <kbd>Esc</kbd> to deny
+      </p>
+    </div>
+  );
+};
+
+// Mount the app
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(<ConfirmPopup />);
+}

packages/extension/src/entries/Content/content.ts

@@ -0,0 +1,91 @@
+// Note: This file runs in page context, not extension context
+// We use console.log here intentionally as @tlsn/common may not be available
+
+/**
+ * ExtensionAPI - Public API exposed to web pages via window.tlsn
+ *
+ * Provides methods for web pages to interact with the TLSN extension,
+ * including opening new windows for notarization.
+ */
+class ExtensionAPI {
+  /**
+   * Execute JavaScript code in a sandboxed environment
+   *
+   * @param code - The JavaScript code to execute
+   * @returns Promise that resolves with the execution result or rejects with an error
+   *
+   * @example
+   * ```javascript
+   * // Execute simple code
+   * const result = await window.tlsn.execCode('1 + 2');
+   * console.log(result); // 3
+   *
+   * // Handle errors
+   * try {
+   *   await window.tlsn.execCode('throw new Error("test")');
+   * } catch (error) {
+   *   console.error(error);
+   * }
+   * ```
+   */
+  async execCode(code: string): Promise<any> {
+    if (!code || typeof code !== 'string') {
+      throw new Error('Code must be a non-empty string');
+    }
+
+    return new Promise((resolve, reject) => {
+      // Generate a unique request ID for this execution
+      const requestId = `exec_${Date.now()}_${Math.random()}`;
+      let timeout: any = null;
+
+      // Set up one-time listener for the response
+      const handleMessage = (event: MessageEvent) => {
+        if (event.origin !== window.location.origin) return;
+        if (event.data?.type !== 'TLSN_EXEC_CODE_RESPONSE') return;
+        if (event.data?.requestId !== requestId) return;
+
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+        // Remove listener
+        window.removeEventListener('message', handleMessage);
+
+        // Handle response
+        if (event.data.success) {
+          resolve(event.data.result);
+        } else {
+          reject(new Error(event.data.error || 'Code execution failed'));
+        }
+      };
+
+      window.addEventListener('message', handleMessage);
+
+      // Send message to content script
+      window.postMessage(
+        {
+          type: 'TLSN_EXEC_CODE',
+          payload: {
+            code,
+            requestId,
+          },
+        },
+        window.location.origin,
+      );
+
+      // Add timeout
+      timeout = setTimeout(
+        () => {
+          window.removeEventListener('message', handleMessage);
+          reject(new Error('Code execution timeout'));
+        },
+        15 * 60 * 1000,
+      ); // 15 minute timeout
+    });
+  }
+}
+
+// Expose API to the page
+(window as any).tlsn = new ExtensionAPI();
+
+// Dispatch event to notify page that extension is loaded
+window.dispatchEvent(new CustomEvent('tlsn_loaded'));

packages/extension/src/entries/Content/index.ts

@@ -0,0 +1,235 @@
+import browser from 'webextension-polyfill';
+import { DomJson } from '@tlsn/plugin-sdk/src/types';
+import { logger, LogLevel } from '@tlsn/common';
+
+// Initialize logger at DEBUG level for content scripts (no IndexedDB access)
+logger.init(LogLevel.DEBUG);
+logger.debug('Content script loaded on:', window.location.href);
+
+// Inject a script into the page if needed
+function injectScript() {
+  const script = document.createElement('script');
+  script.src = browser.runtime.getURL('content.bundle.js');
+  script.type = 'text/javascript';
+  (document.head || document.documentElement).appendChild(script);
+  script.onload = () => script.remove();
+}
+
+function renderPluginUI(json: DomJson, windowId: number) {
+  let container = document.getElementById('tlsn-plugin-container');
+
+  if (!container) {
+    const el = document.createElement('div');
+    el.id = 'tlsn-plugin-container';
+    document.body.appendChild(el);
+    container = el;
+  }
+
+  container.innerHTML = '';
+  container.appendChild(createNode(json, windowId));
+}
+
+function createNode(json: DomJson, windowId: number): HTMLElement | Text {
+  if (typeof json === 'string') {
+    const node = document.createTextNode(json);
+    return node;
+  }
+
+  const node = document.createElement(json.type);
+
+  if (json.options.className) {
+    node.className = json.options.className;
+  }
+
+  if (json.options.id) {
+    node.id = json.options.id;
+  }
+
+  if (json.options.style) {
+    Object.entries(json.options.style).forEach(([key, value]) => {
+      node.style[key as any] = value;
+    });
+  }
+
+  if (json.options.onclick) {
+    node.addEventListener('click', () => {
+      browser.runtime.sendMessage({
+        type: 'PLUGIN_UI_CLICK',
+        onclick: json.options.onclick,
+        windowId,
+      });
+    });
+  }
+
+  json.children.forEach((child) => {
+    node.appendChild(createNode(child, windowId));
+  });
+
+  return node;
+}
+
+// Listen for messages from the extension
+browser.runtime.onMessage.addListener((request, sender, sendResponse: any) => {
+  logger.debug('Content script received message:', request);
+
+  // Forward offscreen logs to page
+  if (request.type === 'OFFSCREEN_LOG') {
+    window.postMessage(
+      {
+        type: 'TLSN_OFFSCREEN_LOG',
+        level: request.level,
+        message: request.message,
+      },
+      window.location.origin,
+    );
+    return true;
+  }
+
+  if (request.type === 'GET_PAGE_INFO') {
+    // Example: Get page information
+    sendResponse({
+      title: document.title,
+      url: window.location.href,
+      domain: window.location.hostname,
+    });
+  }
+
+  if (request.type === 'RENDER_PLUGIN_UI') {
+    renderPluginUI(request.json, request.windowId);
+    sendResponse({ success: true });
+  }
+
+  // if (request.type === 'SHOW_TLSN_OVERLAY') {
+  //   createTLSNOverlay();
+  //   sendResponse({ success: true });
+  // }
+
+  // if (request.type === 'UPDATE_TLSN_REQUESTS') {
+  //   logger.debug('updateTLSNOverlay', request.requests);
+  //   updateTLSNOverlay(request.requests || []);
+  //   sendResponse({ success: true });
+  // }
+
+  // if (request.type === 'HIDE_TLSN_OVERLAY') {
+  //   const overlay = document.getElementById('tlsn-overlay');
+  //   if (overlay) {
+  //     overlay.remove();
+  //   }
+  //   sendResponse({ success: true });
+  // }
+
+  return true; // Keep the message channel open
+});
+
+// Send a message to background script when ready
+browser.runtime
+  .sendMessage({
+    type: 'CONTENT_SCRIPT_READY',
+    url: window.location.href,
+  })
+  .catch(console.error);
+
+// Listen for messages from the page
+window.addEventListener('message', (event) => {
+  // Only accept messages from the same origin
+  if (event.origin !== window.location.origin) return;
+
+  // Handle TLSN window.tlsn.open() calls
+  if (event.data?.type === 'TLSN_OPEN_WINDOW') {
+    logger.debug(
+      '[Content Script] Received TLSN_OPEN_WINDOW request:',
+      event.data.payload,
+    );
+
+    // Forward to background script with OPEN_WINDOW type
+    browser.runtime
+      .sendMessage({
+        type: 'OPEN_WINDOW',
+        url: event.data.payload.url,
+        width: event.data.payload.width,
+        height: event.data.payload.height,
+        showOverlay: event.data.payload.showOverlay,
+      })
+      .catch((error) => {
+        logger.error(
+          '[Content Script] Failed to send OPEN_WINDOW message:',
+          error,
+        );
+      });
+  }
+
+  // Handle code execution requests
+  if (event.data?.type === 'TLSN_EXEC_CODE') {
+    logger.debug(
+      '[Content Script] Received TLSN_EXEC_CODE request:',
+      event.data.payload,
+    );
+
+    // Forward to background script
+    browser.runtime
+      .sendMessage({
+        type: 'EXEC_CODE',
+        code: event.data.payload.code,
+        requestId: event.data.payload.requestId,
+      })
+      .then((response) => {
+        logger.debug('[Content Script] EXEC_CODE response:', response);
+
+        // Check if background returned success or error
+        if (response && response.success === false) {
+          // Background returned an error (e.g., user rejected plugin)
+          window.postMessage(
+            {
+              type: 'TLSN_EXEC_CODE_RESPONSE',
+              requestId: event.data.payload.requestId,
+              success: false,
+              error: response.error || 'Code execution failed',
+            },
+            window.location.origin,
+          );
+        } else {
+          // Success - send result back to page
+          window.postMessage(
+            {
+              type: 'TLSN_EXEC_CODE_RESPONSE',
+              requestId: event.data.payload.requestId,
+              success: true,
+              result: response?.result,
+            },
+            window.location.origin,
+          );
+        }
+      })
+      .catch((error) => {
+        logger.error('[Content Script] Failed to execute code:', error);
+        // Send error back to page
+        window.postMessage(
+          {
+            type: 'TLSN_EXEC_CODE_RESPONSE',
+            requestId: event.data.payload.requestId,
+            success: false,
+            error: error.message || 'Code execution failed',
+          },
+          window.location.origin,
+        );
+      });
+  }
+
+  // Handle legacy TLSN_CONTENT_SCRIPT_MESSAGE
+  if (event.data?.type === 'TLSN_CONTENT_SCRIPT_MESSAGE') {
+    // Forward to content script/extension
+    browser.runtime.sendMessage({
+      type: 'TLSN_CONTENT_TO_EXTENSION',
+      payload: event.data.payload,
+    });
+  }
+});
+
+// Inject script if document is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', injectScript);
+} else {
+  injectScript();
+}
+
+export {};

packages/extension/src/entries/DevConsole/index.html

@@ -2,11 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Settings</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Developer Console</title>
   </head>
-
   <body>
-    <div id="app-container"></div>
+    <div id="root"></div>
   </body>
 </html>

packages/extension/src/entries/DevConsole/index.scss

@@ -0,0 +1,316 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  overflow: hidden;
+}
+
+.dev-console {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #1e1e1e;
+}
+
+.editor-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 2px solid #333;
+  overflow: hidden;
+}
+
+.editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: #252526;
+  border-bottom: 1px solid #333;
+}
+
+.editor-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #cccccc;
+  letter-spacing: 0.3px;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+
+  &:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    }
+  }
+
+  &.btn-secondary {
+    background-color: #3e3e42;
+    color: #cccccc;
+
+    &:hover {
+      background-color: #4e4e52;
+    }
+  }
+}
+
+.editor-container {
+  flex: 1;
+  overflow: auto;
+  background-color: #1e1e1e;
+}
+
+.console-section {
+  height: 32rem;
+  display: flex;
+  flex-direction: column;
+  background-color: #1e1e1e;
+}
+
+.console-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: #252526;
+  border-bottom: 1px solid #333;
+}
+
+.console-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #cccccc;
+  letter-spacing: 0.3px;
+}
+
+.console-output {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #252526;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #3e3e42;
+    border-radius: 5px;
+
+    &:hover {
+      background: #4e4e52;
+    }
+  }
+}
+
+.console-entry {
+  padding: 4px 0;
+  display: flex;
+  gap: 8px;
+
+  &.error {
+    color: #f48771;
+  }
+
+  &.success {
+    color: #89d185;
+  }
+
+  &.info {
+    color: #569cd6;
+  }
+}
+
+.console-timestamp {
+  color: #6a9955;
+  flex-shrink: 0;
+}
+
+.console-message {
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+// CodeMirror custom syntax highlighting styles
+.cm-editor {
+  .cm-content {
+    caret-color: #528bff;
+  }
+
+  // Line numbers
+  .cm-gutters {
+    background-color: #1e1e1e;
+    border-right: 1px solid #333;
+  }
+
+  .cm-lineNumbers .cm-gutterElement {
+    color: #858585;
+    padding: 0 8px 0 5px;
+  }
+
+  // Active line
+  .cm-activeLine {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .cm-activeLineGutter {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  // Selection
+  .cm-selectionBackground,
+  &.cm-focused .cm-selectionBackground {
+    background-color: rgba(82, 139, 255, 0.3);
+  }
+
+  // JavaScript syntax highlighting colors
+  .cm-keyword {
+    color: #c586c0; // Keywords: const, let, var, function, async, await, etc.
+  }
+
+  .cm-variableName {
+    color: #9cdcfe; // Variable names
+  }
+
+  .cm-propertyName {
+    color: #9cdcfe; // Object properties
+  }
+
+  .cm-string {
+    color: #ce9178; // Strings
+  }
+
+  .cm-number {
+    color: #b5cea8; // Numbers
+  }
+
+  .cm-bool {
+    color: #569cd6; // Booleans: true, false
+  }
+
+  .cm-null {
+    color: #569cd6; // null, undefined
+  }
+
+  .cm-operator {
+    color: #d4d4d4; // Operators: =, +, -, etc.
+  }
+
+  .cm-punctuation {
+    color: #d4d4d4; // Punctuation: (), {}, [], etc.
+  }
+
+  .cm-comment {
+    color: #6a9955; // Comments
+    font-style: italic;
+  }
+
+  .cm-function {
+    color: #dcdcaa; // Function names
+  }
+
+  .cm-typeName,
+  .cm-className {
+    color: #4ec9b0; // Type/Class names
+  }
+
+  .cm-regexp {
+    color: #d16969; // Regular expressions
+  }
+
+  .cm-escape {
+    color: #d7ba7d; // Escape sequences in strings
+  }
+
+  .cm-meta {
+    color: #569cd6; // Meta keywords like import, export
+  }
+
+  .cm-definition {
+    color: #dcdcaa; // Function definitions
+  }
+
+  // Bracket matching
+  .cm-matchingBracket {
+    background-color: rgba(255, 255, 255, 0.1);
+    border: 1px solid #888;
+  }
+
+  .cm-nonmatchingBracket {
+    background-color: rgba(255, 0, 0, 0.2);
+  }
+
+  // Cursor
+  .cm-cursor {
+    border-left-color: #aeafad;
+  }
+
+  // Search/selection matches
+  .cm-selectionMatch {
+    background-color: rgba(173, 214, 255, 0.15);
+  }
+
+  // Focused state
+  &.cm-focused {
+    outline: none;
+  }
+
+  // Fold gutter
+  .cm-foldGutter {
+    .cm-gutterElement {
+      color: #858585;
+
+      &:hover {
+        color: #c5c5c5;
+      }
+    }
+  }
+}

packages/extension/src/entries/DevConsole/index.tsx

@@ -0,0 +1,678 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import browser from 'webextension-polyfill';
+import './index.scss';
+
+/**
+ * ExtensionAPI Class
+ *
+ * Provides a communication bridge between the DevConsole UI and the background
+ * service worker for executing plugin code.
+ *
+ * This API is exposed as `window.tlsn` and allows the DevConsole to:
+ * - Execute plugin code in a sandboxed QuickJS environment
+ * - Communicate with the plugin-sdk Host via background messages
+ * - Receive execution results or error messages
+ */
+class ExtensionAPI {
+  /**
+   * Execute plugin code in the background service worker
+   *
+   * @param code - JavaScript code string to execute (must export main, onClick, config)
+   * @returns Promise resolving to the execution result
+   * @throws Error if code is invalid or execution fails
+   *
+   * Flow:
+   * 1. Sends EXEC_CODE message to background service worker
+   * 2. Background creates QuickJS sandbox with plugin capabilities
+   * 3. Code is evaluated and main() is called
+   * 4. Results are returned or errors are thrown
+   */
+  async execCode(code: string): Promise<unknown> {
+    if (!code || typeof code !== 'string') {
+      throw new Error('Code must be a non-empty string');
+    }
+
+    const response = await browser.runtime.sendMessage({
+      type: 'EXEC_CODE',
+      code,
+      requestId: `exec_${Date.now()}_${Math.random()}`,
+    });
+
+    if (response.success) {
+      return response.result;
+    } else {
+      throw new Error(response.error || 'Code execution failed');
+    }
+  }
+}
+
+// Initialize window.tlsn API for use in DevConsole
+if (typeof window !== 'undefined') {
+  (window as any).tlsn = new ExtensionAPI();
+}
+
+/**
+ * ConsoleEntry Interface
+ *
+ * Represents a single entry in the DevConsole output panel
+ */
+interface ConsoleEntry {
+  /** Time when the entry was created (HH:MM:SS format) */
+  timestamp: string;
+  /** The console message text */
+  message: string;
+  /** Entry type affecting display styling */
+  type: 'info' | 'error' | 'success';
+}
+
+/**
+ * Default Plugin Code Template
+ *
+ * This is the starter code shown in the DevConsole editor.
+ * It demonstrates a complete TLSN plugin with:
+ * - Config object with plugin metadata
+ * - onClick handler for proof generation
+ * - main() function with React-like hooks (useEffect, useHeaders)
+ * - UI rendering with div/button components
+ * - prove() call with reveal handlers for selective disclosure
+ *
+ * Plugin Capabilities Used:
+ * - useHeaders: Subscribe to intercepted HTTP request headers
+ * - useEffect: Run side effects when dependencies change
+ * - openWindow: Open browser windows with request interception
+ * - div/button: Create UI components
+ * - prove: Generate TLSNotary proofs with selective disclosure
+ * - done: Complete plugin execution
+ */
+const DEFAULT_CODE = `// =============================================================================
+// PLUGIN CONFIGURATION
+// =============================================================================
+/**
+ * The config object defines plugin metadata displayed to users.
+ * This information appears in the plugin selection UI.
+ */
+const config = {
+  name: 'X Profile Prover',
+  description: 'This plugin will prove your X.com profile.',
+};
+
+// =============================================================================
+// PROOF GENERATION CALLBACK
+// =============================================================================
+/**
+ * This function is triggered when the user clicks the "Prove" button.
+ * It extracts authentication headers from intercepted requests and generates
+ * a TLSNotary proof using the unified prove() API.
+ *
+ * Flow:
+ * 1. Get the intercepted X.com API request headers
+ * 2. Extract authentication headers (Cookie, CSRF token, OAuth token, etc.)
+ * 3. Call prove() with the request configuration and reveal handlers
+ * 4. prove() internally:
+ *    - Creates a prover connection to the verifier
+ *    - Sends the HTTP request through the TLS prover
+ *    - Captures the TLS transcript (sent/received bytes)
+ *    - Parses the transcript with byte-level range tracking
+ *    - Applies selective reveal handlers to show only specified data
+ *    - Generates and returns the cryptographic proof
+ * 5. Return the proof result to the caller via done()
+ */
+async function onClick() {
+  const isRequestPending = useState('isRequestPending', false);
+
+  if (isRequestPending) return;
+
+  setState('isRequestPending', true);
+
+  // Step 1: Get the intercepted header from the X.com API request
+  // useHeaders() provides access to all intercepted HTTP request headers
+  // We filter for the specific X.com API endpoint we want to prove
+  const [header] = useHeaders(headers => {
+    return headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'));
+  });
+
+  // Step 2: Extract authentication headers from the intercepted request
+  // These headers are required to authenticate with the X.com API
+  const headers = {
+    // Cookie: Session authentication token
+    'cookie': header.requestHeaders.find(header => header.name === 'Cookie')?.value,
+
+    // X-CSRF-Token: Cross-Site Request Forgery protection token
+    'x-csrf-token': header.requestHeaders.find(header => header.name === 'x-csrf-token')?.value,
+
+    // X-Client-Transaction-ID: Request tracking identifier
+    'x-client-transaction-id': header.requestHeaders.find(header => header.name === 'x-client-transaction-id')?.value,
+
+    // Host: Target server hostname
+    Host: 'api.x.com',
+
+    // Authorization: OAuth bearer token for API authentication
+    authorization: header.requestHeaders.find(header => header.name === 'authorization')?.value,
+
+    // Accept-Encoding: Must be 'identity' for TLSNotary (no compression)
+    // TLSNotary requires uncompressed data to verify byte-for-byte
+    'Accept-Encoding': 'identity',
+
+    // Connection: Use 'close' to complete the connection after one request
+    Connection: 'close',
+  };
+
+  // Step 3: Generate TLS proof using the unified prove() API
+  // This single function handles the entire proof generation pipeline
+  const resp = await prove(
+    // -------------------------------------------------------------------------
+    // REQUEST OPTIONS
+    // -------------------------------------------------------------------------
+    // Defines the HTTP request to be proven
+    {
+      url: 'https://api.x.com/1.1/account/settings.json',  // Target API endpoint
+      method: 'GET',                                        // HTTP method
+      headers: headers,                                     // Authentication headers
+    },
+
+    // -------------------------------------------------------------------------
+    // PROVER OPTIONS
+    // -------------------------------------------------------------------------
+    // Configures the TLS proof generation process
+    {
+      // Verifier URL: The notary server that verifies the TLS connection
+      // Must be running locally or accessible at this address
+      verifierUrl: 'http://localhost:7047',
+
+      // Proxy URL: WebSocket proxy that relays TLS data to the target server
+      // The token parameter specifies which server to connect to
+      proxyUrl: 'wss://notary.pse.dev/proxy?token=api.x.com',
+
+      // Maximum bytes to receive from server (response size limit)
+      maxRecvData: 3200,
+
+      // Maximum bytes to send to server (request size limit)
+      maxSentData: 1600,
+
+      // -----------------------------------------------------------------------
+      // HANDLERS
+      // -----------------------------------------------------------------------
+      // These handlers specify which parts of the TLS transcript to reveal
+      // in the proof. Unrevealed data is redacted for privacy.
+      handlers: [
+        // Reveal the request start line (GET /path HTTP/1.1)
+        // This proves the HTTP method and path were sent
+        {
+          type: 'SENT',           // Direction: data sent to server
+          part: 'START_LINE',     // Part: HTTP request line
+          action: 'REVEAL',       // Action: include as plaintext in proof
+        },
+
+        // Reveal the response start line (HTTP/1.1 200 OK)
+        // This proves the server responded with status code 200
+        {
+          type: 'RECV',           // Direction: data received from server
+          part: 'START_LINE',     // Part: HTTP response line
+          action: 'REVEAL',       // Action: include as plaintext in proof
+        },
+
+        // Reveal the 'date' header from the response
+        // This proves when the server generated the response
+        {
+          type: 'RECV',           // Direction: data received from server
+          part: 'HEADERS',        // Part: HTTP headers
+          action: 'REVEAL',       // Action: include as plaintext in proof
+          params: {
+            key: 'date',          // Specific header to reveal
+          },
+        },
+
+        // Reveal the 'screen_name' field from the JSON response body
+        // This proves the X.com username without revealing other profile data
+        {
+          type: 'RECV',           // Direction: data received from server
+          part: 'BODY',           // Part: HTTP response body
+          action: 'REVEAL',       // Action: include as plaintext in proof
+          params: {
+            type: 'json',         // Body format: JSON
+            path: 'screen_name',  // JSON field to reveal (top-level only)
+          },
+        },
+      ]
+    }
+  );
+
+  // Step 4: Complete plugin execution and return the proof result
+  // done() signals that the plugin has finished and passes the result back
+  done(JSON.stringify(resp));
+}
+
+function expandUI() {
+  setState('isMinimized', false);
+}
+
+function minimizeUI() {
+  setState('isMinimized', true);
+}
+
+// =============================================================================
+// MAIN UI FUNCTION
+// =============================================================================
+/**
+ * The main() function is called reactively whenever plugin state changes.
+ * It returns a DOM structure that is rendered as the plugin UI.
+ *
+ * React-like Hooks Used:
+ * - useHeaders(): Subscribes to intercepted HTTP request headers
+ * - useEffect(): Runs side effects when dependencies change
+ *
+ * UI Flow:
+ * 1. Check if X.com API request headers have been intercepted
+ * 2. If not intercepted yet: Show "Please login" message
+ * 3. If intercepted: Show "Profile detected" with a "Prove" button
+ * 4. On first render: Open X.com in a new window to trigger login
+ */
+function main() {
+  // Subscribe to intercepted headers for the X.com API endpoint
+  // This will reactively update whenever new headers matching the filter arrive
+  const [header] = useHeaders(headers => headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json')));
+  const isMinimized = useState('isMinimized', false);
+  const isRequestPending = useState('isRequestPending', false);
+
+  // Run once on plugin load: Open X.com in a new window
+  // The empty dependency array [] means this runs only once
+  // The opened window's requests will be intercepted by the plugin
+  useEffect(() => {
+    openWindow('https://x.com');
+  }, []);
+
+    // If minimized, show floating action button
+  if (isMinimized) {
+    return div({
+      style: {
+        position: 'fixed',
+        bottom: '20px',
+        right: '20px',
+        width: '60px',
+        height: '60px',
+        borderRadius: '50%',
+        backgroundColor: '#4CAF50',
+        boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+        zIndex: '999999',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        transition: 'all 0.3s ease',
+        fontSize: '24px',
+        color: 'white',
+      },
+      onclick: 'expandUI',
+    }, ['🔐']);
+  }
+
+  // Render the plugin UI overlay
+  // This creates a fixed-position widget in the bottom-right corner
+   return div({
+    style: {
+      position: 'fixed',
+      bottom: '0',
+      right: '8px',
+      width: '280px',
+      borderRadius: '8px 8px 0 0',
+      backgroundColor: 'white',
+      boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+      zIndex: '999999',
+      fontSize: '14px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+      overflow: 'hidden',
+    },
+  }, [
+    // Header with minimize button
+    div({
+      style: {
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '12px 16px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        color: 'white',
+      }
+    }, [
+      div({
+        style: {
+          fontWeight: '600',
+          fontSize: '16px',
+        }
+      }, ['X Profile Prover']),
+      button({
+        style: {
+          background: 'transparent',
+          border: 'none',
+          color: 'white',
+          fontSize: '20px',
+          cursor: 'pointer',
+          padding: '0',
+          width: '24px',
+          height: '24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        onclick: 'minimizeUI',
+      }, ['−'])
+    ]),
+
+    // Content area
+    div({
+      style: {
+        padding: '20px',
+        backgroundColor: '#f8f9fa',
+      }
+    }, [
+      // Status indicator showing whether profile is detected
+      div({
+        style: {
+          marginBottom: '16px',
+          padding: '12px',
+          borderRadius: '6px',
+          backgroundColor: header ? '#d4edda' : '#f8d7da',
+          color: header ? '#155724' : '#721c24',
+          border: \`1px solid \$\{header ? '#c3e6cb' : '#f5c6cb'\}\`,
+          fontWeight: '500',
+        },
+      }, [
+        header ? '✓ Profile detected' : '⚠ No profile detected'
+      ]),
+
+      // Conditional UI based on whether we have intercepted the headers
+      header ? (
+          // Show prove button when not pending
+          button({
+            style: {
+              width: '100%',
+              padding: '12px 24px',
+              borderRadius: '6px',
+              border: 'none',
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              color: 'white',
+              fontWeight: '600',
+              fontSize: '15px',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+              opacity: isRequestPending ? 0.5 : 1,
+              cursor: isRequestPending ? 'not-allowed' : 'pointer',
+            },
+            onclick: 'onClick',
+          }, [isRequestPending ? 'Generating Proof...' : 'Generate Proof'])
+      ) : (
+        // Show login message
+        div({
+          style: {
+            textAlign: 'center',
+            color: '#666',
+            padding: '12px',
+            backgroundColor: '#fff3cd',
+            borderRadius: '6px',
+            border: '1px solid #ffeaa7',
+          }
+        }, ['Please login to x.com to continue'])
+      )
+    ])
+  ]);
+}
+
+// =============================================================================
+// PLUGIN EXPORTS
+// =============================================================================
+/**
+ * All plugins must export an object with these properties:
+ * - main: The reactive UI rendering function
+ * - onClick: Click handler callback for buttons
+ * - config: Plugin metadata
+ */
+export default {
+  main,
+  onClick,
+  expandUI,
+  minimizeUI,
+  config,
+};
+`;
+
+/**
+ * DevConsole Component
+ *
+ * Interactive development console for testing TLSN plugins in real-time.
+ *
+ * Features:
+ * - CodeMirror editor with JavaScript syntax highlighting
+ * - Live code execution via window.tlsn.execCode()
+ * - Console output panel with timestamped entries
+ * - Auto-scrolling console
+ * - Error handling and execution timing
+ *
+ * Architecture:
+ * 1. User writes plugin code in CodeMirror editor
+ * 2. Clicks "Run Code" button
+ * 3. Code is sent to background service worker via EXEC_CODE message
+ * 4. Background creates QuickJS sandbox with plugin capabilities
+ * 5. Plugin main() is called and UI is rendered
+ * 6. Results/errors are displayed in console panel
+ */
+const DevConsole: React.FC = () => {
+  // Editor state - stores the plugin code
+  const [code, setCode] = useState<string>(DEFAULT_CODE);
+
+  // Console output ref for auto-scrolling
+  const consoleOutputRef = useRef<HTMLDivElement>(null);
+
+  // Console entries array with initial welcome message
+  const [consoleEntries, setConsoleEntries] = useState<ConsoleEntry[]>([
+    {
+      timestamp: new Date().toLocaleTimeString(),
+      message: 'DevConsole initialized. window.tlsn API ready.',
+      type: 'success',
+    },
+  ]);
+
+  /**
+   * Auto-scroll console to bottom when new entries are added
+   * This ensures the latest output is always visible
+   */
+  useEffect(() => {
+    if (consoleOutputRef.current) {
+      consoleOutputRef.current.scrollTop =
+        consoleOutputRef.current.scrollHeight;
+    }
+  }, [consoleEntries]);
+
+  /**
+   * Add a new entry to the console output
+   *
+   * @param message - The message to display
+   * @param type - Entry type (info, error, success) for styling
+   */
+  const addConsoleEntry = (
+    message: string,
+    type: ConsoleEntry['type'] = 'info',
+  ) => {
+    const timestamp = new Date().toLocaleTimeString();
+    setConsoleEntries((prev) => [...prev, { timestamp, message, type }]);
+  };
+
+  /**
+   * Execute the plugin code in the background service worker
+   *
+   * Flow:
+   * 1. Validate code is not empty
+   * 2. Send code to background via window.tlsn.execCode()
+   * 3. Background creates QuickJS sandbox with capabilities
+   * 4. Plugin code is evaluated and main() is called
+   * 5. Display results or errors in console
+   *
+   * Performance tracking:
+   * - Measures execution time from send to response
+   * - Includes sandbox creation, code evaluation, and main() execution
+   */
+  const executeCode = async () => {
+    const codeToExecute = code.trim();
+
+    if (!codeToExecute) {
+      addConsoleEntry('No code to execute', 'error');
+      return;
+    }
+
+    addConsoleEntry('Executing code...', 'info');
+    const startTime = performance.now();
+
+    try {
+      // Execute code in sandboxed QuickJS environment
+      const result = await (window as any).tlsn.execCode(codeToExecute);
+      const executionTime = (performance.now() - startTime).toFixed(2);
+
+      addConsoleEntry(`Execution completed in ${executionTime}ms`, 'success');
+
+      // Display result if returned (from done() call or explicit return)
+      if (result !== undefined) {
+        if (typeof result === 'object') {
+          addConsoleEntry(
+            `Result:\n${JSON.stringify(result, null, 2)}`,
+            'success',
+          );
+        } else {
+          addConsoleEntry(`Result: ${result}`, 'success');
+        }
+      } else {
+        addConsoleEntry(
+          'Code executed successfully (no return value)',
+          'success',
+        );
+      }
+    } catch (error: any) {
+      const executionTime = (performance.now() - startTime).toFixed(2);
+      addConsoleEntry(
+        `Error after ${executionTime}ms:\n${error.message}`,
+        'error',
+      );
+    }
+  };
+
+  /**
+   * Clear the console output panel
+   * Resets to a single "Console cleared" message
+   */
+  const clearConsole = () => {
+    setConsoleEntries([
+      {
+        timestamp: new Date().toLocaleTimeString(),
+        message: 'Console cleared',
+        type: 'info',
+      },
+    ]);
+  };
+
+  /**
+   * Render the DevConsole UI
+   *
+   * Layout:
+   * - Top: Code editor with CodeMirror
+   * - Bottom: Console output panel
+   * - Split 60/40 ratio
+   *
+   * Editor Features:
+   * - JavaScript syntax highlighting
+   * - Line numbers, bracket matching, auto-completion
+   * - One Dark theme
+   * - History (undo/redo)
+   */
+  return (
+    <div className="dev-console">
+      {/* Code Editor Section */}
+      <div className="editor-section">
+        <div className="editor-header">
+          <div className="editor-title">Code Editor</div>
+          <div className="editor-actions">
+            <button className="btn btn-primary" onClick={executeCode}>
+              ▶️ Run Code
+            </button>
+          </div>
+        </div>
+        {/* CodeMirror with JavaScript/JSX support */}
+        <CodeMirror
+          value={code}
+          height="100%"
+          theme={oneDark}
+          extensions={[javascript({ jsx: true })]}
+          onChange={(value) => setCode(value)}
+          basicSetup={{
+            lineNumbers: true,
+            highlightActiveLineGutter: true,
+            highlightSpecialChars: true,
+            history: true,
+            foldGutter: true,
+            drawSelection: true,
+            dropCursor: true,
+            allowMultipleSelections: true,
+            indentOnInput: true,
+            syntaxHighlighting: true,
+            bracketMatching: true,
+            closeBrackets: true,
+            autocompletion: true,
+            rectangularSelection: true,
+            crosshairCursor: true,
+            highlightActiveLine: true,
+            highlightSelectionMatches: true,
+            closeBracketsKeymap: true,
+            defaultKeymap: true,
+            searchKeymap: true,
+            historyKeymap: true,
+            foldKeymap: true,
+            completionKeymap: true,
+            lintKeymap: true,
+          }}
+          style={{
+            fontSize: '14px',
+            fontFamily: "'Monaco', 'Courier New', monospace",
+            height: '0',
+            flexGrow: 1,
+          }}
+        />
+      </div>
+
+      {/* Console Output Section */}
+      <div className="console-section">
+        <div className="console-header">
+          <div className="console-title">Console</div>
+          <div className="editor-actions">
+            <button className="btn btn-secondary" onClick={clearConsole}>
+              Clear Console
+            </button>
+          </div>
+        </div>
+        {/* Scrollable console output with timestamped entries */}
+        <div className="console-output" ref={consoleOutputRef}>
+          {consoleEntries.map((entry, index) => (
+            <div key={index} className={`console-entry ${entry.type}`}>
+              <span className="console-timestamp">[{entry.timestamp}]</span>
+              <span className="console-message">{entry.message}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Initialize React Application
+ *
+ * Mount the DevConsole component to the #root element in devconsole.html
+ */
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Root element not found');
+}
+
+const root = createRoot(container);
+root.render(<DevConsole />);

packages/extension/src/entries/Offscreen/index.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SessionManager } from '../../offscreen/SessionManager';
+import { logger } from '@tlsn/common';
+import { getStoredLogLevel } from '../../utils/logLevelStorage';
+
+const OffscreenApp: React.FC = () => {
+  useEffect(() => {
+    // Initialize logger with stored log level
+    getStoredLogLevel().then((level) => {
+      logger.init(level);
+      logger.info('Offscreen document loaded');
+    });
+
+    // Initialize SessionManager
+    const sessionManager = new SessionManager();
+    logger.debug('SessionManager initialized in Offscreen');
+
+    // Listen for messages from background script
+    chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
+      // Example message handling
+      if (request.type === 'PROCESS_DATA') {
+        // Process data in offscreen context
+        sendResponse({ success: true, data: 'Processed in offscreen' });
+        return true;
+      }
+
+      // Handle config extraction requests (uses QuickJS)
+      if (request.type === 'EXTRACT_CONFIG') {
+        logger.debug('Offscreen extracting config from code');
+
+        if (!sessionManager) {
+          sendResponse({
+            success: false,
+            error: 'SessionManager not initialized',
+          });
+          return true;
+        }
+
+        sessionManager
+          .awaitInit()
+          .then((sm) => sm.extractConfig(request.code))
+          .then((config) => {
+            logger.debug('Extracted config:', config);
+            sendResponse({
+              success: true,
+              config,
+            });
+          })
+          .catch((error) => {
+            logger.error('Config extraction error:', error);
+            sendResponse({
+              success: false,
+              error: error.message,
+            });
+          });
+
+        return true; // Keep message channel open for async response
+      }
+
+      // Handle code execution requests
+      if (request.type === 'EXEC_CODE_OFFSCREEN') {
+        logger.debug('Offscreen executing code:', request.code);
+
+        if (!sessionManager) {
+          sendResponse({
+            success: false,
+            error: 'SessionManager not initialized',
+            requestId: request.requestId,
+          });
+          return true;
+        }
+
+        // Execute plugin code using SessionManager
+        sessionManager
+          .awaitInit()
+          .then((sessionManager) => sessionManager.executePlugin(request.code))
+          .then((result) => {
+            logger.debug('Plugin execution result:', result);
+            sendResponse({
+              success: true,
+              result,
+              requestId: request.requestId,
+            });
+          })
+          .catch((error) => {
+            logger.error('Plugin execution error:', error);
+            sendResponse({
+              success: false,
+              error: error.message,
+              requestId: request.requestId,
+            });
+          });
+
+        return true; // Keep message channel open for async response
+      }
+    });
+  }, []);
+
+  return (
+    <div className="offscreen-container">
+      <h1>Offscreen Document</h1>
+      <p>This document runs in the background for processing tasks.</p>
+    </div>
+  );
+};
+
+const container = document.getElementById('app-container');
+if (container) {
+  const root = createRoot(container);
+  root.render(<OffscreenApp />);
+}

packages/extension/src/entries/Options/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TLSN Extension Settings</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

packages/extension/src/entries/Options/index.scss

@@ -0,0 +1,204 @@
+// Options page styles - dark theme matching extension style
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, sans-serif;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  min-height: 100vh;
+  color: #e8e8e8;
+  line-height: 1.6;
+}
+
+.options {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 40px 24px;
+
+  &--loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    gap: 16px;
+  }
+
+  &__spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-top-color: #4a9eff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  &__header {
+    margin-bottom: 32px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      background: linear-gradient(90deg, #4a9eff, #a855f7);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+  }
+
+  &__content {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  &__section {
+    h2 {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: #fff;
+    }
+  }
+
+  &__section-description {
+    font-size: 14px;
+    color: #a0a0a0;
+    margin-bottom: 24px;
+  }
+
+  &__log-levels {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__radio-label {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.05);
+      border-color: rgba(74, 158, 255, 0.3);
+    }
+
+    &--selected {
+      background: rgba(74, 158, 255, 0.1);
+      border-color: rgba(74, 158, 255, 0.5);
+
+      .options__radio-custom {
+        border-color: #4a9eff;
+        background: #4a9eff;
+
+        &::after {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
+  &__radio-input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &__radio-custom {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    position: relative;
+    margin-top: 2px;
+    transition: all 0.2s ease;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      width: 8px;
+      height: 8px;
+      background: #fff;
+      border-radius: 50%;
+      opacity: 0;
+      transition: all 0.2s ease;
+    }
+  }
+
+  &__radio-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__radio-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: #fff;
+    font-family: 'Monaco', 'Menlo', monospace;
+  }
+
+  &__radio-description {
+    font-size: 13px;
+    color: #a0a0a0;
+  }
+
+  &__status {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    font-size: 13px;
+  }
+
+  &__saving {
+    color: #f59e0b;
+  }
+
+  &__success {
+    color: #10b981;
+  }
+
+  &__current {
+    margin-left: auto;
+    color: #a0a0a0;
+    font-family: 'Monaco', 'Menlo', monospace;
+  }
+
+  &__footer {
+    margin-top: 24px;
+    text-align: center;
+
+    p {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/extension/src/entries/Options/index.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { LogLevel, logLevelToName, logger } from '@tlsn/common';
+import {
+  getStoredLogLevel,
+  setStoredLogLevel,
+} from '../../utils/logLevelStorage';
+import './index.scss';
+
+interface LogLevelOption {
+  level: LogLevel;
+  name: string;
+  description: string;
+}
+
+const LOG_LEVEL_OPTIONS: LogLevelOption[] = [
+  {
+    level: LogLevel.DEBUG,
+    name: 'DEBUG',
+    description: 'All logs (verbose)',
+  },
+  {
+    level: LogLevel.INFO,
+    name: 'INFO',
+    description: 'Informational and above',
+  },
+  {
+    level: LogLevel.WARN,
+    name: 'WARN',
+    description: 'Warnings and errors only (default)',
+  },
+  {
+    level: LogLevel.ERROR,
+    name: 'ERROR',
+    description: 'Errors only',
+  },
+];
+
+const Options: React.FC = () => {
+  const [currentLevel, setCurrentLevel] = useState<LogLevel>(LogLevel.WARN);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  // Load current log level on mount
+  useEffect(() => {
+    const loadLevel = async () => {
+      try {
+        const level = await getStoredLogLevel();
+        setCurrentLevel(level);
+        // Initialize the logger with the stored level
+        logger.init(level);
+      } catch (error) {
+        logger.error('Failed to load log level:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadLevel();
+  }, []);
+
+  const handleLevelChange = useCallback(async (level: LogLevel) => {
+    setSaving(true);
+    setSaveSuccess(false);
+
+    try {
+      await setStoredLogLevel(level);
+      setCurrentLevel(level);
+      // Update the logger immediately
+      logger.setLevel(level);
+
+      setSaveSuccess(true);
+      // Clear success message after 2 seconds
+      setTimeout(() => setSaveSuccess(false), 2000);
+    } catch (error) {
+      logger.error('Failed to save log level:', error);
+    } finally {
+      setSaving(false);
+    }
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="options options--loading">
+        <div className="options__spinner"></div>
+        <p>Loading settings...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="options">
+      <header className="options__header">
+        <h1>TLSN Extension Settings</h1>
+      </header>
+
+      <main className="options__content">
+        <section className="options__section">
+          <h2>Logging</h2>
+          <p className="options__section-description">
+            Control the verbosity of console logs. Lower levels include all
+            higher severity logs.
+          </p>
+
+          <div className="options__log-levels">
+            {LOG_LEVEL_OPTIONS.map((option) => (
+              <label
+                key={option.level}
+                className={`options__radio-label ${
+                  currentLevel === option.level
+                    ? 'options__radio-label--selected'
+                    : ''
+                }`}
+              >
+                <input
+                  type="radio"
+                  name="logLevel"
+                  value={option.level}
+                  checked={currentLevel === option.level}
+                  onChange={() => handleLevelChange(option.level)}
+                  disabled={saving}
+                  className="options__radio-input"
+                />
+                <span className="options__radio-custom"></span>
+                <span className="options__radio-text">
+                  <span className="options__radio-name">{option.name}</span>
+                  <span className="options__radio-description">
+                    {option.description}
+                  </span>
+                </span>
+              </label>
+            ))}
+          </div>
+
+          <div className="options__status">
+            {saving && <span className="options__saving">Saving...</span>}
+            {saveSuccess && (
+              <span className="options__success">Settings saved!</span>
+            )}
+            <span className="options__current">
+              Current: {logLevelToName(currentLevel)}
+            </span>
+          </div>
+        </section>
+      </main>
+
+      <footer className="options__footer">
+        <p>Changes are saved automatically and take effect immediately.</p>
+      </footer>
+    </div>
+  );
+};
+
+// Mount the app
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(<Options />);
+}